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.
|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 ||16,337 bytes||29% of original|
A basic configuration for mod_gzip in the httpd.conf should include:
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude mime ^image/.*$
A basic configuration for mod_deflate in the httpd.conf file should include:
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$
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:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
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.
As always, it’s best to set in your http.conf file but you can simply add the following to your .htaccess
Header unset Last-Modified
Header unset ETag
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.
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”
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.
var _gaq = _gaq || ;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js';
var s = document.getElementsByTagName(‘script’); s.parentNode.insertBefore(ga, s);
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.
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.