Quick wins – optimising your website speed
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.
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/
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.
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:
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)
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
- 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.
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)
Below is a handy piece of code for adding expires headers to your images via .htaccess. (Apache only)
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:
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_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Test if its working using http://www.feedthebot.com/tools/gzip/
There are a lot of clear leading plugins for WordPress websites which are great for speed:
- W3C Total Cache – There are a number of caching plugins for WordPress, but this is great, if you go over to gtmetrix they even have a handy guide on setting it up.
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 🙂
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.