The New Web, Powered by Jetpack and Progressive Web Apps

The way that people access the Internet is changing.

In 2017, global mobile web traffic exceeded desktop traffic for the first time. In the areas of fastest Internet growth we have seen a profound shift towards low-powered mobile devices on 2G and 3G networks.

Pageloads by browser platform, 2017 YTD. Data via StatCounter.

This presents a challenge not just to developers and designers, but to the actual architecture of the web. The web’s request/response architecture works great for always-on low-latency networks but fails when the network is unreliable, even temporarily.

User expectations are also changing. Mobile devices now have app ecosystems and rich patterns and libraries for handling changing network conditions and integrating with on-device features like cameras, GPS, storage and payment processing – features not traditionally found in the web’s sandboxed environment.

As web developers, designers, and publishers, we have made great strides towards accommodating mobile phones through responsive design. Users are now accessing the same site in a variety of form-factors. However, what has happened as a result is that the mobile web has become drastically more demanding on devices and networks, essentially bringing the demands of the desktop to all devices.

If you’re reading this, you probably experience the web in a very different way from most Internet citizens – even on a mobile device. Most of us have high-end smartphones and LTE connections. As a result, we can often be unaware of the challenges that many people face using our sites, plugins and themes.

While we may feel a strong affection for the freedoms afforded by the web, most people have more personal goals: to run their business, to tell their stories, to connect with others in their communities and around the world – and they will gravitate to the best solution, regardless of the underlying technology. We risk these users skipping the web entirely in favour of walled gardens powered by proprietary apps.

How do we address these issues?

Progressive Web Apps are the web’s answer to these challenges. PWAs comprise a set of new (and not-so-new) web standards that provide offline support, storage, and device integration that can match native apps. Combined with the essential freedoms and efficiencies of the web, these standards represent a fundamental shift in how web content can be accessed.

In addition, by only downloading the site features someone is actually using, PWAs can be much MORE efficient than native apps!

Despite the name, PWAs aren’t just for app-like experiences. Your content-rich web site can also be a Progressive Web App. In fact you can apply these technologies in ways that help any site on any theme to load quickly, work offline, and engage users in powerful new ways.

Earlier this week I was thrilled to share the Chrome Dev Summit stage with Chrome Engineer Das Surma to talk about our recent experiments with WordPress and PWA. We added PWA capabilities to Jetpack, a free plugin that you can download on any WordPress site. Jetpack powers over 5 billion pageviews a month, and already delivers a number of useful features to WordPress.com and VIP, so it’s a great platform for adding these capabilities.

We found that a specific combination of traditional and new optimisations can improve the overall performance of web sites loaded via 3G networks by up to 10-15x . Improvements range from reduced Time To First Contentful Paint (TTFCP), smaller number of requests, reduced overall download size, and the ability to work offline. Crucially, these improvements can be applied automatically to almost any theme without additional coding.

The scores you see there on the right are generated by “Lighthouse“, Google’s incredible site auditing tool, which is included in the Chrome browser.

Here’s some details on the optimisations we have made so far, for more technical readers:

  • Aggressive inlining of critical assets on the first page load to improve performance with empty cache, while using the Service Worker to load common assets in the background for subsequent requests
  • Fast loading of cached pages while checking for fresh content in the background using the Stale While Revalidate strategy
  • Offline support by checking for network access and preloading critical pages when the Service Worker activates
  • Web Push for sending updated content to clients which can be retrieved when the browser comes online
  • Lazy loading of offscreen images using newer IntersectionObserver API (with polyfill fallback on IE)

So what can you do to be part of this revolution? If you are a developer, I encourage you to check out our Jetpack branch and let us know what you think. Truly, we have barely scratched the surface of what’s possible.

If you are a site owner or designer, I encourage you try out your site on 3G (or using the 3G simulator built-in to Chrome) on a low-end device and see if you are providing a good experience for the next billion internet users who will be overwhelmingly using that kind of network and device.

Check out the full video below. We begin talking about the role of Jetpack around 3m 14s.

Props to @DasSurma, @nicoleckohler, @ebinnion, @beaulebens and @extraface for all their help and feedback writing this article.

2 thoughts on “The New Web, Powered by Jetpack and Progressive Web Apps

  1. Thanks for your great presentation on WordPress and PWAs. I just recently learned bout them as a publisher who has been considering having a native app built. I had also wondered how they would impact my beloved CMS, WordPress. Your talk was very clear. Thank you.

    I’m very interested in seeing how Jetpack PWA capabilities evolve. I hope there will be the ability to add the icon to the homescreen, As a news publisher I still need to have ways to monetize my site with banner ads and hope there is a way to integrate the advertising and not see those images stripped away.

    Thanks again. -Krystal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Ready to get started?

Tell us about your needs

Let us lead the way. We’ll help you select a top tier development partner. We’ll train your developers, operations, infrastructure, and editorial teams. We’ll coarchitect your deployment processes. We will provide live support for peak events. We’ll help your people avoid dark alleys and blind corners, and reduce wasted cycles.

%d bloggers like this: