Winning the War on Web Page Speed

Page speed is important, no matter how you look at it, Google uses it in its ranking algorithms and user’s expectation, satisfaction and website abandonment rates are all influenced by it. The article “A faster page is Better” shows what these impacts are in quantifiable terms – check it out if you haven’t already done so.

Web Page Speed is not only how long it takes to download and retrieve the resources for a webpage, but also includes the time it takes to render these in the browser.

Improving Web Page Speed = Resource download time + Rendering time

The contributing components of this equation have a myriad of factors many of which require technical knowledge and know how to resolve. There are some however that a layperson or website administrator can manage and these can have the biggest impact. The post “Page Speed – Let’s Improve It” covers the “what and how” of these.

In conjunction to this a number of platforms now have plugins designed specifically to address numerous influencing factors simplifying the ability to speed up your website and its pages.

So what are these factors?

Optimise Imagery

The look and feel of a website is critical to user appeal and usage. Imagery and graphics have a major role to play in this presentation however can also greatly impact the size of webpage. It’s important to optimise images through compression, image format selection and progressive rendering options which will reduce file size and also aid in the drawing of the page within the browser. Page Speed – Let’s Improve It has some good tools and tips on this topic.

Minify Resourses

Minification is the process of removing unnecessary characters from a file (or source code) without impairing its functionality. In general this entails removing formatting – i.e. white space and carriage returns – also comments and commented out blocks and can be applied to JavaScript, CSS and the HTML output for the webpage.

There are numerous online tools available that can minify files which will automatically perform these operations and are worth their weight in gold.  They don’t however remove unreferenced css styles or script functions – this is a manual process and still very much a part of the minifying definition – removing unnecessary stuff!

Combine Resources

For every object (i.e. image, css or script file) that needs to be downloaded there is an amount of time and resource required to negotiate a connection, therefore reducing this number of http requests eliminates some of this overhead.  Techniques to achieve this include using CSS sprites, combining CSS or JavaScript files together or using a single image with an image map instead of multiple images individually hyperlinked.

Page Weight and Number of Objects

If we look at the trend over the years, we see that the average number of objects and size of a page have been increasing. Admittedly the data is a couple of years old but I doubt this trend is reversing.

These numbers are significantly higher than many sources recommend. While it may not be practical to achieve a target of 30 objects or less care should be taken to ensure the least possible number is used through the techniques of, combining resources as stated above, removing unreferenced resources or splitting content across multiple pages.  An approach I like to take is, if 80% of people expect a page to load in under 3 seconds and 40% will go elsewhere if it takes longer then targeting a page to load within this time frame has some compelling advantages.

Leverage Browser Caching

When a browser visits a webpage all the resources including images, scripts, fonts and stylesheets have to be downloaded. Your browser may cache some or all of this data locally so that if you navigate to the same page it will render a lot quicker due to not having to download the files again.    This however relies of the settings of the browser rather than an instruction from your website. Therefore leveraging browser caching is when you send an instruction in the header of each downloaded resource instructing the browser to cache that resource for a specified period of time, effectively controlling the cacheable content from your website.

Enable Compression

We all know that compressing a large file into a zip or tar file reduces its file size and this applies the same to the html and css (text content) of a webpage. By enabling the web server to send gzip compressed data you can save 50% or more of the size of the compressed resources reducing the amount of data to be sent.

Render Blocking Resources

As your browser downloads the required files of a webpage it will also start drawing or rendering the content within the browser window. If this drawing process has to pause and wait for a particular file to be downloaded then this file is blocking the rendering process of the webpage and hence is referred to as a “render blocking resource”. This typically applies to the css and JavaScript files that are referenced within the head section of a web page. Moving these to the footer of the page or employing asynchronous downloading allows the page render quicker.

Now that you’re armed with this knowledge I’m sure you too can win the war and speed up your website.

Andy Brown
www.strategus.co.nz