Friday, 27 January 2017

The Need for Speed

Site speed can sometimes be overlooked when a business draws up plans for a new website. There are many case studies outlining the benefits of a speedy website, and conversely the consequences of having a slow one, or at least one that feels slow to the end user. After all what is the point in spending thousands on SEO to attract customers, if the customer's first experience of your site is an irritating wait or an unresponsive page.

The benefits of a speedy site are numerous, including increased engagement, lowering the bounce rate, and ultimately increased revenue. Google will also look favourably on your efforts and take this into account when ranking your site. Expert opinions vary greatly on what the exact impact speed has on conversion rates, but they all agree that the higher the speed, the higher the conversion.

What some experts in the field have to say:

A 1-second delay in page load time yields:

●11% fewer page views
●16% decrease in customer satisfaction
●7% loss in conversions (source: Aberdeen Group) Every 1 second of improvement, we experienced up to a 2% increase in conversion.

Here are some of the main causes of slow load times and what you can do about them. 

Server Response Time

This is the time it takes your site to begin to respond to the page request. There are many factors that will dictate how quickly your server responds, but some of the most critical are:

Hardware Resources Available to your Application (Including hosting infrastructure): This refers to everything from the server’s CPU to its network connection. These are not trivial to change once your site goes live so it’s important you get these right before any site building happens.

Server side caching: Instead of querying your database or external web services for complex data every time a page is being delivered to the browser, cache it on the web server where it makes sense to do so.

Database optimisation: There are many ways of optimising a database for fast reads. The optimisation plan will depend on the design of your database and what platform it runs on. Some obvious strategies involved creating sane indexes, archiving “stale” data, being careful about your query criteria, i.e. search by integer field rather than text where possible. An experienced database administrator can of course go much deeper into the optimisation process but there are often some quick wins for the novice that can deliver huge gains.

Browser Caching

This is an often overlooked technique of speeding up page load times. You can leverage browser caching by configuring your server to attach an expiry date to each resource (image, page, stylesheet etc.) that you send to the browser. The next time the browser requires it, it will check its local cache to see if the resource is within date, and if so it uses the local copy, no need to ask the server.


Over time more content will be added to your site. This may include photos or large images. These large images can use enormous amounts of bandwidth relative to the actual page size and often lead to an undesirable lag in page load speed, especially on mobile devices. Resizing and optimising images appropriately can reduce the image file size, and therefore loading times, by as much as 95% without any observable loss in quality. There are many easy to use tools available for download online that will compress, resize and optimize your images.

Avoid Render Blocking

When your page begins to load it may display a header, then pause for a bit, then load the rest of the page. This pause can be due to render blocking scripts. What’s happening is that your browser will begin to receive the page from the server, displaying page elements as it reads and interprets them, then it may receive a page instruction to load and interpret a large external JavaScript file before continuing with the main page body (The stuff the customer actually came to see). To the user this looks like your site has stopped loading. The more blocking scripts you have; the worse things look.To get around this, scripts can be loaded in parallel with the page itself, by using the async keyword, and/or loading the scripts at the end of the page.