All WordPress plugins and themes will add CSS and JS files to your website front-end and these can cause your page to take longer to load as well as blocking page-rendering.
These files must be loaded by the user’s browser before the HTML can be loaded and those who have a poorer internet connection will have to wait even longer.
This is by far the easiest way and is a recommended method. First off, install the Autoptimize plugin through your WordPress dashboard and then activate it. Now you need to configure it.
- Go to Settings>Autoptimize
- Click on Save Changes
Now use Google Page Speed to test your website speed again. If there are still any render-blocking scripts, go back to the settings page for Autoptimize.
- At the top of the page, you will see Show Advanced Settings – click on this
- Go down to the CSS options and allow Inline CSS aggregations
- Click Save Changes and Empty Cache
Again, use Page Speed to test your website.
How it Works
Using W3 Total Cache
This is a slightly more complex method and is only recommended for those that already have W3 Total Cache enabled on their website. If you haven’t, and you want to use it, install the plugin on your dashboard.
- Now go to Performance>General Settings
- Go to the section called Minify and make sure it is enabled
- Now select the Manual minify mode
- Click on Save All Settings
The next step is to add the CSS and the JS that you need to be minified. The script and stylesheet URLs that are render-blocking can be found in the Page Speed tool.
- Hover your mouse cursor over a script and the URL will appear – select and then press CTRL+C (PC) or Command+C (Mac) to copy it
- Go back to the admin are on WordPress and visit Performance>Minify
- Add the JS files that you want to be minified – go to the JS section and click on Operations in Areas
- Set Embed Type for thesection to Non-Blocking async
- Next, click Add Script and add in the JSS scripts that you copied from Page Speed
- Now go to CSS and click Add a Stylesheet
- Once again, add the CSS URLs from Page Speed
- Click Save Settings and Purge Cache
Now go to Page Speed and test your website again, thoroughly, to ensure it all works OK.
While Page Speed and these two plugins can certainly help, the plugins might need specific scripts at another priority level if they are to work correctly.
If that is the case, these solutions may break the plugins or cause them to work in an odd way. Google might display specific issues, such as CSS Optimization for Above-the-Fold content. Autoptimize plugin gives the ability to manually fix that by enabling Inline CSS for displaying the area above the fold of your specific theme.
Here are links to the tools mentioned in this article.