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

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

By Aaron Rudger | June 23, 2014

CATEGORIES: Web Performance, Mobile Quality

In our previous posts, we’ve outlined the new white paper, “Loading Mobile Web Pages in 2 Seconds or Less,” and described four areas in which your mobile sites may be leaving precious page load time on the table. In this post we’ll go through the last two areas we cover in the paper: Reducing Page Size and Enhancing the Return Visitor Experience.

Reducing Page Size

Bloat

We’ve been emphasizing that the number of requests is an important factor in poor performance on mobile networks, but heavy pages are a big culprit too.

Weight:

  • Limit overall page weight to 200KB. Keynote recommends page weight (i.e., the sum total of all the objects sent across the mobile network) below 200KB for mobile-optimized sites.

Images:

  • Limit image size to 10KB each. If you can’t get an above-the-fold image down to 10KB, consider replacing it, or compressing, resizing or re-formatting it to reduce image size.

Browser Engine:

  • Use HTML5 and CSS 3.0 to your advantage. Modern browsers are extremely powerful rendering engines--use them! You can reduce your reliance on JavaScript by using new structural elements, functionality, attributes and input types in HTML5. Similarly, new effects in CSS 3.0 eliminate the need for many external images.

Minimize:

  • Optimize HTML and CSS content. We find a lot of META tags and CSS rules in HTML that aren’t necessary and just take up space in the file. Web designers should remove unnecessary link and image attributes and avoid downloading unused CSS markup. Lint tools may be useful here.

Headers:

  • Trim unnecessary HTTP headers. Speaking of unnecessary, do you really need all those HTTP headers? To speed up page load, designers should remove header values that mobile browsers generally ignore anyway.

Enhancing the Return Visitor Experience

Understanding and efficiently managing the cache can reduce round trips for return visitors.

Cache:

  • Tune caching. Most mobile devices have relatively small caches that rarely persist across device reboots, so the caching techniques that work for your desktop sites may be less effective on mobile. Other options for reducing requests include setting Expires headers long into the future, and managing versions with unique date stamps or codes in the filename to force new versions of elements to browsers on demand. We recommend you avoid the use of ETags on mobile-optimized sites.

Take it Offline:

  • Cache in offline storage. The HTML5 Web Storage specification is designed for offline application caching of up to 5 MB of storage per site. You have to manage cache assets explicitly through the localStorage JavaScript object, but the upside in performance can outweigh the extra work.

Cookies:

  • Use local storage instead of cookies. That same localStorage object is also generally better than using cookies, which are sent with each HTTP request and can hamper performance. We recommend using local storage through HTML5 for storing and managing cookie-like information.

Next Steps

We hope this series of posts has started you thinking about initial page render and sent you back to re-examine the HTML code making your mobile sites. Remember, as site designer, your highest priority is to reduce the number of network round trips per page. We recommend keeping these three goals in mind:

  • eliminate or reduce redirections
  • reduce the number of DNS lookups per page
  • reduce the number of new HTTP requests per page

Get more details and background information in our new white paper “Loading Mobile Web Pages in 2 Seconds or Less” and subscribe to this blog for more content on Web Performance. Meanwhile, send me your questions and ideas in the comments below.

Back to Top