Website Speed - Essential Marketer

16th November, 2012

Website Speed

There are many factors to take into account when looking at a site’s SEO, but more and more importance is being placed on website speed.

Historically, website speed was looked at from the end users perspective, i.e. if a site was too slow to load, potential visitors to your site would become bored, resulting in a potential loss of sale/conversion and possibly a poor recommendation.

So we know why those few seconds can mean all the difference between a potential conversion, but why is it important to SEO?

Google is obsessed with their own speed…

Google is obsessed with website speed on all of their own products – faster sites create happy users and increase the time spent on the website. Google have carried out their own studies and they show that if a site is slow, the user gets bored and will spend significantly less time on the website.

Due to this, Google have decided to take website speed into consideration when looking at organic rankings which is why it’s important to take into account when looking at other factors relating to your site’s SEO.

It isn’t hard to test your speed. There are lots of free tools available such as the following, these also give you great hints and tips:

PageSpeed – https://developers.google.com/speed/pagespeed/
YSlow – http://developer.yahoo.com/yslow/
WebPageTest – http://www.webpagetest.org/
Google Webmasters – https://www.google.com/webmasters

Here’s the Essential 8 top tips to help you with your load times:

1. Load Content When Needed

A good example of this is when you are using an image gallery, as images are resource heavy many galleries use small file size thumbnails to enable to viewer to click on as a preview and then load the high quality image when clicked.
Web development libraries like jQuery & MooTools can make this type of loading easy to implement.

2. Using JS & CSS Files

When a viewer first visits your web page, their browser will cache the .js and .css files called within the header, this enables to the files to be loaded from their computer instead of rendering the javascript or CSS when the page is loaded, as a result of this page load will be quicker.
Example of inline css “Slow Loading”.

3. Load JavaScript at the end

JavaScript blocks anything below it in the code from rendering before it has finished loading. Placing your JavaScript calls at the end of the page load enables to site to load before you start loading any JavaScript, allowing the viewer to see you webpage quicker.

4. Optimized your HTML

Viewing the source of your web page can help you pick out parts of code that can be optimized to enable your site to load faster. Using such tags as “ and ” can easily be omitted and used within your CSS file to speed up load time.
You can view the best practices by clicking here

5. Don’t use images for text

Many designer/developers still use images to display certain pieces of text on their web pages, this is also bad from an SEO perspective as Google cannot read the text within those images, but it also has a dramatic effect on your site’s load times.
There are many different web based font engines around now to enable you to use custom fonts on your website, saying this you will need to weigh up the advantages on load time for loading the external font files to loading the images.

6. Don’t resize in HTML

Resizing images on the fly using HTML is easy and quick, but when it comes to your web browser downloading them is the complete opposite. If you are using a larger image such as 1000x700px and resizing it down to 100x75px the site the browser will still be loading the large file size to produce a smaller image.
Using image editing software, such as Photoshop and Fireworks to create the correct file size is a lot more effective and will also remove the risk of your images becoming poor quality.

7. Optimise web caching

When your website is built you should try and utilise web caching as much as possible to enable your viewers to use your site quickly on a regular basis.
For Example, you can set HTTP response headers this reduces the need to download files when your viewer comes back to your site and simply load them from their browser cache instead, increasing load times dramatically.
To find out how to implement these changes to your source code, follow this expires headers tutorial

8. Create image sprites

Image sprites are images that contain multiple images within them, by using the CSS background property you can utilise one image, bringing down load times, and change the position of the image within your holding DIV to show a different image.
This brings down image load times as the browser only needs to download one image instead of multiple images. You can see how to go about implementing this technique with this tutorial – css image sprite

In summary, whilst website speed is important to SEO, it still doesn’t carry much weight as the relevance of the page, only affected 1% of search queries, small amount in comparison to the number of results returned, but is something to take into consideration if Google is hot on it. Therefore, we would recommend: