Thursday, 28 November 2013

Optimising web site performance with page speed

If you haven't measured the performance of your web pages, then you MUST and given that it's so easy to measure and improve then it's criminal if you don't.

You can measure performance in most browsers, however let's look at you can do it with chrome - note that firefox usage is pretty similar if you install the pagespeed addon.
  1. Open you page in chrome browser.
  2. Click menu view / developer / developer tools.
  3. Click on the Audit tab in the developer tools window.
  4. Click Run.
  5. Step through each of the audit report items in turn and address the significant ones you can.
Depending on your web server you use, you may be interested in modpagespeed (Apache), ngx_pagespeed (Nginx) or IISpagespeed (IIS - not personally verified) to help address some the items reported in the page speed audit.

Typical items you may want to address from the report include
  • Resource caching - resources (images / CSS / JS) don't tend change much, so it's good to implement an appropriate cache policy by setting appropriate HTTP headers.
  • Enable GZIP compression - most browsers, devices now support GZIP compression.  Compressing content to be sent over HTTP, even with the overhead of compression and decompression on server and client side,  so this is often valuable optimisation.
  • Optimise images - large high resolutions images can be quite a significant part of the pay load.  Sometime these can be compressed without loss, sometimes you may want to reduce the size for smaller screens.
  • Defer parsing of JavaScript - you want your page to display as soon as possible.  One thing that can slow down the displaying of the page is download and execution of JavaScript IF you've coded the site in a less than optimal way - read how to improve you JavaScript loading.
With any of these changes ideally you'd follow a test driven approach - observe the problem, measure the improvement of the fix and include such verification in test scripts so you have ongoing monitoring the optimisations.   Try not to make blind changes in the hope that performance is improved, since you don't want to make change that make insignificant changes (or even worse) have an adverse effect.