AMP and PWA – A Perfect Combination of Speed and Function

Consumers have shifted away from desktop and now rely on mobile devices. And this new reality has happened faster than most brands have been able to plan for. Responsive websites of the past have reached their shelf life and a total re-think is required to capture mobile customers and revenue.

The Cost of Speed

Your customers expect a great experience – from immediate speed to a simple checkout – otherwise they quickly bounce and abandon the site. Commerce brands knows this, as they see most of their traffic and growth on mobile, yet the lion’s share of revenue from desktop. There’s a major delta between where customers are and where revenue is captured.

The biggest barrier to predictable mobile revenue is a slow and frustrating experience. According to KISSmetrics, every 1-second delay in page load time results in a 7 percent loss in conversions.

Speed kills or makes the sale.

A Digital Transformation is Underway

The web wasn’t built for handheld screens, mobile CPUs and small batteries. Brands are searching for a solution that guarantees speed and offers the functionality of a native app along with the discoverability of the web. Fortunately, a shift is underway – spearheaded by Google and a growing community of contributors – that eliminates the historic performance gaps of the mobile web.

New Technologies Emerge and Mature

Over the years, mobile website solutions have come and gone, failing to deliver on the promise of solving the lagging performance of sites on small screens. A more fundamental shift is needed to guarantee speed and performance across devices.

Fortunately, two new technologies have emerged that are leveling the playing field – and unleashing the potential of the mobile web. AMP (formerly known as Accelerated Mobile Pages) and Progressive Web App (PWA) are now mature technologies – gaining broad adoption – that deliver the speed and functionality customers demand.

A Breakdown of AMP

AMP is an open-source framework that guarantees instant page loads. While AMP was originally launched to focus on solving the performance gaps of the mobile web, the framework is frequently being used for desktop, tablet, ads, and even email. Today, AMP is a powerful framework for the web at large and can be added to any website, no matter the complexity.

The most common application of AMP is with a strategy called Paired AMP. In this scenario, AMP is applied to a website’s landing pages, in order drive more top-of-funnel, organic traffic. These AMP-enabled landing pages are distributed across all common acquisition platforms, including Google, Bing, LinkedIn, Twitter, and a growing number of others. Loading instantly in SERPs, AMPs grab a user’s attention, bringing them deeper into the buy flow.

Here’s a rundown:

  • From acquisition channels, AMPs are guaranteed to load instantly, as they are pre-rendered and pre-cached by the Google CDN. Even before a user taps on a search listing, the network traffic has transpired, creating the appearance of an instant page load.
  • AMPs receive SEO benefits, including a lightning-bolt badge next to the SERP listing and better rank position, which increases organic traffic. While Google may not reward AMP with an SEO boost, the search giant rewards speed. And we’ve measured the results. In fact, we’ve built 50+ million AMPs and consistently measure a 29% increase in traffic across all our clients.

Book a Quick Call

Let’s explore how WompMobile can supercharge your mobile experience.

Schedule Meeting

 Dispelling misconceptions

Since its launch, AMP has steadily evolved. The name changed from Accelerated Mobile Pages to just AMP, representing how the project has grown beyond the mobile web and emerged as a cross-channel framework to build for desktop, tablet, and mobile devices.

Like anything new, the AMP Project has been subject to hype, misconceptions and outright disinformation. A quick Google search will turn up articles that perpetuate confusion about its capabilities and uses. Let’s set the record straight and debunk the most common misconceptions:

  • AMP works across device types such as mobile, tablet and desktop, but it was designed to be mobile-first, as smartphone bandwidth, connectivity and hardware issues impact performance.
  • AMP works on Google, Bing, Twitter, Yahoo JP, Baidu, LinkedIn and more. Many platforms, vendors and partners across ads, analytics, content, CMS and more have also integrated AMP.
  • Yes, you can build dynamic, complex pages with AMP, making the framework perfect for retailers, commerce, B2B and any business looking to gain an edge.
  • AMP is perfect for any website, including e-commerce, having been embraced by brands including BMW, George, Providence Health, New Egg, Samsung and more. When first launched, AMP was mainly for publishers, but now any business or vertical can leverage AMP to deliver superhero speed.
  • AMP ties into all major CMS and e-commerce platforms including Shopify, WooCommerce, IBM WebSphere, SAP Hybris and more.
PWA: Blurring the Lines Between Native Apps and the Web

Progressive Web Apps (PWA) unite the best of native apps and the open web. PWAs ensure your website is fast and engaging, while offering users rich features that are synonymous with apps. By merely entering a URL – or clicking a link from search results – a user enters into a seamless experience that feels purpose-built for mobile devices.

PWAs offer an intriguing option for retailers by solving two problems at once. First, they improve performance and usability, which in turn increases mobile conversion rates. And, secondly, a PWA can replace a native app, which are rarely downloaded, expensive to build and maintain, and don’t deliver the reach and discoverability of the open web.

The End of RWD

While Responsive Web Design (RWD) played an important role to resize the web for small screens, the actual experience was – and continues to be – slow and cumbersome. In a move to address poor customer experiences, brands rushed to develop native apps. However, outside of niche applications – think Uber, Starbucks and Facebook – the value of return on the millions spent just wasn’t there. While native apps retain a loyal customer base, they don’t provide steady, measurable growth. In fact, the average number of apps installed each month is zero.

“Responsive Web design no longer meets the needs of businesses or the expectations from consumers. As more browsers add support for PWA technologies, PWA will emerge as the new standard for the Web. PWA adoption will increase customer satisfaction, leading to exponential revenue growth from mobile devices.” —  WompMobile, TechNewsWorld

