Why Do You Need to Use AMP & PWA to Keep Your Website Progressive
Loading speed is super important for a website/application. AMP+PWA technologies make it possible to boost website’s loading time to just 1 second and even work with it offline. We’ll talk about how these technologies worked for an international marketplace with over 3 million unique users.
70% of our web-users use smartphones and tablets to access the marketplace. We decided to investigate AMP and PWA as instruments to speed up loading of a website, boost user engagement and increase conversion.
In a previous post we considered how we can make our database observable and how to get Rx support. Today we’ll talk…medium.com
AMP — speed it up
Loading speed for an AMP format website is less than one second. Just think about that — AMP basically gives users instant access to your website.
We were interested in making our mobile site even faster. To determine where we need to speed-up loading and search, we used Google Analytics. The data we received showed that 90% of users visit the main page, listing and the actual ad page. This led to a decision to apply AMP to all those pages.
Thanks to AMP we:
- increased loading speed for Google search result by 3X
- increased user stay time on the website by 3X
PWA — keeping the app/website at hand at all times
Progressive Web Application (PWA) provides a wide range of capabilities for using innovations in online apps. When we learned more about the technology, we decided to implement the following:
- Web app installation banner. The first thing users see when they enter our website. Using basic manifest file manipulations, we suggest users to add a shortcut to our site to their phone’s main screen.
- Online notifications. Subscribing to these allows users that only use our website’s online version to keep track of all our news and events. It’s also possible to subscribe to push-notifications using the desktop version of our website.
- Offline. Caching files using a service manager allows our users to remain on the website even without an internet connection. The main idea is that all the pages users visited are cached and, should the Internet connection drop, they would still be able to see recently viewed pages and retain the information they have.
Together, these technologies did a great job of completing the task at hand: boosting user engagement and increasing the number of sessions by 185%
Dmytro Nemesh — CTO at Lalafo, over 7 years of experience in PHP/Java/Node.js, volunteer at GeekHub — on how a mobile…medium.com
Diving deeper, we investigateds different ways of PWA implementation and decided to use it in conjunction with AMP on one of the scenarios proposed by Paul Bakaus at the Google I / O conference ‘17.
«A good strategy is to make the entry point into your site an AMP page, then warm up the PWA behind the scenes and switch to it for the onward journey.»
Using both AMP and PWA together, increases a website’s loading speed and keeps it operational in case internet connection is gone. It’s made possible by AMP pages caching files to be used in PWA later. Thanks to PWA caching, one can see previously viewed data even without Internet connection.
However, not everything is as easy as it may seem.
The main challenges we faced while implementing this workflow were:
- Implementing AMP left us with two versions of pages — AMP and PWA ones — which made it more difficult to correctly count user sessions, conversion indexes and cancellations.
AMP and PWA provided a better workflow for our website. It was not hard, but we did have to spend a significant amount of time on analytics and understanding the tasks we needed solved. The effort, however, was absolutely worth it in the end, as the results were:
- 62% decrease in overall website loading speed,
- 185% increase in user sessions
- 3X increase in user stay times on the site.
In the world of startups and rapid mobile development, developers can drown in an ocean of new features and forget…medium.com
The tools that helped us assess the results and correctness of implementation:
- https://validator.ampproject.org/ for code validation on AMP pages
- Lighthouse tool, for performance, accessibility, progressive web apps, and more
- Google Analytics for tracking analytics on amp and pwa pages