Visitor Monitoring Loading Mobile Web Pages in 2 Seconds or Less (part 2 of 3) | Keynote
Blog

Loading Mobile Web Pages in 2 Seconds or Less (part 2 of 3)

By Aaron Rudger | June 16, 2014

CATEGORIES: Web Performance, Mobile Quality

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.

ITV-mobile

This time we’ll look at mobile network latency and Javascript rendering considerations.

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.

Celltower_sunrise_by_texas_mustang-on_Flickr

Redirection:

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.

Page Elements:

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
  • 2-4 JavaScript calls
  • 12 or fewer image files
  • 2 or fewer third-party or analytics tags

Consolidate:

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.

Distribute:

Move JavaScript, CSS, images, etc. to the CDN and optimize caching. A well-implemented content delivery network (CDN) can improve responsiveness, even for dynamic content, and provide a form of peak-capacity load handling. Your mileage on mobile sites may vary, but we still recommend CDNs as a way of boosting performance.

Javascript and Rendering

JavaScript, third-party tags and other essentials contribute to good user experience but slow page load.

Consolidate:

Limit external JavaScript calls to 4 per page. We recommend caching JavaScript, combining it into as few files as possible, moving frequently used code out of the base HTML to an external file and auditing the code to avoid redundancies introduced by different development teams (which happens more often than you may think).

Defer:

Defer the download and execution of JavaScript until the initial page has been rendered. You may get some assistance in this from the Web Worker specification in HTML5, which allows concurrent, multi-threaded execution of JavaScript in the browser for better performance, especially on limited-capability mobile processors.

3rd Parties:

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.

Touch Events:

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.

Server Events:

Use Server-Sent Events for asynchronous communication. EventSource JavaScript objects and Server-Sent Events in HTML5 allow the browser to establish efficient, asynchronous communication with the server, especially over a mobile network.

Prefetch:

Prefetch anticipated content. Prefetching is trickier in mobile because of limited resources for caching on mobile devices. Be sure that prefetching does not interfere with JavaScript execution or flush other assets out of the cache prematurely.

Next Steps

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.

Back to Top