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 sitespeed.io 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:

• HTTP Cache headers
• Images
• The Critical Rendering Path

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:

• Beginners guide to HTTP Cache Headers by Kyle Young.
• Caching Tutorial by Mark Nottingham.

Images

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:

• ImageOptim by Kornel Lesiński helps you choose the best compression algorithm.
• Sizer Soze by Yoav Weiss helps you see how much extra unnecessary kilo bytes of images you send to different viewports.
• PictureFill by Scott Jehl is a responsive Images approach that you can use today (except that it isn't good for the preloader) that mimics the proposed picture element.
• The real conflict behind picture & srcset by Jason Grigsby.

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.

• Deciphering the Critical Rendering Path by Ilya Grigorik.
• Optimizing the Critical Rendering Path by Ilya Grigorik.

Tools

Here are the tools I use mostly:

• YSlow - I use the browser version, it is perfect to get a first impression on how the page is implemented.
• Google Page Speed Insights - this is great to check if the page works well on both desktop and mobile. Google also uses modern best practice rules!
• sitespeed.io - sitespeed tests many pages of your site helping you find bad implemented pages and see patterns between pages.
• WebPageTest - here you get ALL the info you need to analyze a page and you can also test on real mobile devices. I love it!
• HTTPArchive - the perfect place to see how the web is built and compare with your site.

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