Is your website's speed letting you down?
Upcoming SlideShare
Loading in...5
×
 

Is your website's speed letting you down?

on

  • 1,061 views

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.

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.

Statistics

Views

Total Views
1,061
Views on SlideShare
1,061
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Is your website's speed letting you down? Document Transcript

  • 1. 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?
  • 2. 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
  • 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 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.
  • 4. 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.
  • 5. Minifying CSS & JavascriptThis is a good technique to employ as your CSS file sizes will decrease, but the content ofthem will become extremely hard to read as all the white space and line breaks would havebeen 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 errorsPage 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, whatare you waiting for? Sort them out!I performed an experiment on my speed.php page with 1 missing css reference, 118mswas 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 pageload 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 wayof thinking:-)Reduce HTTP requests with cachingIf assets like images and CSS on your website very really change then you can add all or aselection of the following caching options to your .htaccess file (Apache Server only). Pleasebe 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 assetsto 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 ChromePage speed is also available for Google Chrome, although it is in beta version at the time ofwriting 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 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.
  • 8. Published by SEO Juicehttp://www.seo-juice.co.uk06/11/11Thought for you. If I told you to wait for 30 seconds for “SOMETHING” and you got it after 30seconds, 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, wouldyou be happy at the end of those 30 seconds?Website widget overloadAll 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 socialmediums that can bring you that all important traffic.Track page speed in AnalyticsIn the new version of Google Analytics, you can track the average load time of your pagesby 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!