How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

Question

I'm using Joomla to develop my website, and when I test my website on PageSpeed Insights on Google, it generates the following must-fix warning for me:

Eliminate render-blocking JavaScript and CSS in above-the-fold content.

How to do this in Joomla? I did try to use extension to move the JavaScript down, but it's resulting in errors in the layout, and breaking the responsive functionality on my website.

Answer 1

The problem with JCHOptimize is that it's hard to get it to increase your Google PageSpeed Insights rankings on your website without it breaking other stuff.

In order to address these issues, you will need to work on 2 areas, CSS and JavaScript.

For the CSS, you will need to split your main CSS file to 2 parts: The first part is the one that you will absolutely need to make your website look well when it first loads (for example, the width of the body ), while the second part is the one that you can live without for a second or so (until the page fully loads).

As for the JavaScript, you will need to add async to the JavaScript libraries that are not necessary during pageload, and you will need to get rid of all the JavaScript libraries that you don't need.

In my opinion, trying to get something over 85 with Google PageSpeed Insights is overkill and is not really necessary. I know that most people strive for a 100, but for many, this number is technically impossible (we've seen it though on a few websites).

Answer 2

My best advice is to use JCH Optimize plugin. For me the paid version did wonders (on automatic settings). Maybe the free version will also do the work. Link: http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/12088

Answer 3

To avoid render blocking you need to arrange your CSS and Javascript efficiently. Adding async to js and moving it to bottom mostly does the job. But in a dynamic CMS like Joomla and Wordpress it is not easy. Extensions add css and js sometimes in non-standard ways. If you are looking for a plugin to do it out of the box, I suggest trying Speed plugin from Codingmall.com. It is not free but you can get a free trial. Speed up Joomla