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.

Tuning Your SQLite With SQLDelight & SQLBrite: Part 2

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:

1. 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.
2. 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.
3. 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%

Migrating an Operational Project to Microservices

AMP+PWA

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:

• Not being able to use custom JavaScript on AMP pages which made us drop some features and animations.
• Not being able to use our website’s analytics gathering tools as they’re created using JavaScript. On the other hand, AMP allows for easy access to Google Analytics.
• 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.

Results

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.

Our battle with the OutOfMemory army

Helpful tools

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