Page load speed optimisation

Also referred to as ‘page load time’, page load speed is a measure of the amount of time taken between the moment a user requests a web page to when this page is loaded in the users browser.  The quicker the website is, the better the user experience and the more likely you are to be ranked higher as a result.

In April 2010, Google announced that page load speed would be used as an important ranking signal, putting a bit more pressure both on website owners and developers to see if we can deliver a faster web experience. So what does this involve? What can you do to improve the speed of your website pages if you are concerned they aren’t running as quickly as they should?

Fortunately, there are also lots of useful tools to help analyse and test the speed of pages, while also offering some insight into how improvements might be made. Google Page Speed Tool and YSlow are two good (free) services. Most web browsers will come with a developer panel most of which include a ‘network’ tab – here the browser will detail (in sequence) what loaded, and how long it took and this can be another way to identify which bits of the page load quickly, which load slowly and where improvements can be made!

There are really two sides to consider when looking to improve page load speed:

Server Side Solutions

To begin delivering the requested web page, the server must first get it together! If you run a content management system (such as WordPress or Umbraco) this will involve reading the page’s data (and content) from a database or some kind of cache and putting this into a template which is then served as the final page. This means that page load speed in this first instance will depend on the quality of the website’s code, how streamlined and well optimised it runs and how easily it can obtain the information it needs for the page.

Some pages may require so much data, they will always be slow due to the amount of work needed from the computer. Consider a news website in which users post news articles. On this site it lists the latest 10 publications on the homepage. To update this, the website will need to (1) Check every news item ever posted  (2) order these by date published (3) take the top 10 of this list to display.

It isn’t easy or feasible to limit the scope of this query, since it will need to check everything, and in these scenarios it would be best to employ some kind of server-side caching, which basically involves simply ‘keeping a copy’ of the result the last time this was run.

The other way server side speeds can be improved is by simply adding more and better resources. Using a server with a faster processor and more memory will likely result in a site with pages that load a lot faster. Similarly, if you are currently using a shared hosting account, these will typically be a slower experience (shared hosting is a server with many websites hosted on it, so the availability of it will determined by how heavily other people’s websites are used too.). These shared hosting accounts tend to be slower than your own virtual private server or dedicated server, however having your own server ads to the costs considerably.

Load balancing involves having extra redundancy of resources so that the workload can be managed across all, rather than just one of those resources. For instance, it’s common for big websites to have load balanced databases; which means having at least two databases and setting the website up to decide, based on the level of usage at that moment, which database it will use for the current request.

Client Side considerations

Once the server has assembled and sent the finished web page to you, there will be several new things your browser will now need to do as a result of this. These include:

• Loading all Javascript and CSS and other assets referenced by the page
• Fetching each image upon the page
• Rendering and display the page
• Initialising and running the scripts contained within the page

To make things even more complicated, there will be some interdependency between these tasks, but not necessarily any sequential order developers can rely on. Whilst the loading of images may begin immediately, the page may start displaying before these have finished loading – with images being shown a split second or so later. The browser will make a lot of on-the-fly decisions very quickly when managing this process, but there are areas that can help to improve page load speed:

• • Encourage heavier browser caching of images – Since the image Url’s are not likely to change, many will recommend using heavy client-side caching. This can be achieved in a number of ways: generally this is done through HTTP headers but there are many other methods. If using Apache, this can be done via the .htaccess file (or php.ini), if using Microsoft IIS this can be done through the web.config file. By setting the maximum age of cache for images to something high (such as several days) you can seriously reduce the workload needed by the browser between pages.
  • Bundling and minifying Javascript – while this is technically a server-side feature, the browser will reap the benefit. Imagine loading a web page with 20 separate Javascript files – each would need to be loaded with 20 separate web request’s, one for each file, along with the first request for the page itself. This is a serious amount of legwork for the browser, by gathering all CSS into a single file and JS down into another file, you have reduced this down into 2 additional requests besides the page itself. Minifying this by removing spaces and any unnecessary text also further reduces the amount of work needed to send these across the web, however some code cannot be minified so ensure you backup and test fully before going ahead – nothing worse than finding you site not looking great and no backup to revert to!

• Optimising images by reducing their size to the maximum usable size on your website, and also turning up compression can significantly reduce the file size of files and therefore the amount of work (and time) needed to serve them.

Each website’s requirement will be unique and while some websites may include many images (making it most important they are well optimised) some websites may have  fewer images, some may include more scripts, making it important to keep an open mind when profiling a website and checking for bottlenecks in the page load process.