To get the fastest perceived performance on our pages we need all the HTML, CSS, and JS required to render the top part of our page within the first response from the server — that magic number is 14kb.
Patrick Hamann, Technical Front End lead at the Guardian, and team has managed to break the 1000ms barrier by introducing a mixture of front end and backend techniques. The Guardians approach is to ensure the content — the news article — is delivered to the user as quickly as possible and within the 14kb magic number.
Lets look at the process:
- User clicks on a link news story from Google.
- A single blocking request is sent to the database for the article (no related stories or comments are requested).
- The HTML is loaded containing Critical CSS in the <head>
- A “Cut the Mustard” process is undertaken and any conditional elements based upon the users device features are loaded.
- Any content related to or supporting the article itself (related article images, article comments etc) are lazy loaded into place.
By using the critical CSS approach means the <head> is 222 lines long however the critical content still comes within the 14kb initial payload when gzipped and it's this process that helps break that 1000ms barrier.
Conditional & Lazy loading
Conditional loading is improving the users experience based on their device features. Tools like Modernizr allow you to test for these features, but beware that just because a browser says it offers support that it doesn't always mean full support. Another approach might be to “Cut the Mustard”.
Another approach might be to hold off loading something until the users shows intent to use a feature. This would be considered conditional based upon the user context. You can hold off loading in social icons until the user hovers or touches the icons, or you could avoid loading an iframe google map on smaller viewports where the user is likely to prefer linking to a dedicated mapping application.
Lazy loading is defined as something that you always intend to load on the page — images that are a part of the article, comments, or other related articles — but that don't need to be there for the user to start consuming the content.
Back to Basics
- Set up Fastly or Cloudflare. CDN's deliver your static content to users faster then your own server.
- Enable SPDY for http2 enabled browsers to take advantage of HTTP2 features like parallel http requests instead of synchronous. CloudFlare offer this for paid accounts.
- Social Count allows for conditional loading of your Social Icons.
- Brad Frost built out this example using the Static Maps Google API
- Ajax Include Pattern that will load content snippets from either a data-before, data-after data-replace attribute.