Blog

Home / Articles  / AMP vs. Progressive Web Apps: Which is Right for Me?
amp pwa accelerated mobile pages progressive web apps

With mobile-first indexing in full swing and the web being driven primarily by mobile searches, businesses can no longer afford to fall behind with their mobile web presence. Separate mobile subdomains are now largely a thing of the past and ordinary responsive websites may be headed in that direction as well. Truth be told, the title of this article is a trick question. Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA) work hand in hand. It may be that your business can benefit from both.

Although we have covered AMP in other articles (“Google Begins Implementation of Mobile-First Indexing,” “Content Optimization for a Mobile World“), a quick recap is in order. Accelerated Mobile Pages are a technology that allows pages to load very quickly, to the point that page load times should feel instantaneous. They do this by cutting out extraneous JavaScript, statically sizing page elements and using asynchronous loading.

A major benefit to using AMP is that you can improve load times on specific pages without having to redo your entire site. Simply create an AMP template for a given content type and use a rel=”amphtml” tag on the non-AMP version of the content to ensure that the AMP version is accessible to search engines. The AMP version then points back to the non-AMP version with a canonical tag.

Progressive Web Apps, on the other hand, create an app-like experience through the use of modern web features. As the name suggests, they use browser feature detection to implement progressive enhancement, ensuring compatibility across platforms. This assurance is increased by the use of responsive design, which allows PWAs to be used regardless of device form factor.

Despite providing an app-like experience, including the ability to be launched from the home screen of a mobile device, PWAs can be easily shared via an ordinary URL. Best practices indicate avoiding the use of escaped fragments (URLs containing “#!” or “#”) in favor of the same type of clean URLs that would be used for any well-optimized webpage.

PWAs should also be crawlable in the same way that ordinary websites are crawlable. Google recommends the use of server-side rendering, where all dynamic content is computed prior to being served to the user. A hybrid rendering model can be used as well, where some amount of rendering occurs after the initial page load in the form of asynchronous requests. Client-side rendering should be avoided if at all possible. If hybrid rendering or client-side rendering are used, the History API should be used to help with navigation.

Several other considerations are required as well:

  • PWAs should be secured via HTTPS.
  • Service Workers should be implemented so that the app can work offline or over a poor connection.
  • Canonicals should be used across all pages mirroring a piece of content.
  • If an AMP version of a page exists, rel=”amphtml” should be implemented, just like it would be on a normal website.

So how do you know when you can benefit from AMP and when you can benefit from developing a PWA? For content that is not too media heavy and does not require lots of custom JavaScript, AMP is an option. Although AMP is full of rich and powerful features, it is at its best with static content such as blog articles or recipes. AMP can definitely be used for e-commerce and other interactive websites, but there are limitations to work around, which might be challenging or costly in some cases.

Highly dynamic and interactive websites can benefit greatly from Progressive Web Apps. The benefits of PWAs are most noticeable when the focus is on user engagement and experience, rather than purely getting content to the user as quickly as possible. If your business model involves users coming back to interact with your site regularly, investing in the development of a PWA will be well worth your efforts.

As you contemplate whether moving forward with PWAs and AMP is right for you, some of Google’s case studies may serve as an inspiration. Both can be powerful tools to improve both site performance and user engagement, but you must be careful to implement them properly.

Sacha Moufarrege is a Senior Manager of Earned Media at The Search Agency, where he has worked since 2011. His background is in Computer Science, Information Security, Web Development and Network Technologies. Sacha's passions range from finding programmatic solutions to complex everyday problems to traveling, reading and having exciting philosophical discussions.

1 Comment
  • Greg Nason

    In my experience AMP is very limiting, so don’t expect to have more than a static page. Even a hamburger menu that slides out a navigation is not doable since both javascript and CSS animations are completely prohibited. It’s a worthwhile endeavor, just don’t expect the pages to behave anything like what you’ve grown accustomed to a mobile webpage behaving. It’s unsurprising that most of the case studies linked to are PWAs, and the one case study that I saw that did include AMP (Mynet) explained that AMP was only for “first-page load performance”, then the PWA takes over the rest of the experience.

    September 6, 2017 at 10:40 pm Reply
Post a Comment