19 Things You Can Do to Make Your Site Faster for Mobile Users [WHITEPAPER]

The launch of the new iPad is an excellent reminder that the mobile web -- once a fringe concern for site owners -- is crowding onto the center stage.

But with the mobile web comes a whole new set of challenges for site owners who care about delivering a speedy experience to their visitors: spotty (or throttled) networks, lower bandwidth, higher latency, smaller memories, and lower processing power.

While the new iPad boasts a more powerful processor than its predecessors, this only slightly mitigates these challenges. A further challenge: iPad users expect sites to perform as fast on their tablets as they do on their desktops. 

Our recent whitepaper -- Mobile Site Optimization: 19 things you can do to make your site faster for mobile users -- summarizes the case for mobile optimization, describes the unique performance challenges posed by mobile devices, and provides an overview of strategies and tactics you can use to speed up your site for mobile users.

In this whitepaper, you'll learn why and how to:

• Consolidate resources
• Use browser caching and localStorage
• Embed resources in HTML for first-time use
• Use HTML5 server-sent events
• Eliminate redirects
• Compress and minify page resources
• Resize images
• Simplify pages with HTML5 and CSS 3.0
• Use idle time to preload resources
• Defer loading and executing non-essential scripts
• Adapt to the type of network connection
• Replace click events with touch events
• Support the SPDY protocol
• And several more mobile-specific performance techniques
  
  

Download the free whitepaper: Mobile Site Optimization: 19 things you can do to make your site faster for mobile users

Advanced Mobile Optimization: How does it work, and how do you measure success?

If you're in the San Francisco area, join Strangeloop president Joshua Bixby on Thursday, January 12th, as he speaks at a meeting of the SF/Silicon Valley Web Performance Meetup Group.

Joshua will walk through several advanced mobile optimization techniques and explain how they work around the unique constraints (and opportunities!) of the mobile platform. Joshua will also present data from detailed case studies that show how real-world companies have optimized their mobile sites, and as a result have experienced dramatic improvements in key performance indicators such as page views, conversions, cart size, and revenue.

Joshua's research is based on the development and beta deployment of the Strangeloop Mobile Site Optimizer, the most advanced front-end tool currently available for delivering optimized pages to mobile devices.

The event is free to Meetup group members, but spaces are limited and filling up fast. Go to the event page to learn more.

The relationship between faster mobile sites and business KPIs: Case studies from the mobile frontier

If you're planning to attend Velocity EU next week, be sure to check out Strangeloop president Joshua Bixby's keynote on Tuesday, November 8. If you've been looking for fodder for making a case for investing in mobile performance, Joshua has some extremely compelling stories to tell. He'll be sharing tons of brand-new real-world data about the impact of mobile performance on everything from page views and bounce rate to revenue and customer loyalty. 

Joshua derived his case studies using extensive customer data from the beta of the Strangeloop Mobile Site Optimizer, which is due for release in early 2012.

If you have questions about Mobile Site Optimizer, or about mobile performance in general, use our online scheduler to set up a phone meeting with one of our Performance Experts.

Mobile Optimizer treatment #4: Dynamic Payload Decision Making

Network and bandwidth limitations are two of the biggest challenges to delivering a fast mobile experience. For desktop users, data usage is virtually unlimited, but this isn't the case for mobile users on 3G and 4G networks. For these users, more data (i.e. bigger pages) sent across their network means more money.

The challenge: How to implement preloading without taxing user data plans

When we developed our Mobile Optimizer, we found ourselves challenged by the idea that one of our standby desktop Site Optimizer treatments, Predictive Browser Caching (aka Preloading), which delivers fantastic acceleration results on the desktop, might actually be a huge negative for mobile users.

Predictive Browser Caching works by intelligently guessing where a user is likely to go next, based on not just their past navigation choices, but on the navigation choices of tens of thousands of previous visitors. Predictive Browser Caching preloads those page resources in the browser so they're waiting on standby, ready to render in the browser the moment the visitor clicks on the link.

Predictive Browser Caching is an amazing advanced optimization technique, but it's a tactic that must be used with caution for mobile sites. Metered bandwidth and limited battery life demand a more responsible approach. Users won’t appreciate the speed of your site if it pushes them over their data plan's limit for free browsing or drains their battery.

Our solution: Identify user connections on the fly, and serve them pages optimized for their network

We knew we needed to squeeze as much benefit as we could out of Predictive Browser Caching, without bottoming out people's data plans. So we came up with Dynamic Payload Decision Making, which recognizes each user’s network connection in the moment, and makes sure that the user is served pages optimized according to their network limits.

We were able to do this by exploiting features inherent in the Android operating system and the Blackberry network:

• On Android 2.2+, the navigator.connection.type property returns values that allow you to differentiate WiFi from 2G/3G/4G connections.
• On Blackberry, you can check the value of blackberry.network to get similar information.
  
  

In addition to these techniques, server-side detection of User-Agent header data or other information embedded in requests can alert your application to the type of connection in use.

Dynamic Payload Decision Making in action

Here's one example of how this feature works: If you’re at home, you get a more aggressive version of Predictive Browser Caching. If you’re out on the street, you get only a trimmed-down core set of preloaded objects. You win both ways.

This example demonstrates just one of many dynamic payload decisions Mobile Optimizer makes. In every instance, the goal is always to serve the end user’s best interests.

Learn more

• Mobile Optimizer features and datasheet
• Talk to a Strangeloop Performance Expert

Mobile Optimizer treatment #2: Mobile SuperCache

