Improving the Loading Speed of your Page

On the web we often focus on rich multimedia and exciting visuals. Modern websites have graphics everywhere, little icons next to buttons and links, grainy backgrounds and logos. Plus before they even load they’ll be fetching complex data from databases, maybe even hitting external APIs. It’s easy enough, with little trouble, to make a page that can take beyond 10 seconds to load.

Why is page loading speed important? 

  1. If a page takes too long to load people will context switch (change to another tab, open up email, go get something to eat) or get frustrated and give up. They may not ever come back.
  2. Fast speeds make pages and apps feel smoother and better – there’s a reason Google care so much about speed (especially on their home page)

There’s evidence of faster pages increasing customer satisfaction and of slower speeds decreasing satisfaction (and revenue). This study claims that online shoppers will wait at most 4 seconds before potentially abandoning the retail site they are on. That study was done in 2006, 5 years later and I would guess that people are even more impatient.

Progressive Loading.

Progressive Loading is the practice of loading bits of the page at a time, you see it all the time, you are used to it. Progressive Loading lets users know that the page is coming, it keeps them on their seat. It also allows them to start working right away, if they can see menu items pop up they can click on them before your footer loads.

Try and optimise your progressive loading as much as possible. It can be really frustrating when you can see a page but the fonts haven’t loaded yet. Or when you get a giant spinner or loading bar blocking the page (see: every flash site ever). Or if a page has loaded but you can’t do anything because someone wrote the mother of all javascript programs and your browser is hanging trying to parse and execute it.

The Short List

These are some things you should think about doing:

  • Keep JavaScript out of the header, put it at the bottom of the page
  • Use CSS Sprites for pages rich with icons
  • Try and do as much as possible in CSS, defining borders and gradients are smaller than the whole button as a png
  • Minify your JavaScript
  • Compress your images
  • Use a Content Delivery Network (like Amazon Cloud Front) – they are actually quite cheap
  • Cache as much as you can (but not too much, that can be dangerous)

Theres much, much more to think about which will be site specific (like ajax), but think about this during your process.

Testing
There are plenty of tools out there which you can use, look into them. Some examples:

Google Page Speed is a good in browser test which will go through a checklist of caching and compression that you could do
Yahoo Y Slow has a much more exhaustive list and a bunch of extra tips
New Relic does database profiling and user page load analytics – the user side analytics are great for monitoring real world page load times
You’ll also want to roll some of your own for internal testing.