How to Eliminate Render-Blocking Javascript and CSS
Google PageSpeed
If you do an analysis of your website with Google PageSpeed , You are likely to see as one of the recommendations highlighted for optimizing your site: "Eliminate render-blocking JavaScript and CSS in above-the-fold content". This tutorial will describe how to address that using the JCH Optimize plugin.
PageSpeed Render Blocking Rule
![[Note]](https://st1-jchoptimize.netdna-ssl.com/media/com_docimport/admonition/note.png){kind=small} | Note |
|---|---|
The screenshot above shows the link generated to the combined files by the plugin because the plugin is enabled. If the plugin was not enabled you would see the CSS and javascript files that were originally on the page so this is not a condition created by the plugin. |
First of all, let's try to understand what this means. Now when the browser is downloading and rendering your webpage, whenever it encounters a <link> tag to a CSS file or <script> tag to a javascript file, it downloads and executes the file before continuing to parse the rest of the document. Since most times these tags are in the <head> section of the page, then all of these files will have to be executed before the user can begin to see anything on your page. This is referred to as "Render-blocking".
What Google is suggesting, is that it may not be necessary to download some of these files before rendering your content to your users. If you could defer some of this download until after the user starts viewing your page then you could give your users an enhanced user experience and create the distinct impression that your page is downloading faster. It's important, I think, to note that in doing so your total page load time may not be less, because these files will still be downloaded, but your users will begin to view your web site's content quicker, resulting in an enhanced user experience.
Use the Pro version to eliminate render-blocking
The following procedure describes how to eliminate render-blocking using JCH Optimize. You will need to Pro version of the plugin to complete this so if you haven't already, now is a good time to subscribe to the Pro version.
Procedure 4.1. Eliminating render-blocking with JCH Optimize Pro
Eliminate render-blocking javascript
In the
Combine CSS and javasript filessection on the Basic Options tab, click the or button to apply either setting.
Optimum Setting Eliminates Javascript Render-Blocking
The
PremiumandOptimumAutomatic Settings, available only in the Pro version, remove render-blocking javascript by placing the combined javascript at the bottom of the page just before the ending</body>tag. This is most times sufficient to eliminate javascript render-blocking but theOptimumsetting takes it a step further by adding thedeferandasnycattributes to the script element.The
deferattribute will cause the script to be executed AFTER the page has loaded, and theasyncattribute will cause the script to be executed WHILE the rest of the document is being parsed. Both attributes effectively achieves the same goal of eliminating render-blocking but are both present for full cross-browser compatibility.Important This does not apply to files that have been excluded from the plugin. These files will remain in their original location and if in the head of the document, will still be blocking. Additionaly, maybe some files are being loaded from other javascript codes. Because these files are not embedded in the HTML, they can not be optimized by the plugin and will remain blocking.
Optimize CSS Delivery
Enable the
Optimize CSS Deliverysetting on the Pro Features tab, also available only in the Pro version, to address the CSS render-blocking issue. This setting attempts to extract the critical CSS required to display the page above the fold and inline this CSS in a style declaration block in the head of the document. The rest of the CSS will be loaded via javascript after the page has rendered The Optimize CSS Delivery Feature
Select an appropiate value for the
Number of elements.Since there is no reliable way server side to determine which part of the document falls above the fold, the plugin offers a number of settings in a drop down list that corresponds to the number of elements in the document starting from the top that the plugin will find and extract CSS values for. You want the extracted critical CSS to be as small as possible but if it is too small and doesn't provide CSS for the entire portion above the fold then you will see some 'jumping' of the website while it is loading.
Important Again, this only works with CSS that is combined and optimized by the plugin. Excluded files will remain in the <head> section of the document and will remain blocking.
![[Important]](https://st1-jchoptimize.netdna-ssl.com/media/com_docimport/admonition/important.png){kind=small}
