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)