The purpose of this article is to show you what page speed is all about, inform you of the tools out there for monitoring your site's performance and how to speed up your website.
Sections in this article
- Install Google Page Speed
- Using Google Page Speed
- Measuring page load times
- Shrinking your assets
- Image optimisation
- Page load errors
- Reduce HTTP requests with caching
- Page speed for Google Chrome
- Installing YSlow
- Don’t sacrifice quality for speed
- Website widget overload
- Track page speed in Google Analytics
* I will be using Firefox 6 for the duration of this article. I will however tell you how to install the page speed plug-ins in Google Chrome also.
Google announced some time ago that a page’s load speed would become a ranking factor in the SERPs. We are not sure how much relevance this criteria actually has in Google’s overall ranking algorithm, but it is always a good idea to have your website loading as fast as possible, to give your visitors a great experience on your website.
In my opinion a webpage has to load within 2-3 seconds, Google say about 1.5!!! (How!!! Just text only and nothing else, get real!).
Let’s say the average website visitor has only a 1MB broadband Internet connection, (if you’re still on dialup then I’m sorry, you’re not average).
The maximum download rate for a 1MB connection is 125kbps. This means for your website to load within 1 second, that’s how big all the assets on your site need to be. If you want your site to load within 2 seconds, then you are allowed 250kbps, 375kbps for 3 seconds and so on. If a visitor has a 2MB broadband Internet connection then they get your page, theoretically, 50% faster.
Now, there are 2 very good tools for testing the speed of your website, they also give you very valuable information on improvements to the structure of your site . These 2 tools are Google Page Speed and Yahoo YSlow.
Both these tools perform similar tasks but they also have unique options that are not to be ignored.
Right, let’s get on with optimising pages shall we?
If you are going to monitor the speed of your website then one of the best ways to do this is to use the Google Page Speed plugin for Firefox. To do this you will need to:
- Open your Firefox web browser
- Ensure that you have Firebug installed. Available here if you need it.
- Login to your Google account
- Go to Webmaster Tools and select your website from the list (You may need to add it first)
- Click on the Labs option in the left hand menu and choose Site Performance.
If there is data available then you will be presented with a graph, similar to the one below.
This graph above shows you your sites load times for the past 6 months. Once you have read this article, you should be able to decrease the load times of your pages by at least 25%!
To start using Google page speed in Firefox, you need to do the following.
- Click on the Firebug symbol in Firefox (Top right corner in FF6).
- Choose the Page Speed tab in the bottom panel.
- Click the Analyse Performance button to start the speed tests.
You will first see a page speed score. Anything over 85 is good. Looking down the list you will see red and yellow icons, these are big areas for improvement, fix these first if you can. Some things might be out of your control like GZip compression and browser caching.
To start off with, choose the homepage of your website to work on or a page with lots of assets and do the following.
- Open your website’s homepage in Firefox.
- Open Firebug and click on the Net tab.
- Press CTRL+F5 and an un-cached version of your site will be seen.
- In the bottom right of your browser you will see the speed in which it took the page to load.
- My example speed test page is here
- There are ~465KBs of assets and it took ~1.60 seconds to load
- Press F5 to see a cached version of the page. The load speed is now ~700ms, based on standard webpage caching principles.
- In the timeline below you will also see all the assets loading and how long they take to load.
- Make a note of how long your page takes to load. Initial load and cached loading. Use these later after you have optimised the page.
The next things to look at are the green ticks that have a small arrow next to them.
A big saving in file sizes can be made by fixing these issues. See below to see how you can speed up your site faster than you think.
- Click the small arrow to the right of the green tick and you will see a list of images which can be optimised.
- Page Speed is fantastic here as it has already converted the image to the lowest size for you and you can download it by clicking on the Save as link. How cool is that!
- Just upload the image to your server and that’s 1 less problem to deal with and probably 5kb saved in just 1 image.
- Rinse and repeat for all the images it has concerns for. Some sites with lots of images could see a saving of around 40kb from just this one simple fix.
- Also, any images on webpages must have a Height and Width value attached to each. This allows for faster render and drawing of the images on screen. Without these 2 values, the browser has to do the math on the images, slowing the page load time down even further.
- To make your images load even faster, any image hover events that require an image should be placed into 1 image as an image sprite. This requires less HTTP requests as well as slightly smaller image assets overall.
This is a good technique to employ as your CSS file sizes will decrease, but the content of them will become extremely hard to read as all the white space and line breaks would have been removed. Always keep a readable backup of your files to work with.
There are some free online tools to minify your CSS and JS below
Page load errors will decrease your load times and are one of the easiest problems to fix. Inside the Net tab in Firebug, any references to missing assets are shown in red. Well, what are you waiting for? Sort them out!
I performed an experiment on my speed.php page with 1 missing css reference, 118ms was wasted trying to find an asset that did not exist.
I did the same thing with 10 missing references and the page speed was ¼ second slower. Not much but add that to the time saved from images, JS & CSS load times and your page load times could come down between 1 & 2 seconds.
On the web, 2 seconds of waiting is a long time. If only UK call centres would adopt this way of thinking:-)
If assets like images and CSS on your website very really change then you can add all or a selection of the following caching options to your .htaccess file (Apache Server only). Please be warned that one mistake in your .htaccess file will break your website so be careful!
If you make a change on your site then CTRL+F5 will need to be pressed a few times to see the new assets loaded. If you wanted to ensure that your site visitors saw the new assets, then you would have to upload them with a different file name and then link to this one.
You can copy the code below, AT YOUR OWN RISK, into your .htaccess file to allow assets to be cached, thus making your website load faster on subsequent visits.
The number 604800 is equal to 7 days
(1 day = 86400 [60 seconds * 60 minutes * 24 hours] )
ExpiresByType image/x-icon A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A604800
ExpiresByType image/ico A604800
Page speed is also available for Google Chrome, although it is in beta version at the time of writing so use it at your OWN RISK. Details on how to install it are below.
- Open up a new tab in Google Chrome and type "about:flags".
- Scroll down to Experimental Extension APIs and click on Enable.
- Go to this page and click the install link.
- Once installed, click the spanner symbol in the top right, choose Tools > Developer Tools
- Welcome to Page Speed for Google Chrome!
Yahoo YSlow is another cool page speed tool that should not be ignored. Installation guide below.
- Go to http://developer.yahoo.com/yslow/. There are versions for Firefox & Chrome here.
- Download and install the version you need.
- YSlow is accessed from Firebug in Firefox.
- YSlow is accessed from the YSlow icon in the top right tool bar in Google Chrome.
I won’t go into much detail here as I have covered all the main concepts above with Google Page Speed but YSlow will give you a grade for your webpage and tell you what’s wrong with it.
To get a quick report go to YSlow > Tools > Printable View. Print it out and work through correcting the issues.
The graph below on the right just goes to show what optimisation and caching can do to the amount of assets that have to be downloaded when your webpages are accessed.
Don’t sacrifice quality too much and lose that visual impact, especially if you are a photographer. If things may be slow for the user, set this expectation at the start somewhere, (“Hi I’m a photographer, I have lots to show, please give me 30 seconds to sort my stuff out, it will be worth the wait, I promise). Set the expectation from the start and raise awareness.
Thought for you. If I told you to wait for 30 seconds for “SOMETHING” and you got it after 30 seconds, you would be happy. Yes, you got what you expected.
But, If you sat there for 30 seconds, with no warning, waiting for a website to load, would you be happy at the end of those 30 seconds?
All the website widgets, adverts and social media “like” icons all slow your website down. Maintain the right balance of these as these are useful for exposure across many social mediums that can bring you that all important traffic.
In the new version of Google Analytics, you can track the average load time of your pages by adding the line below in red to your Google Analytics tracking code.
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);
To access your page speed figures in Google Analytic, follow the steps below.
- Log into Google Analytics.
- From the home page, select your website.
- Click Content in the left hand menu.
- Click Site Speed.
Increase keyword density
in your pages and see
how to monitor it.
Create an RSS feed
Understand the power of
RSS and your social media
efforts will be made easier!
Are your website visitors
having to wait more
than 2 seconds for
your pages to load?
My SEO ramblings can
be found here as and
when I have something