Problem Description
- You're using WordPress and all content is there, but all or some styles are missing.
- You use a caching plugin like WP Rocket or WP Super Cache
- Your browser web inspector might indicate that loading javascript and CSS files result in a 404 error.
- Safari might say: "cannot decode raw data" (NSURLErrorDomain:-1015)
Problem Resolution
Log in to the WordPress admin, visit the page that isn't displaying correctly with ?test at the end of the URL. If the issue is still visible, check your server logs for an open_basedir error; if that exists in the logs, then our guide to resolving open_basedir errors will help you resolve this particular issue.
If the issue only occurs when you're not logged into the WordPress admin, complete these steps:
- Empty the cache using the caching plugin's option
- Disable caching plugin
- Remove the contents of wp-content/cache folder (not the folder itself) using Plesk File Manager or FTP
- Re-enable the caching plugin
That will likely resolve the immediate display issues.
If the issue returns seemingly randomly, there are two potential reasons for this:
1. Double caching/minification
This is where two systems are attempting to minify and/or cache your styles or javascript at the same time. Sometimes this is two optimization plugins conflicting, but the most common occurrence is when your theme configuration has an option to minify and/or cache files and you're using an optimization plugin as well.
The theme generates a min and/or cache file, then the optimization plugin does the same. When the theme then regenerates the min/cache files it will change its references to that file in the output code, but those new references don’t exist in the caching plugin's cache of the page. The cache file provided by your caching plugin then serves the page data with links to older stylesheets that no longer exist until the cache plugin's expiry interval is hit. This could be minutes, hours, or days depending on the plugin and its configuration.
The solution to this is to disable the theme's minification/caching and ensure the caching plugin is set to minify instead. This way the theme isn't generating those changed filenames which conflict with the cached page output. You may also wish to report the issue to the developer so they can (hopefully) change the way their minification works to prevent filename changes. Instead of minified file name changes, where the css file might change from 1234.css to 1235.css, modern conventions call for a version query string like myfile.css?ver=1234. This keeps the filename the same so that the cached page output continues to reference a valid CSS file.
2. Reduce Unused CSS (RUCSS) feature is not working properly
This is a feature offered by many optimization plugins like WP Rocket, Autoptimize, and PerfMatters. It attempts to determine which styles do not need to be loaded on each page, and exclude them from the actual CSS that is part of the page load. This can improve page load times and will surely help improve your score with Google PageSpeed. However sometimes it fails to determine the correct styles to exclude and either doesn't load any stylesheet at all (rare cases; but we've seen it happen) or excludes some CSS your page needs.
The best way to determine if this is the cause is to disable any feature in your optimization/caching plugin that indicates it's removing or optimizing CSS.
If you're using WP Rocket, they have a great guide describing how RUCSS works, how to disable it, and how to exclude specific CSS from it. This will help you troubleshoot issues with RUCSS.
Other caching plugins should also provide documentation on how to disable the feature and how to tweak it to work best with your theme and plugin set.
