How To Improve Page Load Times

The Art of Web Optimization

Improving your sites page load times is not easy, and can be a bit of an art. Every web page is unique and appeals to a different audience. Optimization techniques that work well for sites with a global audience may actually have a negative effect for sites with a localized audience. Sites with just a few images will benefit more from certain techniques, while sites with lots of images will benefit from others. We've developed an online reporting solution to help make sense of it all and prove what's best for you. In this article we attempt to summarize these findings.

Reducing the Number of Sub-Requests per Page

If there is one philosophy that you take away from this article it should be this:
Fewer sub-requests = faster page
When I started studying web optimization several years ago my focus was primarily on reducing a page's weight (the amount of bandwidth required to download the entire contents of a page). After developing Snap-O-Meter and putting different techniques to the test, I've proven page weight to be far less important than simply reducing the number of requests on a page. This does not mean you have to go out and redesign your web page to remove images. Images are going to give your site a more professional look, and often convert more customers. Read the section on CSS Sprites which describes how you can upload more than one image to clients within a single request.

Optimizing Images for the Internet

Different Formats

There are four primary formats to choose from when optimizing images for the internet. Each format stores and compresses image information differently. These four main formats include PNG-8, PNG-24, GIF, and JPEG. Below we will discuss the different formats and what images they work best with.

GIF

The GIF format is a bit-mapped image format and is the most commonly used format for web graphics. It supports up to 256 colors, transparency, and animation. Typically the PNG-8 format compresses better for most web images, although for really small images, or images that require transparency or animation, GIF is an ideal choice.

JPEG

The JPEG format works well for photographs and other large images with many colors because of it's lossy compression algorithm. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. This often allows large images to be compressed more than any other format with little or no perceptible loss of image quality

PNG-8

The Portable Network Graphics is a bit-mapped image format that uses a loss-less data compression algorithm. It was designed to be a replacement for the patented GIF's. This format does not support transparency, translucency, or animation. This format is the best choice for most internet graphics.

PNG-24

PNG-8 and PNG-24 are the same format, however when transparency, translucency, or more than 256 colors are used, 24 bits are used to represent each pixel instead of 8. This increases the size of the image and can usually be avoided. If only transparency is required than use the GIF format instead. Also try to avoid translucency by flattening the images so that you can use an image format with less overhead.

Choosing the Right Format

Adobe Photoshop has a nice feature within the "File -> Save for Web" function. It allows a nice 4-up view where you can compare the file size of three different image settings and compare the quality with the original. First compare the different formats GIF (with 256 colors), JPEG (high quality), or PNG-8 (with 256 colors) and decide which format is best suited for the given image based on the resulting image size. If JPEG is the best choice try to further compress the image by reducing the quality to an acceptable level. For PNG-8 or GIF images, try to compress the image further by reducing the number of colors used by the image. Often times you can reduce the number of colors down to 128, or even 64 colors, without any noticeable effect to the human eye.

Image Stacking (CSS Sprites)

Overview

Image Stacking is a method of speeding web page delivery by combining separate images into one image, reducing the number of HTTP requests needed to load a web page. CSS is used to separate these stacked images back into individual images. This results in a web page that is visually identical but loads faster, because of a reduction in HTTP requests.

On some web pages, all images can be combined into a single image, however there are several exceptions:

• Images that contain a large number of colors such as gradients will only stack well with other images that contain a large number of colors.
• Images that contain translucency must be stored in PNG-24 format, which typically produces a larger file size than PNG-8, GIF, and JPEG formats. This forces the entire image stack to need this more expensive format, and sometimes is not worth the overhead. Often these images can be flattened by combining the background where the image is located on the page with the image, so that translucency is no longer necessary.

Implementing Image Stacking

First you must combine the images into a single image and then save it into an optimized format such as PNG-8, GIF, or JPEG. This will require graphic manipulation software such as Adobe Photoshop.

Next you must include and split this image inside your web page. The trick involves a combination of the CSS attributes background-image, background-position, width, height, and overflow.

• background-image - The background-image specifies the location of the stacked image.
• background-position - Use negative background-position values to position the stacked image.
• height and width - The height and width should be set to the size of the separate image.
• overflow: hidden - This is often needed to support Internet Explorer 6.

