Patrick Hamman at The Guardian gave an interesting talk last week at the FrontTrends conference in Warsaw about how they’re trying to make theguardian.com load a lot faster in its new, responsive design, and there are a lot of ideas in here ready to be stolen by other news site developers. One remarkable fact: A Guardian audience survey found that, of 17 key product drivers, the speed of the site ranked No. 2, behind only whether content was easy to find or not.
A couple of the main ideas:
The order in which a page’s assets load is critical to user perception. Load the most important parts (for a news article, the headline and text) first and load everything else (related stories, ads, comments, bottom nav, etc.) later. Let your user get started with the task she wants to complete right away. (He even suggests inlining CSS in some cases, long considered a little déclassé in modern web circles.) There’s plenty of good stuff about progressive enhancement and lazy loading if you want to learn more.
Determine what an acceptable load time is — set your time budget, in other words — and test, improve, and iterate your way until you hit that goal. I loved this screenshot of a metrics email bragging that the new Guardian site was “142% faster than NY Times”:
More about the Guardian redesign, including code, on GitHub.