My Site Has No Styles and Looks Broken

If you see that your site looks broken, i.e. it loads but there is no styling as in the image below, you can do some important troubleshooting which will help us better assist you. 

Find Out What The Error Is

I recommend using the Google Chrome browser for this troubleshooting process, but each browser has a similar tool. 

  • Right-click anywhere on the broken page, choose "Inspect"
  • This will reveal a panel at the bottom of the screen. Click the red notification at the top right of this panel.
  • You should then see some red error messages - take a screenshot of these and include it in your support ticket. 

Common Errors

Insecure Content from CDN

If you use SSL on your site, so that your pages are served via https, and you use a CDN, that means your CDN also has to serve files over https. If it doesn't, most browsers will block the insecure files, including images, CSS files etc and your site will look broken. When you click the red alert in Chrome, you will see something like the following - note the ERR_INSECURE_RESPONSE in the bottom panel: 

[CLICK IMAGE FOR FULL SIZE]

How To Fix: Talk to your CDN provider and see if they can enable https for your CDN assets. If they can't do that, you will need to go to the WP Rocket CDN settings and check the box "Disable CDN on HTTPS pages."

Security Restriction

Some security plugins place an htaccess file in some of the folders on your server, and this can prevent minfication working correctly, thereby blocking access to some of your files. 

This typically shows as a 403 (Forbidden) error, like this (click image for full size): 

How To Fix: If you have a security plugin, modify the settings until the error resolves. You can also manually check the wp-content folder for any htaccess files. If you find one, try re-naming it and see if the error resolves. 

404 on Minified Files

If your site breaks and you see a 404 error on the minified files, this can be hard to track down. Generally it's related to the Clear Cache Lifespan. It means that for some reason, when the cache is cleared automatically, the minified files are not deleted and the cache links to old versions which are no longer available, hence the 404. 
Click image for full size.

How To Fix: In the WP Rocket Basic Options, set the Clear Cache Lifespan to 0. (Your cache will still be kept up-to-date without issues when you publish new content).