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
“Values-driven engagement is a crucial pivot in the way consumers will evaluate brands today and, in the future, and those that don’t adapt risk substantial loss in customer loyalty.” What seems like forever ago - before the global pandemic, the Black Lives Matter...
What Will Future Data Strategies Look Like? Top 10 Takeaways from our “Managing Complex Change” Series Panel
On August 6th, the agency hosted a panel discussion to dive into what the future data ecosystem will look like, given the intense focus on first party data and how the landscape is changing due to the death of the third party cookie, global privacy regulations and...
This article originally appeared on The Stagwell Group's website. A few weeks back, experts from global brand performance agency ForwardPMX and digital-first creatives Code and Theory led a virtual discussion about key strategies and tactics for Conversion Rate...