From mobile search to landing pages: Combining PWA and AMP

tl;dr: AMP pages are fast and top ranked in Google's mobile search results; PWAs offer various features in respect of performance, security and an app-like feel; the combination of both, by preloading the PWA's resources after visitors reached the AMP page, enables visitors to navigate from the AMP page to the PWA with practically no perceivable waiting time.

What is AMP?

AMP is short for accelerated mobile pages, the project was initiated by Google. Such web pages are lightweight and stripped down fast loading copies of web pages, served from Google's CDN.

screen shot of Google mobile search result

AMP pages have their own version of HTML which is similar to ordinary HTML in most parts. A main difference is that use of JavaScript is limited, instead, Google provides its own API in order to make the page interactive. Therefore the interactivity of AMP pages is limited. On the other hand, the pages are lightweight by default which makes it possible for Google to serve it from its cache.

Why is it relevant? AMP is believed to be a ranking factor in Google's mobile first index. To demonstrate this, below search terms are listed, showing how many results from Google's mobile search on the first page are AMP pages (ads and snippets excluded, accessed on October 2019):

AMP and non-AMP pages in mobile search results
search term AMPnormal
"how to make a cake?"42
"where is my key?"55
"capital of switzlerland"26
"what is a landing page?"36
"is smoking healthy?"46
"what color is a tennis ball?"55
"is google evil?"55
"is amp good?"56
"is elvis dead?"72
"is google down?"55

On a global scale, the implementation of AMP has accelerated. In October 2019, 21.98% of the top 10k websites are using AMP, for the top 100k, it's 13.1% and 5.1% of the top 1m.

Although AMP is formally an open source project, it's clear that Google is the driving force behind this standard. Considering the results of mobile searches, it's hard to deny that Google prefers AMP pages to pages that don't meet the AMP requirements.

distorted image of pink glasses with AMP logo
image of pink glasses

AMP: perceiving the web through Google's glasses

What is PWA?

PWA is short for progressive web application. It is a website with additional features such as an increased speed of on-site navigation and an app-like 'feel'.

Some features of PWAs

  • The core of the web page content is loaded first, afterwards other layers and more specific functions
  • Works offline since resources are stored in the browser cache
  • App-like feel since a start button can be installed on the user's home screen, if started from the home screen the browser toolbar can be hidden or painted in the theme's color
  • Ability to send push notifications
  • Content updated by service worker
  • Served via HTTPS
  • Since Chrome 72, PWAs can be distributed via Google Play Store, although this process is not straightforward yet

AMP & PWA

As mentioned before, AMP pages are prioritized in Google's mobile search (or others penalized). Therefore, it makes sense to target first user contacts via AMP pages. As soon as a visitor landed on the AMP page and the site has finished rendering, the service worker from the PWA is accessed and the resources of the PWA are fetched.

In case users navigate to other pages of the site by clicking on a link pointing to the PWA, the content is delivered nearly instantly since resources have been already preloaded. Since AMP pages are already blazing fast and no additional loading is needed before rendering the PWA, the whole journey of a visitor, coming from the mobile search to the PWA as the end point is characterized by no perceivable waiting time.

This implies that the preloading of the resources is done reasonably, meaning only resources are fetched, which are really needed to make a reasonable first paint - in most cases this would be the resources of pages of the highest probability of being visited next, excluding images. Another requirement is that the PWA itself is lightweight.

This demo site follows the approach to inline CSS and JavaScript in the HTML in order to reduce HTTP requests. The disadvantage of this strategy is that the CSS and JavaScript resources cannot be cached. In other words, the configuration is optimized for first time visitors as with marketing campaigns aiming at targeting fresh users.

That's it. Users coming from mobile search via an AMP page spend no time for waiting, that's the punch line. The crucial part from a dev viewpoint is the API which allows to access the service worker of the API while users are on the AMP page. Also analytics in combination with cookie consent are relatively easy to implement.