Chapter 4. Optimizing Your Site With The Plugin
Prev   Next

Chapter 4. Optimizing Your Site With The Plugin

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.

Eliminate Render-Blocking Javascript and CSS

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

PageSpeed Render Blocking Rule

[Note]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

  1. 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.

  2. Eliminate CSS render-blocking

    1. Enable the Optimize CSS Delivery setting 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.

      Optimize CSS Delivery

      The Optimize CSS Delivery Feature

    2. 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]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.

I'm still getting the error after enabling this feature.  If you're still seeing this error then most likely it's because your website is using javascript to perform some of the initial render of the section of the page above the fold. The plugin runs on the server but javascript runs in the browser so any HTML generated by javascript would not be available to the plugin to optimize.

To test this, simply disable javascript in your browser temporarily and reload the page and see if it renders the way it should. It it doesn't, then you know that it's using javascript to perform the initial render. Your only other option then would be to correct this design flaw in your template or use another application that doesn't render the page in this way.

Notable applications are some slideshows that use javascript to render. Ideally the developer should load the first slide using CSS and then use javascript to transition through the slides after the page loads.

Prev   Next
Excluding files and declaration blocks Home Remove Unused CSS