Continuing in our series of under-the-hood posts about Mobile Optimizer, here's the thinking behind one of the features we're most excited about: Mobile SuperCache.

Caching is a basic optimization technique. It allows relatively static page resources such as CSS files, image files, and JavaScript files to be saved by the visitor’s browser. Once a resource is cached, the browser refers to the locally cached copy instead of downloading it again on subsequent visits to the web page.

Caching is an excellent technique for desktop browsers, but it needs to be completely reworked for mobile environments. Here's how we took on the mobile caching challenge and won.

The Problem (Geek Version)

All modern browsers use local memory to cache resources that have been tagged with CacheControl or Expires headers, which indicate how long the item can be cached. In addition, ETag and LastModified headers indicate how resources should be repopulated in the cache after they’ve expired. The browser fetches cached items locally whenever possible, avoiding unnecessary server requests, and it flushes items that have expired or haven’t been used recently when cache space runs short.

The resources stored in browser object caches commonly include images, cascading style sheets (CSS), and JavaScript code, and caching is essential to achieving acceptable site performance. (A separate cache holds entire rendered pages to support use of the Back and Forward buttons.)

However, mobile browser caches are usually much smaller than on desktop machines, causing items to be flushed quickly. Here's a sampling of how this plays out across various mobile browsers:

• The Mobile Safari browser on the first iPhone didn't support any component caching.
• The iPhone 3GS went to a limit of 25 KB per object and about 1 MB total.
• iPhone 4 browser limits cached items to just over 100 KB, with a total cache size just under 2 MB. (Revised 9/29/11. This information was based on this post on the Yahoo! User Interface blog, but we're now aware of a later post correcting this data.)
• iPhones automatically flush the cache when the device powers down.
• Android cache limits tend to be higher than for iPhone, and the cache isn’t flushed when the unit powers down, but the capabilities vary for different Android devices.
  
  

Takeaway: Caching, which is a key technique for achieving acceptable performance, works inefficiently for mobile sites.

The Problem (Layperson Version)

Mobile browser caches are much smaller than those of desktop browsers. In fact, your mobile browser cache can fill up after viewing just a few pages of a site in a single visit. When that happens, the browser begins to remove items from the cache, nullifying the performance benefits of caching. In addition, some mobile browsers also flush their cache every time a user powers down their device. 

The upshot: We needed to take a new approach to leveraging local storage of reusable resources.

Fortunately, HTML5 gives us an excellent framework for doing this.

The Solution (Geek Version)

Mobile Optimizer leverages an HTML5 feature called Local Storage to bypass the limitations of both desktop and mobile caches. The HTML5 Web Storage specification provides a great alternative to relying only on browser caching. The HTML5 localStorage JavaScript object has been implemented in all the major desktop and mobile browsers. Script code can easily check for support of HTML5 localStorage and then use it, if available, to save and read key/value data, usually 5 MB per domain. This capability makes localStorage very well suited for client-side caching, although read/write speeds do vary for different mobile browsers.

It is usually significantly faster to retrieve a resource from localStorage than to request it from a server, and it is more flexible and reliable than relying only on cache headers and the limited browser cache storage available on most mobile devices.

Interestingly, this is one area where mobile browsers are currently ahead of the desktop in efficiency. LocalStorage performance has lagged in desktop implementations where using the standard browser cache may still be your best option.

The Solution (Layperson Version)

Mobile Optimizer uses the scaffolding of HTML5 to offer a mobile browser cache that is comparable to the desktop browser cache. Mobile Optimizer leverages an HTML5 feature called Local Storage to bypass the limitations of both desktop and mobile caches. The resulting Mobile SuperCache offers site owners the ability to configure persistent, reliable storage.

The Benefit (Universal Version)

Pages render faster for repeat visitors.

Read more: Mobile Optimizer features 
Learn more: Talk to a Strangeloop Performance Expert

Mobile Optimizer treatment #1: Redirect Suppression

Our new Mobile Optimizer offers a suite of 11 never-seen-before advanced techniques that have been developed with the specific requirements of mobile environments in mind. In this series of posts, we'll be explaining the thinking behind each one, starting with treatment #1: Redirect Suppression.

The Problem (Geek Version)

When users attempt to navigate to a standard desktop site from a mobile device, the web application often will read the user-agent HTTP header to detect that the request is from a mobile device. The application then can send an HTTP 301 (or 302) response with an empty body and a Location header, redirecting the user to the mobile version of the site as required. However, the extra round trip to the client and back to the mobile site often consumes several hundred milliseconds over mobile networks. Instead, it is faster to deliver the mobile web page directly in response to the original request, rather than delivering a redirect message that then requests the mobile page.

The Problem (Layperson Version)

When a mobile user visits your full website, your site recognizes the fact that this visitor is using a mobile device and automatically redirects them to the mobile version of your site (if you have one). This redirection adds an unnecessary roundtrip (and sometimes multiple roundtrips), incurring additional latency. On mobile networks, this latency can add up to hundreds of milliseconds for each roundtrip.

The Solution (Universal Version)

Mobile Optimizer stores information about each unique visit to your site. If a user visits your site via a mobile device, Mobile Optimizer remembers this. The next time that user visits via mobile, Mobile Optimizer bypasses the redirect and serves the mobile version directly.

The Benefit

Shaves significant amount of initial load time for repeat visitors.

Sidenote: Earlier this year we studied internal beacon data from more than 100 million online transactions on our clients' sites. We found that 1 out of 3 mobile users selected the "View full site" option, even when presented with the full site.

Read more: Mobile Optimizer features 
Learn more: Talk to a Strangeloop Performance Expert