Table of Contents
- Eliminate Render-Blocking Javascript and CSS
- Remove Unused CSS
- Optimize and Resize Images
- Defer or Load Javascript Asynchronously
- Combining Images into Sprites
- Use a Content Domain Network (CDN)/Cookie free Domain
- Leverage Browser Caching
- Enable Gzip Compression
- Prioritize Visible Content
- Reduce Server Response Time
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
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]](/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.
Javascript or CSS render-blocking
First we need to determine the type of file that is blocking, whether it's a javascript or css file or both since the method we use to eliminate either is different. Follow the procedure below to eliminate javacript of css render-blocking.
Procedure 4.1. Eliminating Javascript or CSS render-blocking
-
Eliminate render-blocking javascript
To eliminate render-blocking javascript, you need to defer or load the javascript asynchronously. The article, Defer or Load Javascript Asynchronously explains how to do that.
-
Eliminate CSS render-blocking
-
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]](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PC9zdmc+)
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]](/media/com_docimport/admonition/important.png){kind=small}