Application Caching for A Better Mobile Experience and SEO

Example Image

To all who are shocked by Google’s recent announcement that user experience is a ranking factor in mobile - really? I understand that it can be very hard to keep up with all of the changes that Google rolls out, but in the case of Mobilegeddon, it’s evident that sites should cater to people on-the-go, and Google has been pretty much been giving us signals left, right, and center on what we should really be focusing on. For starters, the mobile usability section in Google Webmaster Tools highlights specific issues that site owners should address (making font sizes bigger, spacing out touch elements, configuring content to be seen across multiple screen sizes) to eliminate user barriers and make navigating from one page to the other seamless. And while Google (for whatever reason) does not wish to place a strong emphasis on page speed as a ranking factor, we should all know how much more a fast loading vs. a slow loading page impacts a mobile customer who expects information from a clicked site right away, which counts as a user experience item. Folks, it’s safe to say that we have to kick it up a notch and beyond content production towards performance optimization on a technical level.

The Nielsen Norman Group highlights some critical requirements to meet an ideal user experience:

1. Meet the exact needs of the customer, without fuss or bother.

2. Simplicity and elegance that produce products that are a joy to own, a joy to use.

Google’s mobile user experience creed ties closely to the requirements mentioned above. If you passed Google’s mobile-friendly test, but haven’t tackled any page speed issues, that would be the best place to start. If you fix mobile page speed, you’ll be in good standing for desktop (for responsive sites of course). The way I see it, a mobile-first approach to site design strategy is the safest, best way to ensure that the majority of your market is covered in terms of a pleasing on-site brand experience. Check out Google page speed insights best practices for more guidance. Some great tools I like to use to test page speed functionality as, YSlow, and PageSpeed Insights tool.

How Application Caching Meets Google’s Mobile-Friendly Standards

Coincidentally, shortly after this announcement, I was placed in a situation where I was exposed more to the concept and implementation of application caching. Primarily used for web apps and an HTML5 standard, it’s a way to specify which pages and files a browser should cache and make available to users offline. The nature of mobile activity often involves a lot of situations that are not always ideal. From spotty service areas to underground transportation issues with WiFi, online access isn’t always reliable for users on the go.

If you look at mobile user experience in terms of trying to make services more flexible to realistic pain points in mobile usability, offline caching is the jackpot to providing value to sites and web apps that Google will appreciate, and reward.

Webmasters and developers work really hard to make sure online experiences are the best they can be, but to truly integrate into the lives of customers, a bridge needs to be built into the offline world. This is where application caching comes in as a way to continue bringing value to users outside of the online world, and more into a truly holistic digital environment. Application caching achieves three main things:

  1. Offline browsing and site navigation
  2. Caching resources locally, therefore helping the page load faster for users
  3. Reducing server load, since the browser will only download resources that have changed from the server.
  4. Even if your site goes down for whatever reason (internal server error, maintenance, etc.) the user won’t know the difference in an offline environment.

Here are the 2 scenarios I see offline and application caching methods being used:

1. Mobile-Only and Responsive Sites

If you have a mobile-only or responsive site, you can definitely benefit from allowing offline caching of at least top pages on your site that drive the most traffic and interest. The main requirements you will need to implement are uploading a manifest file with the right syntax that calls out the CSS, JavaScript, HTML and Image files you want to serve offline, setting the right mime type for this file, and linking the HTML pages to the manifest file. There are a lot of great resources out there that will guide you on implementing this properly. Sandeep Panda’s blog post does a great job of explaining the details, as does the Mozilla Developer Network documentation.

For example, say a user is in the middle of reading some pretty useful information on your site that has peaked his interest and he clicks on an internal link to learn more just as his train enters the tunnel into New York City. Application caching will allow him to do so when his wifi service cuts out, allowing him to maintain his interest in the brand uninterrupted. Who knows where that could lead? You’ve already earned his appreciation for a thoughtful experience and likely retained him within the conversion funnel, no matter what stage he’s in.

2. Web Apps

This is originally what application caching was used for. Web apps can benefit from having seamless offline integration, especially when the web app involves user data and interaction, such as an online tool. However offline caching for web apps involves more than just application caching to cover all grounds of the interactive experience. Lee Whitney from Sitepoint highlights 3 core capabilities, which are:

  1. Browser application caching of pages
  2. Local storage
  3. Local database

In other words, not only should there be a way for the user to interact with your web app, but whatever information they’ve put in should be locally stored and retained as well.

Regular sites can benefit from these core capabilities as well, especially if there is a part of the site that requires user information, such as online forms, questionnaires, or interactive tools like insurance quote calculators. I’ve implemented app caching in my own personal site. You should be able to navigate to the Experience, and Music pages of the site. I’m sure there won’t ever be a dire need to access my site offline, but this should give you an idea of app caching capabilities. So to all, I leave you with this: Go forth, strategize, and optimize.