Download our mobile web performance infographics

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.

Download: Mobile web performance and user expectations (high-res) 
View: Other Strangeloop performance infographics

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

Announcing the Strangeloop Mobile Optimizer

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:

• Redirect Suppression
• Mobile SuperCache
• Touch Event Conversion
• Dynamic Payload Decision Making
• Smart Image Resizing
• Just-in-Time HTML
• SPDY Integration
• Third-Party Timing and SLAs
• Viewport Sizing
• Address Bar Optimization
• Integrity Checker
  
  

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.

Find out more:

• News release
• Mobile web performance infographics
• Product information, video, datasheet, and whitepaper

Strangeloop named one of Canada’s top employers for young people

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.

There's No One-Size-Fits-All Internet: Why Audience Should Determine Website Design

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.