Get a Faster Website with Speed Optimisation Tips

29 Jun 2010 by Graham Lyons - Featured, News, Web Design page speed, SEO, speed test, web design, website speed No Comments

Website speed has long been an under-appreciated factor for webmasters in optimising their websites. As web users we’re all well aware of how infuriating slow loading web pages can be. However, it appears to run much deeper than a simple annoyance as slow website speed can spiral into causing lower conversions and website traffic, and reflects badly on the quality of the site and your SEO.

This is probably part of the reason why Google is now using page speed as a factor in their rankings. Google have long made people aware of their campaign to make the internet faster. This change is no doubt aimed at giving webmasters added incentive to get up to speed, by rewarding those who do so with potentially improved rankings.

While page speed is only a minor factor in measuring rankings, it is often far easier and cheaper to optimise for, than for content and relevance. While these latter features will remain far more important in how Google judges your site, improved website speed can give you an added edge and make the user experience better, irrelevant of rankings which can bring you increased traffic and improved conversion numbers.

Make it Fast, and Make it Sexy!

For an Ecommerce site it is generally accepted that a 2 second load time is the threshold, but we can do better than that through optimising content and the website's code.

Visual Elements

On the front end of the site it’s important not to overdo it. If you have an extensive amount of content, then try to divide it over several pages, to keep the page size down.

Similarly, with images you should ensure that they are optimised to take up as little space as possible data-wise on the site. With high definition and high detail images becoming commonplace on the web, this can be particularly important for an ecommerce site as they rely on their images to help sell each of their products. Presetting the size (height and width) of your images to fit your site before loading them reduces the amount of data you’re uploading and also avoids adding code onsite to resize them.

It can sometimes be tempting to nest tables on your site. It is a lot quicker and easier than other methods and can quickly give you the layout that you where looking for. Try to avoid this. Nesting tables is messy, and while it can make it easier to organise your content it slows down loading time as each page has more to load. Plus it makes your source code look like a spaghetti junction. While it might take a little time and effort, optimise your layout through CSS. This vastly cuts down on code and allows you to load page content quickly and effectively from an external CSS source.

Technical

Analytics Code

You want to be able to monitor your site and what better way than through Google Analytics. For ecommerce sites in particular you can use it to gauge traffic, goals and get an all-round view of how customers interact with your site. This tool is practically essential. Of course in order for Google to track your site and build the information you have to put tracking code within your sites pages. With this being a function performed out-with your sites control there isn’t too much you can do to optimise it. The code is what it is. Fortunately Google are on our side and provide an asynchronous version of the Analytics tracking code.

By taking advantage of browser support for asynchronous JavaScript the new code snippet can be loaded faster. Furthermore, unlike old versions of the tracking code, this one is more flexible allowing you to place it higher up in the page. By placing the code higher you can stop it from delaying subsequent content from rendering.

Keep JavaScript and CSS External

By reducing the amount of code on each page of your site you can improve the load time. But instead of stripping your site of content and features, just keep as much functionality and design features external as possible. Loading JavaScript and CSS from external sources only requires one line of code in the header of the page. This is as opposed to bits and pieces of inline code across each page eating up precious milliseconds for each image they format or chunk of text they tailor.

Optimise Caching

With most sites, there are parts of the content which do not change regularly if ever. While text content may be altered on a daily basis, CSS files, image files, Javascript and several other elements are generally more consistent. As a result, it could be worth optimising caching to make these elements load faster. Once a resource is cached, a browser or proxy can refer to the locally cached information as opposed to downloading it every time they return to the webpage. As a result, numerous HTTP request are eliminated vastly cutting down on load time for subsequent user visits.

Caching of your site is controlled via your server settings and as such you have to be certain you know what you’re doing before you wade in as different web servers need to be configured in different ways. The general method for changing the length of time before a cache is cleared is controlled by either the Expires or Cache-Control headers. By setting these to a greater length of time, the cache is maintained longer. However, this cache time should account for any major changes to the cached content you might have planned in the near future and should never extend beyond a year due to regulatory standards. See this Caching Tutorial for further information on cache configuration for server variations.

Keep Your Code Clean

Pretty simple, just make sure to sweep up any loose ends in your code. HTML is generally pretty lenient about empty tags (i.e. <h2></h2>) and stray code, but each extra that doesn’t need to be there is simple holding up the rest of your site. By sweeping away useless additional code you can optimise loading as well as creating cleaner validation and ensuring your site is W3C compliant.

Progressive Rendering

Progressive rendering is a vital part of speeding up your site and making it more appealing for user experience. If you went to a restaurant, you would expect your starter to be served up before your main and not have to wait longer for it all to come at once. Progressive rendering works the same way in that it serves up what is currently available to you while waiting for the rest of the page to bake (sorry, load).

