In his High Performance Mobile presentation at Mobilism in Amsterdam, Netherlands 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%. So 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.
Performance Tools
- Until recently, developers working on mobile have little visibility into the performance of their sites on devices. There are now tools available to help you better optimize mobile Web performance.
- Blaze.io has a tool for picking a phone and running a Web site to see how fast it is. It will also record screen shots and show how it renders on actual devices. All done in the Web browser. Limitations are it runs on WiFi and is in Otawa. You also can’t use it on non-public/logged in sites.
- PCAP perf allows you to load a PCAP (packet capture file) yourself to see a waterfall chart of performance. Allows you to look at logged in sites and sites behind firewall. Still uses WiFi not 3G.
- To gather locally and analyze on the desktop, you can use the mobile performance bookmarklet and post results to JDrop. JDrop is JSON in the cloud. It allows you to log data on your phone then view results on desktop.
- Weinre is a remote debugger. If you are in the process of creating code, this is a better approach for seeing the impact of changes on performance.
- Opera Dragonfly and WebKit Remote Debugging are recently released tools for mobile.
- The HTTP Archive tracks changes over time on Web sites. Over the last six months, the average transfer size has gone up. Number of images on a page has stayed the same but the size of the images has grown about 14%. The top 100 Web sites have an average total transfer size of 400KB. The top 1,000 have a 674KB average. Stats relevant to performance get worse as you move into the tail.
- Mobile HTTP archive compares the top 100 URLs desktop (about 400KB) to an average of 270KB on mobile. Less data is served. Everything is smaller but HTML is bigger. In-lining images, CSS, and Javascript is a mobile performance best practice but it increases HTML size.
Techniques
- Comparing Google Search on desktop, iPad, and iPhone, the number of http requests goes down on mobile but the size of the HTML mark-up stays the same. Primary reason seems to be that Google uses 68 inline images by marking them up with data:urls in their mobile mark-up.
- Bing on the iPhone takes 20-30 lines of CSS and Javascript at a time and loads it into local storage. It then sets a cookie to indicate that a user has the CSS and JS stored on their device already.
- iPhone can cache 2MB files. It used to be that it wouldn’t cache files bigger than 15KB.
- Andorid can only open 4 connections max. So combing requests is even more important on mobile.
- On mobile redirects are more painful.
- Key takeaways. Speed matters. There is a lot of opportunity for performance on mobile as people know it is an issue. There are new tools that give visibility into what is happening with mobile performance.