Loading Mobile Web Pages in 2 Seconds or Less (part 2 of 3)
By Aaron Rudger | June 16, 2014
In the first post of this series, we set the goal for you of loading mobile Web pages in 2 seconds or less and told you about our new white paper on the topic, based on years of lessons learned by our Keynote Analytics team. In this post, we’ll continue summarzing the guidelines spelled out in the paper to help you shorten the page load time on your mobile websites.
As we move deeper into the 2014 FIFA World Cup tournament, companies are reminded of the importance and challenges of optimizing for the mobile user. IAB estimates that 48% of smartphone-owning fans will follow the games in some way on their devices. As it's been said, hope is not a strategy and focusing on performance is critical to capitalizing on the current mobile moment.
Dealing with Latency on Mobile Networks
As mentioned in the Basics last time, your highest priority is to reduce the number of network round trips per page. Latency can be as much as 10 times worse on a typical 3G mobile network than on a high-speed wired network connection.
Remove all redirections except for necessary HTTP->HTTPS redirections. Redirections force the browser to load assets one at a time (known as serializing), especially when they precede the base page HTML delivery, making a 2-second initial page render almost impossible.
Limit HTTP requests to 20 per page. For sites with most visitors on 4G networks, Keynote recommends a maximum of 20 requested assets per page—fewer for slower connections, but only 50 maximum even at WiFi speeds. Guidelines for efficient page construction in terms of requests:
- No redirections if possible
- 1 HTML file
- 1-2 CSS elements
- 12 or fewer image files
- 2 or fewer third-party or analytics tags
Reduce separate requests for images. The white paper contains more details on techniques like CSS sprites, HTML5 image manipulation tools and data URIs that can lead to fewer image requests and, therefore, fewer round trips.
Limit third-party calls/tags to 2 per page and load them only after all critical content has been requested. Each third-party call (e.g., for advertising, marketing analytics, tracking) requires a new round-trip request and response from a Web server. It may also require a DNS lookup.
Replace click events with touch events. Replacing onclick with touch events (e.g., touchstart, touchmove, touchend) eliminates the delay often imposed by touch screens used in mobile devices and helps speed up page transitions.
Subscribe to this blog for more guidelines in our next post.
Are you surprised by anything mentioned here? Which techniques have helped you shorten page load time on your mobile sites? Get our new white paper “Loading Mobile Web Pages in 2 Seconds or Less” and send me your questions and ideas in the comments below.