A Guide to AMP and PWA's

Tools & Trends Article
20 mins

AMP and PWAs are sure to be two of the most-discussed content marketing topics over the coming year. In this guide, we’ll give you the key info on both, including succinct definitions of AMP and PWAs, and how you can use them to deliver content. We’ll also discuss the distinct ways AMP and PWAs can be used to help achieve marketing objectives, especially with regards to SEO.

What is AMP Project (Accelerated Mobile Pages Project)?

AMP stands for accelerated mobile pages – and fundamentally, that’s what it gives you.

AMP pages deliver essentially the same content as an existing webpage, such as an online article. The content is delivered to mobile users in a simplified format, based on a unique language called AMP HTML, which combines simple elements of HTML and CSS, and restricts the use of JavaScript. This means AMP pages load far quicker than the original webpages they are usually based upon.  

Mobile search users were first able to access AMP content in February 2016, when Google started delivering AMP versions of webpages in search results. At the time of writing, AMP content within the mobile search results pages is delivered in both carousel and featured story formats, in each case allowing the user to swipe through relevant content from multiple sources. The content is signposted in Google search results with an AMP icon depicted as a white lightning bolt in a blue circle.

The easiest way to produce AMP content, suitable for delivery in Google AMP search features, is to edit the HTML of existing content into AMP HTML, then validate the page and prepare it for discoverability. Amp.dev offers developers a simple tutorial on how to convert an HTML page into an AMP HTML page.

AMP pages almost always relate canonically to other pages. This means their URL has a ‘canonical’ rel tag that tells search engines the page is the same as a page on your website. The non-AMP version of the page has primacy from an SEO perspective.

There is a key exception to this rule, in the form of AMP-only websites that are now being created by some online publishers.

John Mueller, a Google Webmaster Trends Analyst, has advised webmasters, that AMP-only websites can be a good thing:

“I don’t see an issue with using an AMP-only site – it’s a great framework to make fast sites relatively easily. Since it’s essentially HTML, it’ll work the same as any other HTML page. It’s awesome to see more AMP-only sites pop up, it can make things so much easier (for crawling, indexing, & SEO in general) when you just have a single URL for each piece of content!”

If you’d like to test an AMP-only site of your own, we recommend setting it up on WordPress and using the AMP for WP – Accelerated Mobile Pages plugin.

AMP is an ongoing, open-source project with applications in email and ads, as well as web content. For complete, up-to-date information on the project, visit Amp.dev

What are PWAs, and why should I start using them?

A progressive web app (PWA) is a web app that augments a webpage with features and user experience (UX) elements which have traditionally been found mainly in native apps. In other words, they make web content act like app content.

The PWA user experience has the following steps:

  1. User opens the PWA page via their mobile device. It acts like a normal webpage;
  2. User receives a prompt to add the page to the home screen of their device;
  3. User accepts the prompt. The page will then appear and act as an app on their home screen.
  4. Ongoing UX of the website/PWA has elements typical to native app UX.

Turning web content into a PWA is a job for your web developer, requiring competencies in HTML and JavaScript.

Google has extensive criteria for what constitutes a ‘Baseline’ PWA or an ‘Exemplary’ PWA.

Baseline PWAs:

  • Are served over HTTPS
  • Are responsive on tablets and mobile devices
  • Contain URLs that will all load offline
  • Provide metadata for ‘Add to Home screen’
  • Load fast, even on 3G
  • Work cross-browser (including in Chrome, Edge, Firefox and Safari)
  • Provide fast transition between pages
  • Have a dedicated URL for each page

Satisfying these criteria is crucial to a PWA (or would-be PWA)’s viability and potential reach in Google Chrome.

The criteria for Exemplary PWAs are more in-depth. See Google’s Progressive Web Apps Checklist for complete information.

PWAs offer a number of benefits. After the first load, they usually load content faster than most traditional webpages can. This helps retain the user’s attention as they navigate through multiple content items, as it narrows the window of time where they might navigate away due to content loading slowly. If you’d like to encourage users to consume a series of content items consecutively, it would be a smart bet to deliver that content via a PWA.

Another key advantage is that PWAs can give brands an ongoing presence on the home screen of the user’s mobile device. This opportunity is timely, as many publishers are struggling to compete in a crowded native app market where app retention after 90 days is as low as 4%, and users are spending 77% of overall app usage time on their top 3 apps (source: App Download and Usage Statistics (2019) – Business of Apps).

PWAs are a potential game-changer for publishers targeting jet-setters or rural readers, as they can load content while the user is offline.

One potential downside to PWAs is that they sometimes seem to perform unpredictably in Google search results.

According to Ignite Visibility sites aiming to get content indexed by PWAs for SEO purposes should “either have an HTML base and load the progressive web app over that, [or] use a tool like prerender.io and/or pushstate.”

The community-driven website PWA Stats maintains a live list of statistics on the results brands have produced through switching to a PWA, from Tinder’s reduced load times to increased revenue for Best Western.

What is the difference between AMP and PWA?

There’s a common misconception that AMP and PWA are rival technologies serving the same purpose.

While it’s true that a key role of both technologies is to load content faster for the user, AMP and PWA have distinct strengths, weaknesses, and tactical uses from the marketer’s perspective.

