Blog

Fast Website Load Speed

24th January 2011

Here at Crush, we care about more than just the latest design trends. Making sure your website looks great and using state-of-the-art technologies is important – as is meeting various usability and accessibility guidelines. But, we also make sure that your website will load as fast as possible so your site visitors aren’t kept waiting to see your site and the services you offer. A fast load time will also help your site to rank better across various search engines as they credit sites with a quick load speed.

Given that we’re an eager bunch, we thought we’d share some tricks of the trade to reduce your website’s load speed.

Reduce the number of HTTP requests

When your page is loading, for every element of the page (for example, an image, CSS file, or Javascript file) an HTTP request is made to download these elements into a browser. Each of those requests takes time, so the goal is reduce the HTTP requests and thus increase your load speed. This can be achieved via number of ways.

Combine your stylesheet files into one file and your Javascript files into one file. This can be done manually but if you use the Codeigniter framework (as we do) then you can use the very useful and very powerful Assetlib-pro library, which will do all the hard work for you.

You can also combine your images into one and use the CSS Sprites grid technique to display them.

Set expiry and cache-control headers

Your browser uses a cache mechanism to store certain elements of your page in an internal cache so that when you visit a page, those elements (images, CSS files, etc) do not have to be loaded every time from a server. Instead they load from the local browser cache, which can dramatically improve the load speed of the whole page.

The key element of this technique is to tell your browser which elements can be cached and when they expire, so there is no need to reload them every time from the server. With elements that hardly ever change or don’t change at all, the aim is to set expiry elements far in the future. This can be using Apache directives:

<FilesMatch “.(jpg|jpeg|png|gif)$”>

ExpiresActive On

ExpiresDefault “access plus 1 month”

FileETag none

</FilesMatch>

The example above sets the expiry date for all the graphic elements of a page to one month in the future. This means that when you visit a page within that month the images will be loaded from your browser cache rather than a server.Page Load Graph

Use compression

Using the Gzip method, you can compress the size of your page elements, prior to sending them to the visitor browser. This means less data will be sent over the Internet, which means the data that is sent will be delivered quicker to you visitors. This can be done using the mod_deflate Apache library.

AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript

The apache directive above tells the server to compress all the Javascript files prior to sending them to your browser.

Don’t use inline CSS and Javascript

If you place your CSS and/or Javascript code within your html page (and not as an external file) then it means they will be loaded every time your page is requested. This increase the size of the HTML document, which directly impacts on the load speeds. The solution is to store all your CSS code in external CSS files and all your Javascript code in external JS files; reducing your load time for an improved browser experience.

Summary

Monitoring and improving the load speed of a webpage is an important part of the build and maintenance of a site. Using various techniques we can improve the page loading times from 20% to 80%; this greatly improves both the user experience and search engines ranks.

Related Articles

camera
Using Photography on your Site

17th May 2016

There is no questioning how effective visual content is online and a photograph really can be a high value part of your site, but only if its presented properly and used in the right way. Most websites do not use online photography effectively and their images actually do more harm than done. Quality photography on […]

clock
Page Speed

20th April 2016

The time it takes a web page to load should an integral element of your website’s SEO strategy as it is now an increasingly important Google ranking factor. Page Speed matters from both a search engine perspective and from a user perspective, particularly on mobile and tablet. Having first announced in 2010 that page load […]

crystal-ball
Digital Crystal Ball for 2016

27th January 2016

Many of the digital trends we expect to see in 2016 are a development of the work Crush are already doing, but in the next 12 months the new developments will come into their own. There are also plenty of old constants too which can’t be forgotten and remain as important as ever. Below are […]