In his presentation at Breaking Development in San Diego CA Peter McLachlan explained how pre-fetching Web resources can help speed up performance online. Here's my notes from his talk on Page Speed is Only the Beginning.
- Measuring page speed is fairly easy to do. Visit speed is more than just a single metric. It's about how people move across Web pages - about their Web experience.
- We all should care about page speed. 73% of mobile internet users say they've encountered Web pages that are too slow. A 1 second delay can result in a 7% reduction in conversions.
- Why can pages be slow? Too many http requests, high request latency, too many bytes, poor resource caching, and laggy interactions.
- Mobile network speeds have gone up but this doesn't help much as page load times tend to plateau as bandwidth increases. Latency is a much bigger contribution to download times. LTE reduces tower latency by several milliseconds but we still need to make a number of connections to get data to your phone.
Pre-fetching
- Pre-fetching is the only way to beat latency. Grab resources you know you will need later. Only do this after you've made other page optimizations.
- Pre-fetching works best when your site has a flow so you can get things that people will need before they get there. Be pretty sure people need the resources you're downloading before you grab it.
- What to pre-fetch: HTML, images, DNS, Javascript, CSS.
- DNS is great to pre-fetch. There's usually less than 50 DNS entries to resolve for an entire Website. The OS will cache these entries. All DNS entries are cachable for extended periods of time. There's simple mark-up to pre-fetch DNS that most mobile browsers support.
- CSS is a blocking resource. Most sites use a single CSS file but if you have multiple CSS files for different parts of your site, pre-fetching can help.
- Javascript is often blocking with pre-fetch you can unblock rendering substantially.
- For DNS and CSS just get everything in one go with pre-fetching. For Javascript, you may need to be more selective and pick things based on what your visit's behavior needs.
Implementing Pre-Fetching
- You can fully integrate pre-fetching into your Web app but be careful when you are integrating with a CDN. If you are generating unique HTML for every visitor, CDNs won't help you much.
- On the client side, you can get information on what people are actually using. The server-side can be separated from your architecture.
- How do you actually know what is in the browser's cache? You don't actually know for sure unless your force a fetch. But you can use localStorage directly especially for Javascript and CSS. On mobile, localStorage beats browser cache for getting a Javascript file.
- A recommendation engine for what to pre-fetch can be developed that looks at your user's flows and refines what to load when.
- Pre-fetching consumes bandwidth, CPU and battery so don't use these resources recklessly. Make sure you have high confidence that something will actually get used before you pre-fetch it.
- Focus on JS and CSS as they tend to be smaller files than images.