Website Image

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.

 

PageSpeed Insights

 

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:

https://developers.google.com/speed/pagespeed/insights/

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

 

Once I had installed and activated it, the plugin page is split into 5 sections: HTML Options, JavaScript Options, CSS Options, CDN Options and Cache Info.

 


 

The two sections you want are (you guessed it) Javascript and CSS.

All you have to do is click the box underneath each title:

  1. Optimise Javascript Code
  2. Optimise CSS Code
  3. 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.)

 

Improve HTML

 

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.

If you need help speeding up your website, you can get in touch with us.

 

No Comments

Post A Comment