Image for post
Image for post

Why Do You Need to Use AMP & PWA to Keep Your Website Progressive

Bogdan Tokarskyi
Dec 13, 2017 · 4 min read

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.

AMP — speed it up

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

  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%

AMP+PWA

«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.

  • 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

  • 62% decrease in overall website loading speed,
  • 185% increase in user sessions
  • 3X increase in user stay times on the site.

Helpful tools

  • 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

Lalafo

Lalafo Engineering, Data Science & Business

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store