My Site Has No Styles and Looks Broken

In this Article

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

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

  • Right-click anywhere on the broken page, and choose Inspect.
  • This will reveal a panel at the bottom, or on the side 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:

How to fix: Talk to your CDN provider and see if they can enable HTTPS for your CDN assets. If they don’t, you will need to disable your CDN in WP Rocket.

Security restriction

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

This typically shows as a 403 (Forbidden) error, like here:

How to fix: If you use a security plugin, modify the settings until the error disappears. You can also manually check the wp-content folder for any .htaccess files. If you find one, try re-naming it and see if that fixes the error.

404 on minified files

If your site breaks and you see a 404 (not found) error on minified files, this is usually related to an additional caching layer such as a server-side cache from your web host. It means that when the WP Rocket cache is cleared, the other cache layer is not and continues to refer to old versions of the files which are no longer available—hence the 404 error.

How to fix: Find out if Varnish, Cloudflare, CloudProxy (from Sucuri), Incapsula, or any other form of caching is running on top of WP Rocket’s cache. If that’s the case, you will need to clear that cache manually in order to resolve the error.