AMP pages offer unbeatably fast load times at first click. This makes them ideally suited for attracting new readers, as the likelihood of users bouncing due to slow loading is reduced. They also have excellent discoverability within Google search results. However, AMP does not support advanced platform features like dynamic content and push notifications.

PWA pages load relatively slowly at first load, but then load very quickly from the second load onward, which can yield better load times and reduced bounce rate in the ongoing relationship between the reader and your content. Furthermore, PWAs can support advanced platform features like dynamic content, offline browsing and push notifications, thereby providing marketers with more ways to influence user journeys and increase conversions.

Online publishers can combine the benefits of AMP and PWAs by using the two technologies together. Instapage describes one such approach its article on PWAs vs AMP:

“[Think] of your AMP page as the hook to your website. It catches the user with an instantaneous load, then reels them into your progressive web application. This allows you to combine the quick-loading AMP pages with a [..] dynamic PWA.”

Another option is to enable PWA features within an AMP page.

Alternatively, you might choose to develop a PWA using AMP. This method is based around writing a PWA in AMP HTML, and using a component called amp-install-serviceworker to enable advanced PWA functionalities.  

Which option is better for SEO and search rankings: AMP or PWAs?

In our view, the answer is a bit of both, as AMP and PWAs both help with SEO in different ways.

PWAs make site content more engaging, and can therefore increase users’ level of content consumption. Meanwhile, AMP decreases bounce rate by greatly increasing mobile page loading speed.

In both cases, there is an improvement in feedback to Google on key webpage ranking factors, which play a role in determining search rankings and overall search visibility for the page and its domain.

So, the best approach from an SEO perspective might be to use AMP and a PWA in combination, as discussed in the previous section of this article.

What’s all this I hear about controversies surrounding AMP?

While there’s no doubt AMP is a powerful tool for distributing web content and getting it to load faster, you should be mindful that there is significant controversy surrounding the project.

Some commentators view AMP as a way for Google to negate online publishers’ websites and usurp their content, locking users into an experience that is optimised for, and based within, Google.

As The Register writer, Scott Gilbertson, puts it:

“It’s not really about speed. As with anything that eschews standards for its own modified version thereof, it’s about lock-in. Tons of pages in Google AMP markup mean tons of pages that are optimized specifically for Google and indexed primarily by Google and shown primarily to Google users. It’s Google’s attempt to match Facebook’s platform. And yes, Facebook is far worse than AMP, but that doesn’t make Google AMP a good idea. At least Facebook doesn’t try to pretend like it’s open.”

Furthermore, AMP pages are shown without the publisher’s own URL and elements of their own branding, effectively disassociating the content from its publisher.

Perhaps the strongest argument in favour of using AMP is for publishers. Many of the world’s leading media content producers are using it, from mainstream news providers like The Guardian and Daily Mail, to special-interest publishers like Wired and Social Media Today. This begs the question: if the leading publishers in your field are using AMP, can your publication afford not to?

For more insight on the controversy surrounding AMP, check out our Digital Marketing Podcast episode on how to build fast websites, which features an interview with Raven Tools co-founder, Jon Henshaw.

Are progressive web applications (PWAs) the future of apps?

In December 2019, TechCrunch reported the astonishing finding that the top 1% of app store publishers are driving 80% of new downloads.

This paints a bleak picture for digital publishers who want to access the benefits apps can bring, which include a sustained brand presence on users’ mobile devices, increased user engagement, ownership of the platform, full analytical access, and perhaps most importantly, optimal mobile UX.

Against the context of dwindling native app downloads, PWAs seem to offer by far the best way for all but the biggest online publishers to access these benefits. They work around the reluctance of web users to install an app from an app marketplace, instead transitioning them to an app within an ordinary webpage experience.  

Native apps are still growing in terms of global downloads and usage times, and in that sense, they arguably remain the future of apps. This comes with the caveat that the growth is being driven by a powerful minority of leading publishers. 

That said, it seems that PWAs could play a huge role in the future of mobile content consumption – a field in which the UX advantages of PWAs could drive increased uptake of the technology among readers and publishers alike. 

Conclusion: how should marketers be acting upon AMP and PWAs?

The proven potential of AMP and PWAs to improve aspects of content performance and UX suggests these technologies are an important avenue for online publishers to investigate.

AMP is the easier of the two to test at a limited scale: you can simply convert a few content pages to AMP HTML and observe the results (within the confines of the relatively limited analytics Google provides for AMP publishers). A PWA implicitly commits the publisher to provide an app-style experience to its readers on an ongoing basis, and therefore should not be undertaken lightly.

On the flipside, PWAs seem to offer relatively undiluted benefits, when compared with AMP. Returning readers get faster loading times, plus the advanced, app-style features AMP lacks. Crucially, the publisher maintains greater control and ownership of the content.

Our advice to online publishers considering AMP and PWAs is to start by testing AMP with a few content pages, and to thoroughly investigate the option of rolling out a PWA at scale. Whether used alone or in combination, the two technologies seem likely to figure in how mobile users consume web content for years to come.

Build a ü free personalised ¥ learning plan to see our course recommendations î for you

Free for 30 days

Build a å free personalised ¥ learning plan to see our course recommendations î for you

Free for 30 days