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?
- 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.
- 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).
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.
The Short List
These are some things you should think about doing:
- 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
- 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)
There are plenty of tools out there which you can use, look into them. Some examples:
Google Page Speed is
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
You’ll also want to roll some of your own for internal testing.