Quick wins – optimising your website speed
UX

Quick wins – optimising your website speed

25th March 2015

Speed is an important aspect of web marketing, you should be aware that website speed is one of Google’s ranking factors for organic search, but in reality this affects so few search queries that making your website optimised for speed vs your competitors will probably do nothing for your rankings if you haven’t built up your other parts of your optimisation strategy.

So why bother having a fast website?

Website speed isn’t just about the ranking factor, as pointed out it probably won’t make a difference. However it is about the conversion and usability factor. Let’s briefly look at some stats:

A 2-second delay in load time during a transaction results in abandonment rates of up to 87%. This is significantly higher than the average abandonment rate of 70%.

Slow loading websites cost retailers £1.73bn in lost sales each year

It is safe to say that if you’re not taking speed seriously as a conversion factor on your website then there is a serious flaw in your web marketing strategy.

Server Speed

One of the first ports of call is the host and server speed. There are a lot of factors which dictate what set up is going to best for your website depending on:

  • The amount of traffic you get
  • Where your website visitors come from

I’m going to talk about some low hanging fruit and fixes you can make in the rest of this article, but if the time between a request to your host and serving the first byte is delayed, this can make a big difference in load time despite the effort you may go through to make your site’s code fast.

Try it for yourself with http://tools.pingdom.com/fpt/

 

Pingdom-waterfall

In the example above we see a wait time of half a second, have a look at your website, if your concerned with the wait time then speak to your hosting company about how this can be improved.

Quick Wins

We carry out quite a lot of WordPress website builds and over the last few years we have a number of techniques we use to keep the website loading quickly.

Speed Test Websites

The following are a set of websites useful for testing your site speed:

  1. http://tools.pingdom.com/fpt/
  2. http://gtmetrix.com/
  3. http://www.webpagetest.org/
  4. https://developers.google.com/speed/pagespeed/insights/

My preferred website is http://gtmetrix.com. You can scan your website and it will give you two scores – one based on its own page speed algorithm and one based on Y!slow, but it doesn’t stop there. If it picks up that your images need optimising it will automatically create optimised versions of them for you to download.

The key aspects to look at are:

  • Total Page Size
  • Number of Requests

If you can keep your page size low it will load more quickly, and if you can reduce the number of requests your website makes it reduces the time to load all the elements.

You can see an example below for State of Digital, with actionable improvements, for instance:

  • Image Optimisation – (We’ll talk about this shortly)
  • Browser Caching –  If your site runs on Apache, there are some tips below on how to add Gzip compression and if your also running WordPress, there’s a link to a great plugin for minifying CSS and JavaScript.

page-speed-gtmetrix

Image Optimisation

Image Compression

Whether you’re a fan of sliders or not there is a good chance you may have a huge background image on your website or have been adding stock photos to your blog posts. Often these images can be over 1mb – if your blog page then lists a number of posts these images can soon mount up.

  • http://compress.photos/ Is an image compression website. It basically removes data that’s not needed from your image without loss of quality and can turn a 1mb image to 100kb (There are others but this works pretty well except for transparent PNGs). – Great for reducing total page size

compress-photos

  • You can see from the example above we have reduced the file size by 71% 🙂
  • It is also worth thinking about how big the image needs to be? – Why Upload an image that’s 1000px x 500px if it only needs to be 500px x 250px.
Image CSS Sprites

Another great technique is using ‘sprites’.

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

There are a number of websites which can help generate sprite files for you and generate the CSS you need:

  • http://www.spritecow.com/ This is a great site – if you’re going to create one image which contains all your smaller images and icons, it will create the CSS rules for you.
  • http://wearekiss.com/spritepad allows you to upload all your single images to create one image and the CSS rules.

With just a few techniques we have both reduced our page size and the number of requests.

  • Below is an example using Spritepad – We have added three images, it then generate the CSS code for you and you can download the final image containing all the smaller images.

image-sprites

Look for another option

If you’re running WordPress or similar it’s very easy to keep installing plugins to make that pop up or that slider, but often these plugin are not considerate of speed. Try looking for pure CSS  alternatives such as:

Pure CSS Modal (These are not specific to wordpress)

Two clean pieces of code which are cross browser, responsive and don’t require JavaScript.

Additional Settings

Below is a handy piece of code for adding expires headers to your images via .htaccess. (Apache only)

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000

You can also add gzip compression to your server using:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Test if its working using http://www.feedthebot.com/tools/gzip/

gzip-compression

 

Want More?

There are a lot of clear leading plugins for WordPress websites which are great for speed:

Final Tip:

Everything in this article is free so I thought we’d end with last freebie. Cloudflare is a content delivery network and distributed domain name server system. You can basically point your domain to its “nameservers” which act between the user and your own web host caching the website. If your host goes down then it is still available via Cloudflare for a period of time and the accounts are free at the initial level.

  • The example below is a new website launched with low traffic levels, but its alrady saved 2.2MB bandwidth 🙂

cloudflare

There are of course lots of other ways to help speed your site up, if you have any you think I should have mentioned please do add a comment.

Written By
Neil Walker started working as an SEO in 2002 and rose to become Group CTO for Swedish Marketing Agency “Online Group” in 2010 he moved to consulting with agencies, in-house teams and PR companies. In 2014 he formalised this work and founded Made Notable Ltd a boutique digital consultancy based...
International SEO & Geo IP Redirects
Latest Post from Neil
UX International SEO & Geo IP Redirects
5th November 2014
  • This field is for validation purposes and should be left unchanged.