05 / Code

Clean, well optimised code is not just important for your users but it’s also a ranking factor in Google. Fast load times improve user experience and therefore Google care about it. If your site is quick, light and responsive, you will be making both your users and the search engines happy. There’s lots of ways you can increase your site speed, most of which can be handled for you by modules and plugins, and it’s very easy to test and measure the results.

1 – Load Times

Load TimesSite speed has been a ranking factor in Google since September 2010.

There are numerous tools you can use to measure the speed of the pages on your site including Web Page Test and Google also have their own PageSpeed tool which you can run online or install as a Chrome or Firefox plugin.

It can be an involved process depending on your technical expertise and the amount of control you have over your website but there’s some quick wins that most webmasters can achieve.

For example, if you’re on an Apache server, you can apply Google’s ‘modpagespeed’ module which “speeds up your site and reduces page load time” and “automatically applies web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow”.

You can cut down on wait times & latency by avoiding server redirects, and delivering assets to your site through a Content Delivery Network (CDN). There are many CDN providers around such as Max CDN, Akamai and Amazon CloudFront. Cloudflare also has a free option – https://www.cloudflare.com/plans

Minifying (removing unnecessary white space and formatting) HTML and CSS files is also standard practice and if you run a WordPress site you’ll find plugins like W3 Total Cache which will manage the whole process for you.

Other best practice includes optimising images (see below), turning on any server-side caching your platform offers, implementing client side caching and using server side compression if possible.

You should also get your developers to look for bottlenecks in database queries if you’re on an e-commerce platform as they are very common

Recommended Further Reading

2 – Image Compression

Image CompressionAs mentioned above, you can improve page load time by optimising your images.

It’s important to ensure that your imagery looks as good as it can to maintain the quality of your site, whilst keeping the images at as low a file size as possible to reduce load times and maximise the user experience.

Here you should be considering how many images you are serving, the size (both visual size and file size), whether you could be utilising sprites, if the images are being scaled on the fly, if they’ve all been compressed properly and contain only the essential metadata.

Recommended Further Reading

3 – Responsive Design

Responsive Web DesignResponsive design allows you to automatically adapt the structure of your content depending on the size of the screen that it is being viewed on.

This allows people who are using all sorts of devices from iPhones to giant PC monitors to view the same content in a method that is appropriate for their device. Large screens can be shown additional content, such as more products on the page, whilst smaller screens can be shown reduced, ‘essential’ content.

Responsive design negates the need for a specific mobile version of a website by using “media queries” to target styles to certain screen sizes.

Also consider using mobile first design to improve your experience for mobile users.

Making your site responsive, rather than creating a second mobile version of the site, iswhat Google recommends.

Recommended Further Reading

4 – HTML5

HTML5HyperText Markup Language (HTML) is the main markup language used for creating webpages, and HTML5 is simply the fifth (and latest) revision of the HTML standard. As with structured data markup such as Schema.org, many elements have been introduced in HTML5 to enrich the semantic content of documents. HTML5 is also good for mobile.

From an SEO perspective, HTML5 offers a favourable alternative to the likes of Flash, with features to allow videos, animation and interactivity to be rendered within the page. Importantly, HTML5 offers full CSS3 support.

Note: Although all the major browsers do support features of HTML5, none of them yet offer full support and it is not yet the official standard. When implementing elements in HTML5, cross-browser testing is essential.

Recommended Further Reading

5 – CSS3

css3CSS is what controls how your website looks. With CSS3 the number of options that web designers have at their call has expanded massively.

CSS3 has brought the much needed abilities to do simple things such as rounded corners, gradients and drop shadows without the need for overly complicated hacks or hundreds of different images.

As well as the simple things CSS3 also includes advanced new layout methods such as columns and flexbox as well as native animations, transitions and transforms.

All of these new features combine to allow for far more advanced styling than was previously available while actually improving performance over older methods.

Recommended Further Reading