AMP vs. Progressive Web Apps: Which Is Right for Me?
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.
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.
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.
You May Find These Interesting
Google had a busy morning yesterday in ad land, making several announcements in their plans to support businesses’ recovery from the challenges presented in 2020 by COVID-19. The focus is largely on supporting local businesses connect more with customers and provide...
“We are living through challenging times.” The now everyday adage referring to the current global pandemic has presented every industry across the globe with a very human problem. For those lucky enough to be unaffected by its health implications, the threat of a...
And what does the announcement of Shops say about the future of Facebook's marketing ecosystem? Businesses around the world are seeing a seismic shift from physical retail to digital due to the COVID-19 pandemic. While it’s still to be determined what changes will...