With ever increasing bandwidth, you may wonder if the speed of your website is really such an issue? Well Google things it is, and if you rely on Google to bring traffic to your site (who doesn’t?) then you need to start paying attention to the issue!
Matt Cutts from Google recently announced that in 2010, Google will start using the speed of your site to affect how it ranks in the SERPs.
Soon after Matt announced this, the Webmaster Tools team added a labs feature to the dashboard to allow you to see how your site performs. I see this as the first sign that they’re gearing up to start rating sites based on performance. By giving everyone a head start to get their site/server optimized – they’re less likely to receive complaints when they start using this metric in their ranking algorithm.
Besides the benefits of a fast site for ranking in Google, you also have the added benefit that the site becomes more usable and responsive to your visitors. Waiting for a page to load can lead to a visitor skipping over the page and going to one of your competitors.
As ever the efforts of SEO should relate to the user experience. A good site for the user is a good site for SEO as both go hand in hand.
Below is a list of 10 tips on how to optimize your site for performance. This article is a result of optimizing www.scotiasystems.com for performance, and the tips given here have knocked around a second off the loading time for pages on this site.
1) Tools to analyze site speed
Google Page Speed
This is a Firefox/Firebug add-in to analyze a page loading and give tips and warnings on performance issues.
By installing Page Speed and downloading some test pages, it’ll highlight key issues with the page and also with the server providing it.
The plug-in also offers advice on how to fix common problems. Take a look at Google’s explanation of the tool here:
Yahoo! ySlow for Firebug
Yahoo!’s version of Google’s Firefox add-in. Similar idea – it analyses a page downloading and gives tips on how to improve the performance. One of the best features integrated here is Smush.it which compresses images automatically for you.
Pingdom
Free online test – gives graphical representation and timing of page loading. You can also easily run this on competitor sites to see where you stand in terms of performance.
Google Webmaster Tools – Site Performance
Recently added as a labs feature to Google’s Webmaster Tools. This gives a historical report of how quickly pages from your site have been downloading. Good for showing site performance over time.
2) Compress Images
Images form the largest portion of many web pages. These images can often be compressed without a loss of quality to make a big impact on the overall size of a page download.
As mentioned above – ySlow, Yahoo!’s add-in for Firefox includes a feature called Smush.It. This is an excellent tool which will analyze a page and compress all of the images. With tools like this – there are no excuses to have overly large images on your website.
3) Spread Elements Across Domains
You need to find a balance here. Each new domain you download from requires a DNS lookup, so you may be wondering why you’d want to use more than one?
Browsers and servers have a built-in limit on the number of elements they’ll allow to download in parallel. By splitting content across multiple domains, you allow the browser to download more elements in parallel. So the more elements you have on a page, the faster it’ll download if you spread it over multiple domains.
4) Move scripts to the end of your HTML
This is related to tip 3 above. Downloading a script will block downloads of any other elements – even from different domains. So by moving scripts towards the end of the HTML – you give other elements a chance to download in parallel first.
5) Caching and Expiry
By enabling caching of elements on your site, you’re going to reduce the need to re-download elements for each page view. Expiry is usually used on images, but should be implemented for all common elements to reduce downloads. A good analysis of browser caching can be found here :
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
6) Specify Image sizes
If an image doesn’t have its size defined, the browser has to download it to find the size before it can place it and the elements around it. By specifying image sizes, you allow the browser to start rendering the page before it has downloaded all of the images. This gives the impression of the page downloading faster.
7) Move Stylesheets to the top
By moving the stylesheet to the top of the page, you give the impression of the page loading faster as the browser is able to start rendering the page sooner.
8) Make CSS External
By making CSS stylesheets external, you’re taking the common elements of the entire site, and making them a single download. Once the stylesheet is cached, it’ll no longer need to be downloaded for every page on your site which references it.
9) Use Google’s CDN for jQuery
If you use jQuery in your pages – you can move the hosting of this to the Google Content Delivery Network. If a visitor has already been to another site which uses Google’s hosted jQuery– it’ll already be in their cache, so no need to download it again.
10) Server GZIP Compression
Images are (usually) compressed, however the rest of the page, HTML, CSS etc isn’t. By enabling GZIP compression on the server – any modern browser which supports compression will request a gzip’d version of the HTML – thus reducing the download size (generally by around 70%).
I love your post thank you
Hello and thank you for a informative article. I appreciate what you write.
[…] BLOGWeb Design, SEO and IT Tips Google Announces Site Speed Used In Ranking April 10th, 2010 adminAs expected, on Friday Google officially announced that they’re now using web site speed as a ranking factor […]