Make the Web Faster

Properly including stylesheets and scripts

Author: Tony Gentilcore, Software Engineer

Recommended experience: Basic HTML, CSS, JavaScript

Typical web pages spend 80-90% of their load time waiting for the network. A powerful technique to reduce the amount time spent blocked on the network is to get rid of patterns that cause some browsers to serialize resource downloads.

This article uses Steve Souders' Cuzillion tool to demonstrate three common patterns that lead to unnecessary serialization and have extremely easy fixes. Some newer browsers have fixed these bottlenecks, so explore the examples in different browsers. Internet Explorer 7.0 demonstrates all of the behavior described in this article.

1. Combine external JavaScript files

Downloading an external script file is somewhat unique because it causes popular browsers to block subsequent downloads until the script has completed. This is in stark contrast to downloading images which may occur in parallel (up to a limit).

Notice in Example 1, two one-second delayed images load in parallel, taking about one second to complete. However, in Example 2, two one-second scripts take about 2 seconds to complex. This is the difference between a serial and parallel download.

So, if you have multiple script files, combine them into a single file before including in your page.

2. Include external CSS files before external JavaScript files

While script files block subsequent downloads, those already in progress will remain downloading.

In Example 3, a script before a CSS file causes the browser to block, taking about 2 seconds. However, simply moving the CSS above the script allows them to load in parallel (see Example 4).

So, if you have an external script and CSS file, always include the CSS file before the script so that they will download in parallel.

3. Do not include inline JavaScript between external CSS and other resources

Inline script tags, even though they don't download anything, will prevent subsequent resources from downloading in parallel with a CSS file.

In this Example 5 an inline script block is placed between a style and script. It serializes the downloads. In Example 6, it is moved above the style and again parallelization is restored.

So, if you have an external CSS file be sure not to insert inline script tags between your CSS file and the next downloadable resource.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.