Crash course in web performance

20 February 2014

I've been asked to do a one hour crash course in web performance (with a one hour follow up later) at my company and I thought it would be nice to share tools and links in a blog post so here we go!

First the big question: Why is performance important? I think the Design for performance presentation by Lara Swanson is a perfect start. The main focus of the slides is how you should think as a designer and design for speed. But hey, the first part has a great summary on why it is important to your company that your web site is fast.

How do you build a speedy web site? The good thing is that there are a couple of best practice rules that helps out, following these patterns gives you a good start to have fast performing page/site.

The idea of best practice rules has been around since 2007 when Steve Souders published the 14 Rules for Faster-Loading Web Sites. They are still valid but when HTTP 2.0 will come, a couple of them will change (you don't need to combine assets anymore). For more best practice rules, you can check YSlow, Google Page Speed rules and the rules.

I got one hour and that is not a lot of time, I will focus on three rules/areas that I thinks is extra important:

And go through the tools I use the most.

HTTP Cache headers

Setting the HTTP Cache headers is still a real issue out there in the real world. Please set a long cache time where it is possible so your components are cached in the browsers & proxys. Here are two good tutorials giving you a good start:


Images are la large part of a web site. 60% (1040 kb) of the average page weight is images (HTTPArchive feb 2014). Etsy found an increased bounce rate of 12% on mobile devices when they added 160KB of images to a page! The size of images is really important. Here are a couple of tools you should check out:

The Critical Rendering Path

You want your page to be render as fast as possible for the end user. The Rendering Path is just that, what the browser need to do to render the output.


Here are the tools I use mostly:

The book you as a web developer must read!

As an extra bonus, here is the number one book you all need to read if you already haven't! High Performance Browser Networking by Ilya Grigorik. You can read it for free online!

Extra slides

If I have some time left the extra slides covers the web performance waterfalls, Paul Irish mobile performance goals and custom User Timings.

Yes, I think that's what I can do in one hour, if I talk really fast :)

Written by: Peter Hedenskog