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:
Download the free whitepaper: Mobile Site Optimization: 19 things you can do to make your site faster for mobile users
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.
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.
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.
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.
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:
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.
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.
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 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.
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 LastModiﬁed 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 ﬂushes items that have expired or haven’t been used recently when cache space runs short.
However, mobile browser caches are usually much smaller than on desktop machines, causing items to be ﬂushed quickly. Here's a sampling of how this plays out across various mobile browsers:
Takeaway: Caching, which is a key technique for achieving acceptable performance, works inefﬁciently for mobile sites.
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 beneﬁts of caching. In addition, some mobile browsers also ﬂush 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.
It is usually signiﬁcantly faster to retrieve a resource from localStorage than to request it from a server, and it is more ﬂexible 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 efﬁciency. LocalStorage performance has lagged in desktop implementations where using the standard browser cache may still be your best option.
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 conﬁgure persistent, reliable storage.
Pages render faster for repeat visitors.
Our new Mobile Optimizer offers a suite of 11 never-seen-before advanced techniques that have been developed with the speciﬁc 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.
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.
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.
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.
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.