Presentation slides by Patrick Hamann on the techniques his team used to make new Guardian site load under 1 second. Unfortunately no video, but the slides contain a lot of useful takeaways. Some highlights:
-
Their 3000 user survey found that speed was the second most important product driver. The first was how easy it is to find content.
-
Surveys show that people increasingly expect sites to load faster. 10 years ago, the expected load time was about 6 seconds. 5 years ago, it was just over 2 seconds. Today, that expected load time is less than a second. This is the perceived load time the user expects, not actual time, which may be slightly higher, but it indicates a desire for speed.
-
Users perceive sub 100 ms load times as instant. 100-300 ms load times as small, perceptible delays. 300-1000 ms load times as indicating the machine is working. Wait times over a second can lead to users losing focus of the task, and a load time of over 10 seconds can lead to task abandonment altogether.1
-
Put critical CSS in the
headof the template rather than in a separate file. Critical styles are the things you’ll want the user to see immediately, e.g. article text and headline styling. -
Load the rest of CSS using local storage asynchronously.
-
Use webfontjson to turn web fonts files into JSON. Can be used to cache the fonts in localStorage and then apply them to the page when necessary – i.e. don’t make the user wait for the font files to load, show the text using fallbacks.
- Ilya Grigorik, High Performance Browser Networking, 2013, O’Reilly. (Read online)