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

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

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.

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

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.

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,

Helpful tools

The tools that helped us assess the results and correctness of implementation:

  • https://validator.ampproject.org/ for code validation on AMP pages

Lalafo

Lalafo Engineering, Data Science & Business

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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