There are several ways in which you can apply better progressive rendering:

By putting stylesheets at the top of the document, i.e. in the page header, you can force the server to load these sections first allowing the page to return several page elements while it waits for the other.

Remember to Flush! No seriously, a content flush can play a major part in progressively rendering your page by allowing you to tell the page when to output a section during the load. Multiple flushes can be used on a page, but one ideal use is to get the page to flush immediately after the <head> section of the page. This way the browser gets ahead by starting to download the CSS, JavaScript, etc while waiting for the full HTML response. Below is an example of a PHP flush being performed:

<html>

<head>

</head>

<?php flush(); ?>

<body>

Know Your Tools

Fortunately there are a lot of useful tools in place which can help you really get your site in order whether through website speed tests or optimisation suggestions. By using some or all of these you give yourself a definite advantage over those who don’t.

Webmaster Tools

If you want to get ahead as a webmaster then you should really be making use of Google Webmaster Tools for your site. This service can help you to improve your site technically as well as providing information on how to get your site to rank in Google. In terms of improving your site this tool can give you information on where your site is falling short and what you need to do to improve it.

The site performance feature lets you know how your website speed is progressing allowing you to see the fruits of your labour. Furthermore it can also provide you with issues that Google found when crawling your site so that you can make these changes, in order to constantly improve the performance of your site. For any website, Webmaster Tools should be a top priority if you don’t already have it and the fact that it’s free is just the icing on the cake.

Page Speed (Firebug Plug-in)

Ever used firebug? If you haven’t then you’re missing out on one of the most useful Firefox plug-in. Firebug allows you to look in depth at the HTML and CSS of a site and select visual elements directly in the browser to see their make-up in the websites code. Page Speed is a plug-in for Firebug with the very useful addition of providing you with insight into how to improve the performance of your website speed and efficiency.

By using a set of best practices for enhancing web page performance, Page Speed can perform several tests on a site’s web server configuration and front-end code. This little gem then returns to you with a set of scores for every page of your site and offers several suggestions on how to improve their performance. Furthermore, if your onsite images are not optimised, it can provide you with optimised versions which you can just copy over to replace your current ones. Thanks Page Speed!

Speed Tracer

Alternatively, if you regularly use the Chrome browser you may want to look into utilising the Speed Tracer application in place of Page Speed. There are many similarities between the two, but it’s always nice to have a choice. With insight into a range of problems holding up your site such as parsing, execution, event handling and HTTP Requests, Speed Tracer can certainly help you tweak those little issues and speed up your site.

WebPageTest.org

A very handy site, webpagetest allows you to submit your website for testing. It then returns a detailed array of data telling you just how your site is performing and what aspects of it are effecting the time it takes to render.

With a waterfall view to break down each element and its loading time, as well as an optimisation checklist, WebPageTest can give you a good run-down of your website speed and performance and where it needs to improve through a comprehensive website speed tester. The site also hosts a forum dedicated to site optimisation where you can pick up some useful tips or maybe even leave some of your own.

Are We There Yet?

Website speed should always be a priority, but by making use of these best practices and tools you can get your site up to a proficient level. Of course in time your site is likely to change and develop, so it is equally important to continue using tools such as webmasters to keep on top of things and see when problems start to spring up on your site.

By ensuring that your website is both efficient and fast, you certainly put yourself in a better position to improve your traffic, conversions and rankings. Add this to creating new content and making ongoing SEO developments, and your site will be off to a flyer.

Hopefully this article has helped, but if you have any further SEO or website speed questions please feel free to post them below. At the Cozy Digital we’re happy to help. Alternatively, if you have any suggestions of your own for optimising website speed then let us know.

About the Author
Latest Posts

About Brian

Why Invest In Content Marketing? - March 12, 2013
Why Creative Copywriting Can Make or Break Your Brand - March 12, 2013
What is Your Sites Link Profile Saying about You? - February 19, 2013
Can a Small On-line Business Really Compete with the Big Boys? - February 19, 2013
Ramsay’s Web Wire – Issue #40: Sleet, Snow and SEO - December 3, 2010
Ramsay’s Web Wire – Issue #39: Out of the Google Frying Pan… - November 26, 2010
Ramsay’s Web Wire – Issue #38: The Google, the Bad and the Ugly - November 19, 2010
Ramsay’s Web Wire – Issue #37: Google Jams A Few Rockets In Your Pocket - November 5, 2010
Ramsay’s Web Wire – Issue #36: Google Gets All Up in Your Business - October 29, 2010
Ramsay’s Web Wire – Issue #35: Google’s Groovy Giftset - October 22, 2010