The mobile landscape is changing incredibly quickly. With the launch of our Mobile Optimizer, we wanted to capture a current snapshot of the landscape for posterity, so we corralled the latest research from Forrester, Cisco, Google, Gomez, and Keynote into this set of infographics.
We were extremely flattered to find our graphics featured on the home page of Visual.ly earlier this week. (You can see them here now.) The graphics have also been picked up by a bunch of other blogs, including Techvibes and Bit Rebels.
If you'd like to include them in your own blog or marketing materials, we'd love to share.
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.
We are very excited to announce another industry first for Strangeloop, as we release the world's first front-end optimization (FEO) solution specifically tailored for mobile environments: the Strangeloop Mobile Optimizer.
As our president, Joshua Bixby, explained in his latest blog post, "Mobile Optimizer is not a suite of desktop optimization best practices disguised under a shiny new label. The more we dug into the mobile space, the more we realized that mobile environments pose some challenges we’d never faced with desktop. At the same time, we realized that mobile also offered us some pretty cool opportunities."
We embraced those challenges and opportunities to develop 11 brand-new mobile-specific front-end optimization treatments:
Mobile Optimizer also carries over tried-and-tested core optimization treatments from our industry-leading desktop Site Optimizer, as well leveraging emerging standards and protocols such as HTML5 and SPDY.
Trials of Mobile Optimizer found that it made pages up to 3.5 faster on smartphones and tablets.
Everyone here at Strangeloop knows it's a great place to work, but it's still nice to get outside validation. (Yes, we know we've received this validation three times in the past, as our trifecta of BC's Best Place to Work wins attests. What can we say? We're validation junkies.)
The top 100 list was announced earlier today in The Globe and Mail. The article discusses not just the importance of recruiting the most talented people early in their careers, but also encouraging them to stick around as they enter their family-building years. Many of the strategies discussed in the article are in active use here at Strangeloop: three weeks of annual vacation (to start), telecommuting, and flexible work scheduling.
And, ahem, did we mention we also have a soft-serve ice cream machine?
Do you want to work alongside some of the nicest, most talented people in high-tech? Do you like ice cream? Check out our job postings for current opportunities.
Men value a website's speed, while women value its ease of use.
Children won't explore a Web page until it fully loads.
The average teenager has a harder time figuring out how to use a website than the average adult.
Mobile Web users over the age of 45 are more impatient than any other age group when waiting for sites to load.
If you've always believed that most people use the internet in more or less the same way, think again. Above are just a few of the tidbits that Strangeloop president Joshua Bixby has encountered in his ongoing quest to find the latest web performance research.
Recently, Joshua was invited by Marketing Profs to summarize his findings in this guest post. While not all of it is germane to site speed, it definitely falls under the usability umbrella and merits a read by anyone who cares about delivering a premium user experience.