Published by SEO Juice http://www.seo-juice.co.uk 06/11/11Page speedThe purpose of this article is to show you what page speed is all about, inform you of thetools out there for monitoring your site’s performance and how to speed up your website.IntroductionGoogle announced some time ago that a page’s load speed would become a ranking factorin the SERPs. We are not sure how much relevance this criteria actually has in Google’soverall ranking algorithm, but it is always a good idea to have your website loading as fastas 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, (ifyou’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 websiteto load within 1 second, that’s how big all the assets on your site need to be. If you wantyour site to load within 2 seconds, then you are allowed 250kbps, 375kbps for 3 secondsand 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 youvery valuable information on improvements to the structure of your site . These 2 tools areGoogle Page Speed and Yahoo YSlow.Both these tools perform similar tasks but they also have unique options that are not to beignored.Right, let’s get on with optimising pages shall we?
Install Google page speedIf you are going to monitor the speed of your website then one of the best ways to do thisis 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 haveread this article, you should be able to decrease the load times of your pages by at least25%!Using Google page speedTo 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.Measuring page load timesTo start off with, choose the homepage of your website to work on or a page with lots ofassets 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.
Shrinking your assetsThe 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 canspeed 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.
Installing YSlowYahoo YSlow is another cool page speed tool that should not be ignored. Installation guidebelow. • 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 GooglePage Speed but YSlow will give you a grade for your webpage and tell you what’s wrongwith it.To get a quick report go to YSlow > Tools > Printable View. Print it out and work throughcorrecting the issues.The graph below on the right just goes to show what optimisation and caching can do tothe amount of assets that have to be downloaded when your webpages are accessed.Don’t sacrifice quality for speedDon’t sacrifice quality too much and lose that visual impact, especially if you are aphotographer. 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.