Note: For further information on PageSpeed Insights and why you should not bother chasing a “grade” please read this docs article:
Google PageSpeed Grade does not Improve
Many of the suggestions that Google PageSpeed Insights are generic and can be hard to implement. A common recommendation it makes is to:
WP Rocket has 2 options to address this recommendation. You will find them in the Static Files tab, under Render-blocking CSS/JS:
By enabling these options you may see an improvement in your PageSpeed score or GT Metrix/Pingdom grade. Results will vary from site to site. Always remember to test the effect on the speed of your site.
Load JS files deferred
This option addresses the PageSpeed recommendation:
By enabling this option, all your JS files, including those minified by WP Rocket, will be loaded with the
If you have any issues on your site after activating this option, you may need to activate Safe Mode, which excludes jQuery from being deferred, for compatibility reasons:
Depending on your site, you may also need to exclude some more files from being deferred:
Exclude files for Defer JS
Legacy options: If you were previously using the Advanced options JS files with deferred loading or JS files to be included in the footer during the minification process, then you will still see those options when you update to WP Rocket 2.10.x. However, those options will be deprecated in a future version so we recommend you use the new Load JS files deferred option instead; it replaces the need for those previous options.
Load CSS files asynchronously
WP Rocket’s option to load CSS files asynchronously addresses the PageSpeed recommendation:
Optimize CSS delivery
Heads up! This is considered an advanced option. It may require manual tweaking to get right.
Loading CSS asynchronously means that your page will start to load and be viewable, without all its CSS styles. That means it could look a little strange for a few moments while loading:
This is called the FOUC: Flash of un-styled content. To avoid this, you must use what is called Critical Path CSS. This means that the CSS for the content at the top of your page must be placed directly in the HTML to avoid the FOUC while the page loads.
Generate Critical Path CSS
To generate the necessary CSS you can use this Critical Path CSS Generator tool:
- Turn off WP Rocket before you start using the tool!
Enter your URL in the tool and copy the generated CSS into the Critical path CSS field in WP Rocket:
Heads up! You may have to edit any relative URLs in the code (e.g. for background images, fonts etc.) and turn them into absolute URLs manually.
For example, if the generated CSS contains a relative reference to a font, like this:
The relative path (indicated by
../ in the URL) will not be correct when removed from its original context. Therefore you need to replace it with the absolute, correct path, for example:
If you need to exclude a specific CSS file from being loaded asynchronously, follow this guide:
Exclude files from Async CSS