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.

New: WordPress Plugin for Facebook Instant Articles

InstantArticlesWordPressHero

Facebook has announced that its Instant Articles program will be open to publishers “of any size, anywhere in the world” starting on April 12, 2016. And with the free plugin we’re unveiling today, you’ll be able to prepare your self-hosted or VIP WordPress for the demands of this new channel.

Install it now from GitHub (it’s also coming soon to the WordPress plugin directory).

Instant Articles, now available to people using Facebook for iPhone and Android, load articles in Facebook’s News Feed up to ten times faster than standard web articles, and are optimized for the mobile reading experience.

The native format includes a built-in set of interactive tools like auto-play video and tap-to-zoom image galleries, bringing stories to life on mobile devices. Early analysis suggests that people engage more deeply with the immersive experience and share Instant Articles with their friends more often than standard web articles.

We’ve been working with Facebook, and VIP Featured Partner agency Dekode, on a plugin which takes care of the basics. Activate it, and you’ll have a compliant feed of Posts, wrapping your core content in the markup Facebook requires.

How it works

InstantArticlesForeignPolicy

Facebook has a review process where they verify that all Instant Articles generated from your website are properly formatted and adhere to their community standards and content policies before you’ll be able to start pushing content to the platform. (You can get more information in our Instant Articles FAQ.) Instant Articles generally should contain all the content a person would see in the web version of an article, so if you have extended the standard WordPress Post template in any way, it’s likely that you’ll need to extend the plugin’s default output too.

If you find any problems in our plugin, please send your feedback as an Issue on GitHub. And if you write a compatibility layer for another popular plugin, we’d encourage you to share it with the WordPress community via a Pull Request.

The Instant Articles program is one of several current initiatives that aim to bring improved speed and performance to the experience of reading news on your mobile device. We are thrilled to be working with Facebook on making it easier than ever for WordPress publishers to reach and engage their audiences in new ways.

Learn more at Facebook.

WordPress Support for Apple News

apple-news

Today we’re excited to announce the addition of Apple News support for WordPress. News is an all-new app built right into iOS 9 that delivers news and magazine stories to millions of readers. Publishers can create beautiful layouts with custom typography, photo galleries, videos, and animations—and with support for News now tightly integrated into WordPress, you only need to author once and your content will automatically be optimized for iPad, iPhone, and iPod Touch.

For WordPress.com VIP customers, you can enable the plugin from your WordPress dashboard, or directly in your theme. It’s also available on Github.

We’d like to thank our friends and partners at NY Post and Alley Interactive, as well as the team at Beezwax, who spearheaded, sponsored, and built this plugin—and have generously made it available for everyone in the WordPress community to use.

Apple News Format is Coming Soon
Apple News Format is not yet available to everyone. Click here to sign up as a publisher and get notified when Apple News Format becomes available.

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.


RIM’s BlackBerry blogs join WordPress.com VIP Services

We’re excited to share that RIM’s BlackBerry consumer blogs are now on WordPress.com VIP Hosting!

We also had the chance to stop by the BlackBerry PlayBook party at the South by Southwest conference this past week and we know they have big things in store and we’re excited they’re using WordPress as their corporate communication tool.

Welcome to the WordPress family!

If you have a BlackBerry, don’t forget you can use the WordPress for BlackBerry application to post content to your WordPress site from wherever you are.

[Go to the Inside BlackBerry blog]

[Go to the Inside BlackBerry Help blog]

[Go to the Inside BlackBerry for Business Blog]

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

WordPress Mobile Options

Looking to blog from your mobile device ? You are in luck ! WordPress offers lots of different ways to keep blogging even on the go.

On WordPress.com we have m.wordpress.com. It’s a very light and speedy version of the admin dashboard, and works well on smart phones like the iPhone, BlackBerry and Treo.

On the mobile WordPress.com site you can post, manage comments, see stats, and basically do everything you normally would do. Just point your mobile browser to m.wordpress.com and login with your username and password.

For self-hosted WordPress there are several plugins for mobile usage including WPhone and the iPhone / Mobile Admin plugin:

Mobile Admin adapts the WordPress admin UI to be more friendly to mobile devices, specifically phones.

The iPhone / iPod Touch browser was the first target, but most other mobile browsers are supported at a basic level, and plugins can be used to customize for specific browsers where desired.

In addition, there are a ton of exciting mobile WordPress projects being worked on within the larger WordPress community — stay tuned !

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.