Mar 272015
 
Article HTML

We have already stressed in previous posts the importance of the time it takes for a web page to be fully loaded in the client browser: users will get a better impression of the site if the content is “snappy”. Besides, the page load time is a factor that the major search engines, including Google, take into account in their ranking algorithms.

Downloading and processing external resources is often one of the main contributions to the total page load time. Among these resources, external javascript libraries and CSS stylesheets are most often the main contributors to this.

We have already covered in our previous post on “How to reduce the page load time with asynchronous javascript” the way to load javascript resources in parallel with the main HTML document, so as not to block the rendering of the above-the-foldĀ content.

This post continues the series on web site optimization techniques, explaining how to load asynchronously external CSS stylesheets.

Analysis of the total page load time

There are a good number of public and free tools that can be used to determine the contribution of each of the elements that compose a web page to the total page load time. Among them, Google Pagespeed Insights is specially interesting, being the tool that the main search engine offers to webmasters.

Let’s use this tool to analyze the status of the home page of one of our street directories: http://deutschland-strasse.openalfa.com

render-blocking-css-1

We can see that the score (94/100) obtained by the page for desktop computers is fairly good, thanks to the removal of the bottleneck in the load of external javascript resources, as explained in our previous post. But the result of the analysis shows that there are still render-blocking resources. Clicking on the “Show how to fix” link immediately below, the detail information reveals that the culprit is the stylesheet used in the page:

render-blocking-css-2

Thus, the page speed could be optimized if the stylesheet is loaded asynchronously. But the “<style>” tag does not admit attributes “defer” or “async”, as does the “<script>” tag used to load external javascript. Luckily, there are other ways to do it, as explained below.

Downloading LoadCSS

There is a small script named “loadCSS” that can be used to download asynchronously the external stylesheets used in a web page.

The script is available for download from the loadCSS page on github. The file loadCSS-master.zip downloaded from that page contains the file loadCSS.js. This file contains the definition of the loadCSS() function that we’ll use for the aynchronous download of CSS files.

Replace references to external CSS resources with calls to loadCSS

Looking at the HTML code of the page being optimized, we can find inside the <head> section the references to the external CSS resources used in the page. For instance:

First, take note of the names of the resources referenced, and remove these references.

Next, insert in the <head> section a block of javascript code. At the start, copy the definition of the loadCSS funtion previously downloaded:

below, add a call to loadCSS for each of the references to stylesheets previously removed:

Then, the result can be verified by loading again the page in a browser. In most cases, the page content will be displayed very briefly on screen with no style applied. This side effect is usually known as “FOUC” (Flash Of Un-styled Content). After a short while, once the download of the stylesheets is done, the style rules will be applied, and the page will be displayed with the same look it used to have before the optimization.

How to avoid the FOUC

The FOUC effect can be avoided by inlining in the <head> section a <style> block with the minimum set of CSS rules that have influence on the rendering of the above-the-fold content of the page: layout, font types and sizes,…). There is no general procedure for this task, as it depends mainly on the specific design used by the web site being optimized. Naturally, there is a tradeoff between the amount of rules inlined and the minimization of the FOUC effect obtained. Generally speaking, rules that specify the dimensions of elements always need to be inlined, while rules for rounded corners, shadowing effects, etc do not need to be immediately applied.

Test the result

Finally, once the optimization has been performed, the page can be analyzed again with Pagespeed:

render-blocking-css-3

in this example, we can verify that the desired result has been achieved: There is no more a warning about render-blocking resources, and the page score went from 94 to 96.

And that’s all!

 Posted by at 3:27 pm

 Leave a Reply

(required)

(required)