Example

Now that we have covered the basic concept, let's dive into an example. The following html is a simple example with three div's each representing an image using standard CSS background attributes.

<style type="text/css">
#a,#b,#c {
        border: 1px solid blue;
        margin: 5px;
        float: left;
        width: 64px;
        height: 64px;
}
#a {
        background-image: url(/images/image-stacking/exampleA.gif);
}
#b {
        background-image: url(/images/image-stacking/exampleB.gif);
}
#c {
        background-image: url(/images/image-stacking/exampleC.gif);
}
</style>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Here is the output of the HTML above

Next, we open Adobe Photoshop, or an alternative graphics manipulation application, and place the three 64x64 images side by side into one image 192x64

Now it's time to split the image using CSS. Note that the three div's use the same value for the background-image attribute, and have different background-position values.

<style type="text/css">
#aStacked,#bStacked,#cStacked {
        border: 1px solid blue;
        margin: 5px;
        float: left;
        width: 64px;
        height: 64px;
        overflow: hidden;
        background-image: url(/images/image-stacking/exampleStacked.gif);
}
#aStacked {
        background-position: 0 0;
}
#bStacked {
        background-position: -64px 0;
}
#cStacked {
        background-position: -128px 0;
}
</style>
<div id="aStacked"></div>
<div id="bStacked"></div>
<div id="cStacked"></div>

The output is identical to the original output, but the number of http requests and the resulting page load time have been reduced.

Browser Support

All modern browsers are supported including Internet Explorer (6,7,8), Firefox, Google Chrome, Safari, and Opera.

Streamlining or Bundling CSS and JavaScript files

What is Streamlining?

Streamlining is the act of taking external resources like CSS and JavaScript files that are loaded through separate http requests using <link> and/or <script src="..."> tags and displaying their contents inline within the HTML source. While this prevents these resources from being cached, it proves to be an effective optimization for workloads that have a low number of page views per visitor.

Bundling Separate Files

Some sites may take a hit in performance, because their visitors typically view many pages. By streamlining these resources, they can no longer be cached on subsequent page views. By bundling separate CSS and JavaScript files into a single file, you can still cache the resources while reducing the number of http requests and improving page load time.

HTTP Compression

HTTP Compression is a feature of the HTTP protocol that allows properly configured web servers to compress data to browsers that also support it. Typically HTML, CSS, and JavaScript will compress to 75 and 95 percent of its original size. This can save a ton of bandwidth for high volume sites, and would also seem to promote a faster loading page. We are unclear at this point as to whether this helps or hurts page load times. Logically it makes sense that this would help, especially for slower connections like modems and mobile devices.

Test whether HTTP compression is enabled.

HTTP Caching

HTTP Caching is a feature of the HTTP protocol that allows properly configured web servers to instruct web browsers to store copies of resources on their local machine. The next time a request is made for the same resource, the web browser will use the local copy instead of retrieving the resource from your web servers. While this will not help with the initial page view from a visitor, it can drastically reduce the load time of subsequent page views.

Implementing

HTTP caching is accomplished through proper use of the Cache-control, Expires, and Proxy response headers. I recommend using the Cache-control and Proxy headers and not the Expires header. The Expires headers can misbehave if users or proxies do not have the correct time. To enable content to be cached for a week, specify the following response header.

Cache-Control: max-age: 604800

If you want to prevent a resource from being cached by web browsers, use the following response header instead:

Cache-Control: private, no-cache
Pragma: no-cache

There are other useful options to the Cache-Control header. You can read about them in the HTTP/1.1 specification.

Test whether HTTP caching is enabled for a URL.

Using a CDN (Content Delivery Network)

The concept behind a content delivery network is simple. Cache and serve cache-able content from servers located closer to your end-user's location. This has become a crowded market and there are many players in the market. We put four popular CDN's to the test, and our findings where quite surprising. Every CDN we tested had similar results. Page loads in Europe were faster, almost twice as fast in some countries. Asia traffic was actually slower. In the United States, where performance was most important, the results were almost identical. Don't let the CDNs fool you with their Gomez and Keynote reports boasting substantial gains. Test the page load time of actual visitors and get the facts.