The Easiest Way to Fix WordPress Render-Blocking JS & CSS Errors
If a website visitor will only give your content three seconds to evaluate if it meets their needs how long do you think they will wait for it to load? Internet connections are better than ever but the device of choice has changed from computers to phones and connections can be patchy. If you want happy website users then you want your website to be fast to load.
Fortunately, the kindly folks at Google have provided us with a simple tool that evaluates your site from a desktop and mobile perspective and provides guidelines on how to optimise for speed. You simply visit the tool, enter your URL and review the feedback:
Amongst the recommendations, you will see an eliminating render-blocking JS and CSS.
We had been looking a simple solution for our clients that did not require lots of development work and costs. In the end, we found a simple solution for WordPress sites which came in the form of Autoptimize.
The plugin is easy to use and you can test your results with the page speed tool easily enough.
Improve CSS and JS
All you have to do is click the box underneath each title:
- Optimise CSS Code
- Click the save button and you are done
Re-run your site in Google Pagespeed and see the improvement (I would recommend having the old run in another tab, so you can compare.)
But wait, there’s more! There’s a not-so-urgent recommendation in the tester which says that you could also improve your HTML code as well. Predictably, this is done by doing what you’ve just done, but in the HTML section.
Two birds with one stone
If the plugin has an unintended side effect, you can just uncheck the boxes to revert any changes you made, so if optimising the CSS is causing front-end differences on your site, you can revert it back to the way it used to be easy.