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.

Why The Washington Post Uses WordPress

Yuri Victor from The Washington Post gave this flash talk about “Why The Washington Post Uses WordPress” at the VIP Workshop in May 2013.

The main reasons he cites are :

  • Tests well with bloggers
  • Tests well with audience
  • Allows fast development
  • Allows us to ABC (Always Be Changing)

They started with just one blog and moved on to other Washington Post properties:

We did a test with Ezra Klein’s blog by converting it to WordPress. He loved it and the blog has seen such a massive increase in pageviews we’re now moving all our blogs to WordPress and we’re launching new blogs every week.

and are big proponents of iteration and prototyping, which they did with their mobile site:

When we wanted to redesign our mobile site we started doing rapid prototypes with foundation and WordPress. Rather than building a Washington Post mobile site with articles, we wanted to build a mobile site with a great reading experience that happened to be by The Washington Post. This was obviously going to be a radical departure from most mobile news sites so to get buy in we had to have real prototypes management could use and approve.

Click through his slides (below) to see the full presentation deck, and delve into their meaning further in this post on Yuri’s blog.

Want more information about WordPress for media or enterprise sites? Contact WordPress.com VIP Services.

Yuri also presented a version of this talk at the annual WordPress conference, WordCamp San Francisco:

Redesigning KFF.org & Battle Entropy

Robin Sidel, Associate Director, New Media and Marketing, Kaiser Family Foundation & Evonne Young, Associate Director, Web Development and Production, Kaiser Family Foundation presented “From Legacy to the Future – Moving Technology Mountains” at the recent WordPress in Government Workshop.

The Kaiser Family Foundation migrated from a legacy platform to WordPress — learn from their challenges, new opportunities, and best practices as they successfully went from old to new without leaving any data or content behind.

Want more information about WordPress for government or enterprise sites? Contact WordPress.com VIP Services.

WordPress Powers Sites.usa.gov

James Mathieson, Product Manager from Sites.USA.gov, General Services Administration, presented “WordPress Powers Sites.usa.gov” at the recent WordPress in Government Workshop.

Sites.USA.gov is a shared service to help government agencies focus on creating content rather than building systems to deliver that content. James’ presentation is an introduction to the platform, how it was built on WordPress and who should use it, and why WordPress is the solution for an open content management system when it comes the federal digital strategy.

Want more information about WordPress for government or enterprise sites? Contact WordPress.com VIP Services.

Andrew Nacin: Scaling WordPress & Optimizing Security

Andrew Nacin, WordPress Lead Developer and Tech Ninja at Audrey Capital, presented two topics at the WordPress in Government Workshop: “A Crash Course in Scaling WordPress” and “WordPress.org & Optimizing Security for your WordPress sites.”

A crash course in scaling WordPress

In this talk Andrew explains how WordPress can scale (spoiler: and it’s easy!) by delving into how nginx can play a role in multiple ways, and tips on tweaks to perform at the PHP and WordPress software levels, as well as hardware.

WordPress.org & Optimizing Security for your WordPress sites

In this presentation Andrew walks through the differences between major and minor WordPress releases, the philosophy on backwards compatibility, and a basic crash course in WordPress security. Click through his slides to learn more.

Want more information about WordPress for government or enterprise sites? Contact WordPress.com VIP Services.

Case Study: BBC America runs on WordPress

BBC America content was previously spread across 3-4 different content management systems. They knew they needed a change and wanted to consolidate their support efforts into a single platform.

We spoke with David Anderson, Senior Product Development Manager at BBC Worldwide, about how WordPress powers BBCAmerica.com, starting with their site redesign a year ago.

BBC America

Continue reading “Case Study: BBC America runs on WordPress”

Recent Launches on VIP: Global News, TIME 100, Wired TV

We’ve had a lot of fantastic sites debut on WordPress.com VIP lately. Here’s a quick look at some of our latest launches. Welcome to the WordPress family!

Screen Shot 2013-03-29 at 12.43.46 PM

Last Monday was a big day, when we launched Global News, a Canadian broadcasting network. The site was developed by our Featured Partner 10up. Stay tuned for an in-depth post on this innovative new site.

Screen Shot 2013-03-29 at 12.45.17 PM

This new TIME 100 site is fully responsive and encourages readers to “Cast your vote for the leaders, artists, innovators, icons and heroes that you think are the most influential people in the world.” Their polling system is powered by Polldaddy.

Screen Shot 2013-03-29 at 12.44.27 PM

The brand new Wired TV site hosts a large database of videos which can be searched or filtered by channel, popularity or recency.

Screen Shot 2013-03-29 at 12.46.19 PM

NI Group Ltd, the home of The Times, The Sunday Times, and The Sun, recently moved their corporate site onto WordPress.com VIP.

Screen Shot 2013-03-29 at 12.45.54 PM

Pandora’s blog is a great place to discover new music, and to learn a little bit about their social media community through their embedded Twitter and Instagram feeds.

Ready to become a VIP Services Client? Some of the world’s biggest brands rely on WordPress.com VIP Services.

WordPress.com VIP at SXSW

Headed to SXSW? We’d love to see you there.

We’ll be co-hosting a party on Sunday night with Sailthru:

logoSailthru and Automattic present
Party for the People
benefiting charity:water
March 10 at 7pm, Stubb’s BBQ
Event Page

Automattic will also be hosting a Happiness Bar at the SXSW Trade Show. Stop by to pick up some swag, chat about WordPress, get technical support, or meet some of our colleagues.

And finally, members from the WordPress.com VIP team will be there! We’d love to catch up with you in person. If you or your colleagues will be at SXSW, be sure to let us know.

See you there!

Oscar Night with the WordPress.com VIP Liveblog Plugin

One of my favorite parts of watching live television events is the second screen experience — the running commentary from liveblogs and Twitter that stream onto my phone or laptop.

The staff at National Post were totally on top of this Sunday night, creating an incredible multimedia liveblog experience for The Oscars. Using our Liveblog Plugin, they pulled together a collage of smart (and funny!) commentary, beautiful images, YouTube clips, tweets, and even animated gifs.

We also enjoyed following along Caroline Westbrook’s liveblog on metro.co.uk’s site as she authored an impressive 150 updates over the course of the night  — pulling together a mix of tweets, videos, photos, and updates.

Not familiar with how the WordPress.com VIP Liveblog Plugin works? Take a look at this video. It’s super easy, featuring content insertion from the front-end of the site, and drag-and-drop image uploads.

The Liveblog Add-On is $500 USD per month, with an annual subscription, for VIP SaaS Hosting clients. This includes unlimited liveblogs, and an unlimited number of users visiting, viewing, and receiving updates — all powered by our massive WordPress.com cloud infrastructure. If you’re interested in using the LiveBlog plugin or learning more, please get in touch.

Recent Mobile Launches on WordPress.com VIP

We’ve been really impressed with the mobile sites that have launched on VIP recently, many of which are responsive websites. Here’s a quick roundup of recent mobile launches on WordPress.com VIP.


Screen Shot 2013-01-31 at 6.45.54 PMQuartz

Quartz’s fully responsive theme is blindingly fast, and scales whether you’re looking at it on a phone, tablet or laptop. The site looks and feels like an application. You can read more about Quartz’s innovative design here and here.


mzl.lbnlkphx.320x480-75LocalTV

LocalTV’s mobile app (available in both the iTunes and Android stores), is powered by a custom mobile theme that is wrapped into an app. It also receives “rich” push notifications, meaning they can push HTML updates.


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.