The document discusses page speed and provides tips for optimizing website page speed. It introduces tools like Google Page Speed and Yahoo YSlow for measuring page speed. It then provides steps on how to use these tools and makes recommendations for improving page speed through image optimization, CSS and JavaScript minification, reducing errors, caching assets, and reducing the number of HTTP requests and third party widgets.

1. Published by SEO Juice
http://www.seo-juice.co.uk
06/11/11
Page speed
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.
Introduction
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?

2. Install Google page speed
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 from 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%!
Using Google page speed
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

3. 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.
Measuring page load times
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
• http://www.seo-juice.co.uk/speed.php
• 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.

4. Shrinking your assets
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.
Image optimisation
• 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.

5. Minifying CSS & Javascript
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
• http://www.minifycss.com/css-compressor/
• http://www.minifyjs.com/javascript-compressor/
Page load errors
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:-)
Reduce HTTP requests with caching
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

6. 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] )
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A604800
ExpiresByType application/x-javascript 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
</IfModule>
Page speed for Google Chrome
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 the page here 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!

7. Installing YSlow
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.
• 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 for speed
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.

8. Published by SEO Juice
http://www.seo-juice.co.uk
06/11/11
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?
Website widget overload
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.
Track page speed in Analytics
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.
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-YOURID-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>
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. and then click Site Speed. Viola!