Problem Description
- When loading your website a certain component of the site displays incorrectly for a short amount of time (typically <1s) and then appears normal after the page loads
- Often this is the header as it delays loading CSS for that controls mobile views
- You are using the WP Compress plugin
Problem Resolution
This solution can be adapted to work with CSS generated by your theme or a plugin, however to describe how to solve this as clearly as possible we're going to focus on a header that's styled by the theme that powers your site.
It's important to note that you must be familiar with inspecting HTML to resolve this. If you are not, you must be willing to learn some technical concepts or have a developer or a fully managed WordPress hosting company on hand to help.
- Obtain CSS location: If you aren't already sure, use your browser web inspector to determine which CSS files are powering that area of the site. For this example we're going to assume the header is powered by the theme at wp-content/themes/mytheme.
- Exclude CSS location: Login to the WordPress admin and choose Settings > WP Compress > Performance Tweaks. Under Smart CSS look for "Optimize CSS" and click the cog icon to the right. Under "Critical CSS Exclusions" enter the CSS location you found. It could be the relative path to the CSS file directly or just a partial path
Save changes, clear and preload cache, and test! Issue should be fixed.
