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.
We call these stylesheets and scripts, ‘render-blocking CSS and JavaScript and this must be fixed if you are to attain a high Google Page Speed score. You are, after all, aiming for 100/100 and there are two ways that you can fix this render blocking.
Using Autoptimize
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
- Look for CSS Options and JavaScript Options and tick the boxes beside them
- 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
- Enable the plugin to remove any scripts that are excluded as a default option and to include Inline JavaScript
- 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
Autoptimize works by aggregating all enqueued CSS and JavaScript and then creating minified JS and CSS files, lastly serving your website with cached copies.
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.
- Where it says, “Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content”, click the option for “Show how to fix” – you will see a list of the stylesheets and scripts.
- 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.
Troubleshooting
You may find it quite hard to fix all the render blocking issues because it will depend entirely on how your theme and plugins use CSS and JavaScript.
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.
Tool Links
Here are links to the tools mentioned in this article.