In his Faster Mobile Anyone? presentation at Breaking Development in Nashville, Steve Souders discussed the importance of performance on the Web, why it is even more important on mobile, and a set of emerging best practices for faster mobile Web site. Here are my notes from his talk:
- We used to need to convince people to care about performance. But now it’s accepted that speed matters. The long terms effects of speed can keep people away for weeks or months.
- When you update performance it may take a while to see usage increases (weeks, months). When Shopzilla decreased load time by 4 sec, they saw a 25% increase in page views, and conversion rates went up 7-12%. Some of this was due to better AdSense performance. As Google takes speed into account for search ranking.
- WPO is Web performance optimization. Drives traffic to your site, improves user metrics, creates more revenue.
- People on mobile are going to expect near zero latency in their experience. Currently, however, they often have to deal with slow performance.
- Companies with a fast mobile experience will be the best positioned to take advantage of mobile business opportunities like commerce.
- But it’s early. We are still at the beginning of figuring things out.
Techniques for Faster Mobile Experiences
- Top techniques for mobile performance: make fewer http requests, reduce DNS lookups, avoid redirects.
- Redirects globally take about 500ms. When using them to switch between mobile and desktop pages, people will see a blank page until the redirect takes effect. On mobile redirects are more painful.
- Be careful of sharding dominant domains on mobile as there’s a maximum number of connections that can be open at any time.
- 98% of the time when a Website is slow, it is because of the Javascript. 75% of Javascript downloaded is not used until the page is downloaded. Look into splitting the payload.
- Images are 50-60% of byte size. You can resize images based on screen size in the client or use a server side solution to adjust the image you send over.
- Reduce http requests: use sprites, data URIs, CSS3
- Google Search uses 68 inline images by marking them up with data:URIs in their mobile experience.
- Handle Javascript carefully. Async says continue downloading, then actually execute scripts when available. Defer says execute only when the parsing is finished.
- But do you really want to take up one of your connections with a deferred script when you have a limited number of connections available? What we want is to defer loading and executing of scripts. This allows us to pre-fetch JavaScript that we don’t need to run yet.
- 50% of unique users come in with an empty cache. Once during the day, half your users are coming in with an empty cache. Caches are small and don’t work as well as they should.
- Internet Explorer will be giving scripts priority in the cache over images in IE 10.
- Caches are much smaller on mobile and in some places (iPhone) non-existant.
- App cache is for offline apps but because of existing browser cache issues, you might still want to use app cache to boost performance of online apps as well. Any HTML document that uses a manifest file is by default put into the app cache. If anything you list in your manifest hits a 404, then nothing is cached.
- App cache reload: once you rev a manifest and reload a web page, you’ll still see older content pulled from the app cache. If you reload again, you’ll see the update (from the cache).
- App cache has good intentions but it is really hard to work with. We need a framework for making things more manageable.
- More opportunities include: localStorage, audio & video tags, WebSockets, onTouchEnd instead of onClickHistory, a ping request, AnimationFrame – not timersn native JSON parse/stringify
- Key takeaways. Speed matters. There is a lot of opportunity for performance on mobile as people know it is an issue.