Table of Contents
To optimize your site, use a web based tool to analyze the site's performance. We recommend using GTmetrix or PageSpeed Insights. These tools will provide very useful information on what needs to be done to your site to improve performance. Inspect the details of the reports for recommendations on the various ways the site can be optimized. Generally, the recommendations that have a larger impact on the site's performance are listed at the top so it's a good idea to work your way down for maximum effect.
The following list of articles explain how to use the JCH Optimize plugin to address each recommendation you will typically find in these reports.
Getting Rid of this Pesky PageSpeed Alert
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
<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
Optimize CSS Delivery
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.
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.