5 tips for optimising page load speed

Since Google’s Caffeine update, their algorithm has placed a greater importance on page load speed. A website which loads faster has always had a number of benefits for users and site owners, the most basic reason being that readers are more likely to stay on a site which loads quickly from page to page. With Google’s updates, page speed is becoming even more important. In light of this, I wanted to share a few quick recommendations to help reduce your page load time, as well as some useful tools and resources we use here at Switched on Media.

1. Enable Server Compression

If you’re using Apache you would have most likely heard of mod_gzip (aka gzip), which like mod_deflate, is a server compression algorithm. When implemented, it reduces the size of web pages served over HTTP.

The biggest difference between the two, is that mod_deflate comes pre-installed with Apache 2, and hence is much easier than manually installing gzip on Apache 1.3 variants.

The important difference is the compression. Generally mod_gzip will compress more than mod_deflate. This means the page will load a little faster with mod_gzip than with mod_deflate.

So why bother using mod_deflate? mod_deflate requires less power to compress files, so high traffic sites will load faster with mod_deflate than mod_gzip. You can change the configuration of mod_deflate to compress further, and Linux Journal has a great article on that.

But if you have a low traffic site and you want the fastest page load time possible, it may be worth installing mod_gzip.

Example compression:

Compression Size Compression %
No compression 56,380 bytes n/a
Apache 1.3.x/mod_gzip 16,333 bytes 29% of original
Apache 2.0.x/mod_deflate 19,898 bytes 35% of original
Apache 2.0.x/mod_deflate [2] 16,337 bytes 29% of original

Configuring mod_gzip

A basic configuration for mod_gzip in the httpd.conf should include:

mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime
^application/postscript$
mod_gzip_item_exclude mime
^application/x-javascript$
mod_gzip_item_exclude mime ^image/.*$
mod_gzip_item_exclude file
.(?:exe|t?gz|zip|bz2|sit|rar)$

Configuring mod_deflate

A basic configuration for mod_deflate in the httpd.conf file should include:

SetOutputFilter DEFLATE
DeflateFilterNote ratio
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$
no-gzip dont-vary
SetEnvIfNoCase Request_URI
.(?:exe|t?gz|zip|bz2|sit|rar)$
no-gzip dont-vary
SetEnvIfNoCase Request_URI .pdf$ no-gzip dont-vary

If you don’t have access to the http.conf file you can simply add the following to your .htaccess file:

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml
</IfModule>

2. Disable Entity Tags (Etags) and remove Last-Modified header

Entity tags (ETags) are used to determine whether a file in a browser’s cache matches the one on the server. Since ETags are typically constructed using attributes that make them unique to a specific server, the tags will not match when a browser gets the original file from one server and later tries to validate that file on a different server. This is often the case in load-balanced set-ups. By using a proper expires and last-modified headers, the ETag mechanism is made obsolete.

Removing both Entity tags and the Last-Modified headers from your static files (images, JavaScript, CSS) browsers will not be able to validate the cached version of the file vs. the real version (they are forced to rely on both the Cache-Control and Expires header.) By also including a Cache-Control header and Expires header, you can specify that certain files be cached for a certain period of time, and you eliminate any validation requests.

As always, it’s best to set in your http.conf file but you can simply add the following to your .htaccess

<FilesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$”>
Header unset Last-Modified
Header unset ETag
FileETag None
</FilesMatch>

More information from Ask Apache on Etags.

3. Add an Expires or a Cache-Control Header

As web pages contain many scripts, stylesheets and images on a page, a first-time visitor will have to make several HTTP requests. Using the Expires header makes these components cacheable by the browser, avoiding unnecessary HTTP requests on following page views. Expires headers are largely used with images but should be used on all components including scripts and stylesheets.

<FilesMatch “(?i)^.*.(ico|flv|jpg|jpeg|png|gif|js|css)$”>
Header unset Last-Modified
Header set Expires “Fri, 21 Dec 2012 00:00:00 GMT”
Header set Cache-Control “public, no-transform”
Header set Cache-Control “max-age=7200, must-revalidate”
</FilesMatch>

4. Defer both the loading and execution of JavaScript

As JavaScript blocks parallel downloads, when downloading a script the browser will not start any other downloads. For JavaScript which doesn’t directly write to the document, to help the rendering speed significantly improve, defer both the loading and execution of the scripts until after the document has been loaded.

5. Use CSS Sprites

Each image requires a full request-reply roundtrip from the browser to the server, this can introduce significant delays in page load time. It is recommended to try and combine as many images as possible into one file and use CSS to display only the part which is needed (known as CSS sprites) saving on HTTP requests and improving page load speed.

The below example is taken from Google’s search result page. Where all the imagery is contained in one image file.

Smashing magazine have a great post on usage and examples of CSS Sprites.

Google now support page load speed within Google Analytics

Google’s Site Speed report measures the page load time for a sample of your website pages. It’s shown in the Content section of the Analytics reports. It allows you to see which pages load the fastest and of course which ones are slower.

However this isn’t on by default and you need to modify your tracking tags and add the following line.

_gaq.push(['_trackPageLoadTime']);

E.g.
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Page Load Speed Tools:

http://www.whatsmyip.org/http_compression/ – Allows you to check if server compression is currently enabled on your server.

http://getfirebug.com/ – The ultimate plugin for Firefox. Firebug allows add-ins which enable you to make use of both Google and Yahoo’s page load speed tools.

https://developer.yahoo.com/yslow/ – Yahoo’s page load speed tool for Firebug, in my view, better than Google’s.

http://code.google.com/speed/page-speed/ – Google’s page load speed tool, unfortunately they don’t seem to have the Firebug version any more. But they have it as a chrome extension and also an online version.

http://tools.pingdom.com/ – Pingdom show great visuals of the elements of a page’s loading times.

More Information:

For more information check out Google’s article on their Site Speed functionality.

Apache have more information on many of the server side configurations to help increase the page load speed of your server.

And Yahoo have more information than you’ll ever need on page load speed optimisation.

May 24, 2011 by Filed in SEO

2 Responses to “5 tips for optimising page load speed”

  1. May 25, 2011 at 3:22 pm

    Phill Ohren said:

    Alex great post. I think you have addressed several page speed factors that are generally over looked by SEO & web masters.

    Any tips / detail on how you’d differ JS on WordPress?

    Reply

  2. May 25, 2011 at 4:20 pm

    Alex Asigno said:

    WP Minify and W3 Total Cache are great plugins which can be used for WordPress to reduce page load speed. W3 Total Cache is great and allows you to use Amazon’s S3 servers to serve your static files.

    Reply

Leave a Reply