We always consider the most performant option at the start of a project and PWAs come up very often. Your roadmap is more than just pretty pages and new features; it should be about modern infrastructure and competitive advantages that will grow your business.
If you create content or develop software for the web, you’ve likely heard of a technology called Progressive Web Apps (PWAs). In practical terms, a PWA is a type of application software delivered through a standards-compliant browser and built using common web technologies including HTML, CSS and JavaScript.
Unless you’ve implemented a PWA before, you might not fully understand the technology and probably have some concerns or questions. Mainly, can this technology grow my business and will users get the native app-like experience they expect from my brand? I’ll try and answer these questions so you can make an informed decision. TL;DR; It can.
Business growth through optimization
Let’s face it, you’re going to want to make your website a PWA because it makes good business sense. For Twitter, it meant explosive growth in engagement with the Twitter Lite app back in 2017. In fact, the main Twitter.com experience is now also a PWA, which is a good beacon for your long-term product roadmap.
“Mobile accounts for over 80% of Twitter’s usage, with many Twitter Lite users reaching the site via 2G or 3G networks. A fast user experience on first load and subsequent views is essential for enabling users to view and create Tweets as quickly as possible.“
source
Paul Armstrong, the Tech Lead for the PWA at Twitter, did a very thorough job documenting exactly how Twitter did this in the case study “Twitter Lite and High Performance React Progressive Web Apps at Scale,” which describes the importance of collecting data while tuning your PWA to maximize the performance optimizations. I can’t overstate the importance of performance on the web and how it impacts your business and, more practically, your users.
Performance is the key to growth
We often talk about business growth through the lens of performance with our customers at XWP. Typically, our collaboration aims to significantly move the client’s performance metrics in ways that will make a measurable impact on their revenue. When it comes to publishers and their advertising technology, we seek to implement a strategy that renders ads in the least amount of time with something like a Prebid Server, which reduces latency between bid request and ad selection. The strategy for a SaaS provider, however, is likely to be very different and will require many optimizations that push users through a sales funnel by unblocking their path.
With a PWA that is playing double duty as your primary business website and potentially the replacement of your native mobile app, you will need a solid strategy for both user adoption and engagement. And, depending on if you are a publisher or offer a digital product, the ways in which you optimize will require a different approach that aligns with your business strategy.
One of the reasons we offer a performance analysis as a service at XWP is because each use case has different levers to pull, and there isn’t a one-size-fits all approach to business strategy. While there are many ways to frame the conversation of performance around business strategy, the on-page implementation is essentially the same. All web products require optimizing the way the DOM prioritizes loading and rendering assets in the browser and their impact on Core Web Vitals.
Worth noting is Google’s recent announcement that, in May 2021, non-AMP content will be featured in their Top Stories search carousel if it meets expectations for Core Web Vitals and other established page experience signals. This makes site performance an even more critical consideration for publishers. In research study “Milliseconds Make Millions,” Deloitte provides data that correlates the significant impact page speed has on business metrics.
“…in the US, latency is the number one reason why consumers decide to abandon mobile sites, with 10% blaming slow downloads as a reason for not purchasing.”
source
The Deloitte study describes a direct correlation between performance and every one of the metrics they researched. The biggest takeaway is that a 0.1s improvement on mobile site speed had a direct correlation to improved funnel progression and an increase in page views, conversion rates, and average order value across all verticals. In short, don’t leave money on the table with a slow web app.
User engagement is heavily tied to performance
Circling back to the Twitter Lite case study, we can see that performance clearly plays a significant role in user engagement. After implementing their Twitter Lite PWA, the company saw several extraordinary changes to their metrics, including a:
- 65% increase in pages per session
- 75% increase in Tweets sent
- 20% decrease in bounce rate
“Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.”
source
That’s a pretty impressive set of stats; however, in Pinterest Engineering’s case study “A one year PWA retrospective,” they describe just how important performance metrics were to user engagement and provided even more compelling numbers than Twitter. Compared to their desktop app, Pinterest’s mobile app was dramatically underperforming—accounting for only 10% of their total signups. In response, they brought together a team to rewrite the mobile website from scratch as a PWA. One of the ways they were able to make it more performant was to reduce their JavaScript bundle size, which is also a technique XWP used for answers.com earlier this year to speed up their site.
“While the case study deals mostly with page load, we also cared deeply about a fast, native-like experience while browsing. The biggest driver of client-side performance was our normalized redux store which allows for near-instant route changes.”
source
By investing in a full-featured PWA, Pinterest had their expectations exceeded with some pretty amazing results. In a nutshell, all of the improvements to their mobile web experience resulted in dramatic increases to user engagement:
- Weekly active users on mobile increased by 103% overall; Brazil increased by 156%; and India increased by 312%
- Session length increased by 296%
- The number of Pins seen increased by 401%
- Pins to a board increased by 295%
- Logins increased by 370%
- New signups increased by 843%
These outcomes can’t be ignored, and underline the value of investing in a PWA. Additionally, if they were to go all-in with a merger of their native and web codebases and publish the PWA as a “Trusted Web Activity” (TWA) or in a web view, they could likely take advantage of a more indirect path to growth through reducing the costs and complexities of their development process. This is with simplicity in mind, often marching toward a single codebase that integrates your web and native technologies, ultimately meaning you can deploy higher performing applications with ease and less maintenance in the future.
Business growth through cost reduction
Progressive Web Apps can be described as “the future web is now”, where a website and native mobile app are combined in one to provide a superior solution for users, developers, organizations, and search engines. By combining your engineering efforts into a single codebase, PWAs have the side benefit of not only delighting your users but also creating efficiencies for your engineering teams—which saves you both time and money.
Reduce costs with efficiencies gained
One example of a potential cost saving is in your recruiting process. A web engineer versus a native app engineer is a vastly different talent pool, and their skillsets don’t typically overlap. What this means is that you will need to hire and maintain two or three separate teams, one for the web app and one or two for the native app(s). By simplifying your platform requirements you can find talent for all your engineering needs from the same, and arguably much larger, talent pool.
Other important areas of cost savings include delivery and project management. Having a single engineering team and product roadmap means avoiding redundant Agile ceremonies and processes that create excellent software or needing to maintain two separate CI/CD pipelines to deploy working software—making a PWA easier to manage over the long term.
Less complex is usually less expensive
The costs for development and maintenance are typically much lower for a PWA than for a native app. As well, you can reduce the time to deploy your application by bypassing the tedious approval process and high standards for acceptance in app stores. Together, this saves you both time and money. That’s not to say that you should avoid building a native app entirely, just that you should know when not to. A native app might be a better solution If your app depends on integration with other native mobile apps—like calendars or social media apps such as Facebook or Instagram—or in-app purchases that are typically handled through an app store. Though it’s worth noting that in-app purchases can be handled in a few different ways and should not be considered a blocker but a business decision. You will have to decide if the rewards outweigh the costs and how best to leverage your resources.
If a PWA can provide all the features an app needs then building two or three versions of the same application is a fool’s errand and completely bypasses the DRY principle of software engineering. All the progress made the past few years in supporting new web capabilities through projects like Chromium’s Fugu, which is an effort to close gaps in the web’s capabilities enabling new classes of applications, will open the door for a new modern web. The solutions available to us going into 2021 provide production ready options to making our web apps feel more like native apps and reducing the complexity of maintaining a web and a native app and for both iOS and Android.
Native app-like capabilities
While we mostly all agree that a PWA is just a website according to Frances Berriman and Alex Russell, and even Microsoft, it also has the ability to be so much more capable than a traditional web app through progressive enhancements. A PWA shouldn’t always feel like just a website, it should feel like a native app if you want it to and with features that function like native apps on supporting platforms.
“These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. They keep the web’s ask-when-you-need-it permission model and add in new capabilities like being top-level in your task switcher, on your home screen, and in your notification tray.”
source
Well then what does a native app feel like? In looking through the many examples of PWAs in the wild there are some that standout and provide the feel of a native app. Here are a couple for reference:
- Starbucks built a PWA which feels very much like their native app and it doubled both daily and monthly active users.
- Spotify built a new web player and deployed it as a PWA on Chrome OS and the simpler and faster web player outperformed the old one in all key metrics.
- Compatible with all modern browsers, m.uber (pronounced moo-ber) offers an app-like experience for riders on low-end devices, including those not supported by the native app—it’s also tiny coming in at 50kB, which means it can load quickly even on 2G networks.
- Twitter and Pinterest are also great examples, which I discussed earlier in this article.
In addition to these super strong consumer and social web applications, there are also some interesting PWAs in the publishing context, including Smashing Magazine and the Financial Times. But what makes all these examples feel like native apps?
It’s all about the features
Service Workers and all the various Web APIs that are provided in standards-compliant browsers or through third-party libraries are an amazing amalgamation of modern technology. It’s a far cry from the early-mid 2000s when browsers were still struggling to properly implement CSS and people used tables for visual layouts.
There is a long list of features that will make your app feel more native. I’ll cover them from a high level but if you want to read more on the topic, with examples on how to implement the technology, take a look at “Make your PWA feel more like an app”, by Thomas Steiner on web.dev. There is a rich ecosystem of PWA tools, techniques, and APIs to build near parity to native apps. However, to make your PWA standout and feel like an app you are going to want to give you users a few basic things.
- Provide an offline experience and make a portion of the content available when the WiFi and Network goes out, including playable media like video, audio, or even maps. Did you know GPS services don’t require an internet connection?
- A pretty easy feature to implement is Dark Mode, which will help provide a native look and feel along with using system fonts and color schemes, or even implementing a pull to refresh behavior.
- We can also add background downloading & refreshing with the Background Fetch API and the Periodic Background Sync API.
- Setting up snappy animations using The App Shell Model is probably one of the best ways to make it feel more like an app.
- Adding lock screen media control will ensure your playable content continues to be engaging even when the phone is locked with the Media Session API.
- What really drives growth and revenue, and should be high on your list, is push notifications using the Push API and the Notification Triggers API where you can engage your audience directly in real-time or future specified events. We implemented notification in the PWA developed for heavy.com and user engagement went through the roof—all those performance optimizations we did probably helped too.
And if you’re using WordPress, like heavy.com, you should know about one of the projects we partnered with Google on, which was to build the PWA plugin for WordPress alongside their amazing team of engineers. The plugin makes setting up a PWA for publishing very simple and can, even with a basic implementation, help with performance. The plugin can also be used to create a native app experience once you have a solid strategy ready to implement.
You should be focused on developing and delivering a reliable PWA first, then adding progressive enhancements with your service and web workers. All devices, even low-end ones, will have a significantly better experience. Update features based on your roadmap and business strategy, collect lots of data, optimize your performance metrics, rinse-repeat, and document your business growth. Then write an amazing case study on your organization’s success with PWAs so the world can read all about it.