PWA represents a total re-think about what’s possible on the mobile web – unleashing new UX capabilities that allow brands to better interact, engage and connect with customers.

What benefits do Progressive Web Apps have over traditional apps?
  • Eliminate the App-Store Hassle: With a PWA, there’s no need for an app store. Just like any website, PWAs are easily discovered through search, links, social sharing and all the common ways customers discover brands.
  • SEO Juice: Unlike native apps, PWAs are discoverable on all major search engines and – like a website – receive SEO benefits from following best practices. Also, since Google factors in page speed and the overall customer experience, PWAs provide an edge.
  • Not just for mobile: PWAs can be used for desktop and tablet to ensure all users are met with a feature-rich digital journey.
Do PWAs guarantee speed? No.

On mobile, every millisecond counts. Studies show it takes just 3 seconds to lose half your traffic. While PWAs offer a rich experience, performance is not guaranteed.

“Being PWA-compliant doesn’t solve for speed. In fact, you can absolutely build a slow PWA. To ensure performance, we use a development pattern that combines AMP and PWA technologies. The pattern — commonly known as a ‘Progressive Web AMP’ — unites the app-like benefits of PWA with the guaranteed speed for AMP. On mobile, milliseconds matter, and the combination offers the fastest speeds possible.” –WompMobile, TechNewsWorld

When considering a PWA, performance is a critical factor. Speed is what captures a user’s attention – the most precious resource on the web. Google announced that page speed is a ranking signal – a move that highlights the growing emphasis on being mobile-first.

So, buyer beware. While PWAs are all the buzz – and for good reason – the adoption of the web technology won’t necessarily switch on a fast experience.

Sub-Second Speed is Possible by Combining AMP and PWA

While legacy PWAs provide valuable user-engagement features, they don’t solve for speed. To unlock sub-second mobile speed, AMP and PWA technologies can be combined. A new pattern – coined by Google as PWAMP – unites the speed of AMP with the features of PWA.

How does AMP in PWA work?

As standalone technologies, AMP and PWA have inherent performance gaps. AMPs render fast but lack some functionality, and PWAs start slow but offer the reliable and rich experience of a native app. By combining the two – using AMPs as the data source for the primary pages of your PWA – these limitations are not only overcome but the effect is a superior experience. Just like that, customers start fast from search with AMP and stay fast with PWA.

Legacy PWAs are slow, while PWAMP is guaranteed fast

Legacy PWAs have limitations. Primarily, the first touch can be slow as the Service Worker and other tasks need to cold load in the background, causing the user to wait.

AMP pages are ultra-portable, embeddable content units that load instantly. They’re lightweight and pre-rendered, guaranteeing that a user’s first touch is blazing fast. While some legacy PWAs use AMPs for landing pages, once users enter the PWA they’re reverted back to slower page loads.

The PWA app shell features a fixed header and menu that loads AMPs as the content pages. And because AMP pages are pre-fetched, they load instantly throughout the customer journey.

Let’s break this down further.

AMP plus PWA combines three technologies: AMP framework, PWA components, and Service Worker.

  1. AMPs are portable content units that:
  • Guarantee fast load times;
  • Are cacheable, pre-fetched and pre-rendered;
  • Utilize the world’s largest web-component library for rich interactions;
  • Rely on the AMP-validator to ensure the critical path is not blocked; and
  • Feature the AMP badge in acquisition channels, leading to better user engagement and SEO.
  1. PWA components merge the feel of a native app with the searchability of a website, delivering rich features, such as:
  • Smooth page transitions;
  • An installable home-screen icon;
  • Frictionless, auto-fill payment options; and
  • Asynchronous background loading on the first visit and instantly on repeat visits.
  1. Service Workers intercept network requests to offer features, such as:
  • Push notifications;
  • Offline browsing to keep users connected during spotty network conditions;
  • Instant page loads with background updates; and
  • Flexible and strategic caching.
PWAMP is the best way to build mobile-first

Consider the following ways the PWAMP pattern delivers a competitive advantage:

  • Always fast, no matter what – from discovery in search all the way through checkout
  • Great distribution is built in
  • No duplicate engineering (one codebase for web, Android and iOS)
  • Less client complexity for better performance
  • And because every page of the PWA is AMP valid, it’s discoverable for display in acquisition channels.

Don’t underestimate the amount of duplicate engineering that legacy PWAs require. Because PWAMP reuses AMP pages – previously only intended for acquisition channels – there’s only one page to manage. A legacy PWA requires double the work , as AMP and PWA pages are separate engineering and maintenance efforts. The PWAMP pattern solves this development burden by offering a better approach — leveraging AMPs as both landing pages and as the primary content pages of the website.

“Thanks to the latest components, AMP pages have feature parity, offering the same functionality as responsive sites. It’s also no surprise that AMP and PWA deliver strong ROI, as customers appreciate quality brand experiences. For the first time, brands can harness the power of the mobile web and guarantee their customers are met with an elegant, fast and easy-to-use experience.” – Madison Miner, CEO of WompMobile

The Results are Clear

Brands adopting AMP and PWA are realizing real-world ROI and are finally narrowing the revenue delta between mobile and desktop. Let’s look at a few examples:

Let’s chat

Our Experience Platform is a bolt-on frontend that activates sub-second speed and supercharges your storefront. To explore how we can support your future growth, get in touch with one of our experts.