How PWA And AMP Are Shaping The Future Of Ecommerce
There has been a paradigm shift that has taken place in last 18 months, from browser to native apps and back to the browser again. The web is undergoing a silent revolution with web apps or as we call them, PWA (Progressive Web Apps). The upward trajectory of mobile web with PWA is something that all keen marketers know by now. Accelerated Mobile Pages (AMP) on the other hand, has made it lightning fast to access content available on the web. Both PWA and AMP have revolutionized user experience on the web. Both have seen amazing adoption backed by splendid results, and have been welcomed with open arms (stats coming soon).
What leads to PWA and AMP?
While users are rapidly shifting to mobile, building an amazing mobile experience becomes an immediate concern. Mobile comes packed with its own set of challenges like high latency, flaky networks, and low attention window, pushing marketers to look for solutions that could tackle all of them.
Users who consume content on mobile had two options when it came to browsing over mobile – either browse a website via mobile web or download their app to access content. While the web offered a humongous reach, it failed to provide the required support for creating an engaging experience. On the other hand, native apps saw higher consumption but failed to manage distribution.
In the time of ‘Faster the better’, it is obvious that mobile users get irritated if a website takes forever to load. The problem is far more severe for websites which are not even mobile responsive. To top that up, once the website loads, it keeps loading, and loading, and loading making your screen jump along with it. And you wonder why you have a high bounce rate! 57% of your website visitors will abandon your page if your website takes time to load. 1-second delay in page response might lead to 7% reduction in conversions.
Let’s face it, there was a time when our smartphones were filled with apps. Now, an app loses 77% of users in 72 hours after they install it. Okay, I plead guilty, I have at least 8 apps they are just lying around in my smartphone (no wonder I don’t have space in my phone. Sigh!). This might come as a shock (not really), but half of the US smartphone users download zero apps per month.
Seems like no one is downloading new apps. While the number of app downloads decreased as the days passed, it became a major concern for brands to engage and retarget users.
Source: comScore Mobile Metrix
Now the problem here was that no one was satisfied with the way mobile web performed and users were fed up with app highjacking their mobile space. That was when the whole idea of merging the web and the app was thought of, to get the best of both worlds – keeping page load speed and user engagement as the top priority.
Progressive Web Apps
I won’t be wrong if I say Progressive Web Apps came in as a boon; a rescuer in the crucial moment when website nor apps could manage to provide users with an amazing user experience.
PWA is an umbrella term, encompassing within itself dynamic capabilities such as offline functioning (service workers), an app like engagement, discoverability, push notifications and what not! PWA looks and feels like an app with a home screen icon, splash screen, smooth browsing, good experience on flaky networks, re-engages with push notifications and is available on the windows play store.
It has all the goodness of websites as it is one click away from accessing content and is available across browsers, loads fast, provides easy navigations and is shareable via URL. It was officially announced in the Google IO 2017, that PWA will now spread its tentacles to the desktop as well with chrome android. Now that’s something to look out for.
With Web Sign In API, PWA has made it easy for users to sign-in by authenticating them swiftly. With Payments Request, it has eliminated checkout forms, fills all the credit card details, leaving the user to type just the CVV changing the entire UX with payments. It has not only made it secure but also made transaction seamless. Various payments apps are now supported making it easier for a user to make a transaction. Support for web push notifications has made it possible for a website to engage and retarget users.
- Ali Express is seeing increased engagement across browsers, with 74% increase in time spent overall and 82% conversions on iOS.
- Flipkart received 70+ higher conversions after using PWA and it lowered data usage by 3X.
- Forbes saw a drastic increase of 100% in session duration and 43% increase in session per user.
- Ola used PWA to retarget user and received 20% of PWA booking from users who previously uninstalled the app.
Accelerated Mobile Pages
53% of mobile users abandon sites that take longer than 3 seconds to load. Paul Bakaur in the Google I/O 2017 said that the users felt 0.1 seconds as instant and 1 second as natural. Yes natural! Take a moment to for all of that to sink in.
Who are we kidding, we still struggle to reach the 3-second benchmark (the struggle is real people!). 77% of all pages are likely never seen on mobile even when using 3G! Let’s not even get into 4G. We all know how flaky networks can be.
AMP came in like a shower in the hot summers. A relief for all the publishers. AMP prioritizes content loading and provides users with swift access to content. As content loads faster, the first step towards engagement is achieved. It renders everything on a page before external elements are loaded. It pre-renders above the fold and does not render anything below. As no unnecessary load takes place, the on-screen content loads faster.
AMP are cached, so they load instantly, giving users content as soon as they click on it. The publishers have control over the visual design of the AMP, so as to appear different to other AMP sites. It supports existing ad formats and deepens engagement with related articles. AMP tackles all the 3 problems illustrated below brilliantly.
AMP saves you from the super slow load and shifting of the visible content. With Scroll Anchoring, it locks down the scroll, so that the user is not disturbed while consuming content; the content doesn’t jump when the images are loaded. Scroll Anchoring prevents 3 jumps per payload.
Washington Post for which the weekly ‘search percentage’ was 53%, was able to achieve 63% after implementing AMP
PWA or AMP?
Why not both? We need to first realize that they are not competing against each other. PWA is reliable, swift and engaging while AMP renders static content super fast. They have different functionalities and can be merged for enhanced user experiences.
Paul Bakur, Developer Advocate, Google states that “APM and PWA is a combination made in heaven.”
That’s when Google with its magic wand merged both AMP and PWA to create powerful experiences for the end user. As Alex Russell puts it, the whole idea is to ‘Start Fast and Stay Fast’.
AMP provides instant loading and PWA provides better engagement
Therefore, AMP + PWA = Mindblowing user experience
PWA and AMP can now be simultaneously used for fast initiation and equally fast onward journey. AMP opens a webpage before you can bat an eye and loads content instantly without any lag. By combining PWA, once the user clicks on another link on the AMP, it drives the users with equal swiftness and provides them with immediate results. The first hop is instant and the experience gets richer as they start browsing further.
AMP up – Background bootstrap of PWA shell where user enjoys AMP. It is an instant inlined version because of the cache, any line will lead to PWA.
AMP down – Reusing AMP as a data source for PWA.
AMP does not support service workers, which means no offline functioning and no web push notifications! Once PWA is combined with AMP, the service worker warms up, and pre-caches the PWA shell and some initial data to provide a progressively enhanced experience.
Ways in which they can be combined
You need to understand which combination works best for you. Not every website needs to go all the way to merge them together. Look at these three options to choose which suits your website best.
AMP as PWA
This is when you settle for limited features for your website as you don’t really need them. Once the user clicks on an AMP page, it loads fast just like it should and if the user clicks on another link on the website, they move away from the AMP cache to the origin. But, the website still uses the AMP library, and as it is now in the origin, service workers are active, making it possible to prompt users to install a PWA version of their website for an enhanced experience. The user can also manually download the PWA of your website if the prompt does not appear. Offline functioning is also made possible for your AMP website by merging with PWA.
AMP to PWA
AMP to PWA is a slightly advanced level which will give an enhanced PWA experience for your content. All main pages dedicated to one content are published as AMPs for instant loading.
Here the PWA shell automatically loads on subsequent clicks. While the user is busy consuming content, the cache and PWA shell loads in the background. When the user clicks on another link, the load is immediate as the service worker becomes active and opens up the PWA shell instead.
What if your browser does not provide a service worker?
If there is no service worker, the users will end up hopping from AMP to AMP. Don’t sweat it out. Google has got that covered as well. ‘Without service worker, it is fast. But with the combination, it is awesome.’ Even if there is no service worker, then PWA can be implemented by redirecting and rewriting the shell URL to fall back to the domain.
Ex – Xing, a famous job search site in Europe uses AMP and PWA to send out push notifications to users.
The prob here is that if a URL is copied in PWA to share it with a friend, it opens in PWA without a warm cache. However you can change that and reuse the same domain URL space for both of these. This can be done because service workers can intercept navigation request, even when on the same domain.
AMP in PWA
Coming to think of it, AMP pages aren’t just web pages. They are ‘ultraportable, embeddable content units’, that can stand individually. The first thought you might have is loading AMP pages in frames. But frames are darn slow and you need to re-compile and load the AMP library every time.
What is the solution here?
With ‘Shadow Doc’, AMP can be easily embedded into another website. All the AMP library needs to be loaded only once to the entire PWA. One can modify the AMP source while inserting it into a shadow doc.
AMP, though it supported primarily blogs and new publishers, now with new components it has had a makeover and supports e-commerce websites.
Ex- AliExpress received 1800 followers after integrating AMP.
AMP and PWA are now used for searching on the web, to product information, to making a transaction. It is integrated with different channel platforms like Woocommerce, Shopify, Mobify, Weebly, Bigcommerce etc.
A ‘Buy’ button on the product pages is now added for swift purchase. No more tapping on the product, adding the product to the cart and so on.
Myntra, before they were on AMP, took 7 seconds to load a page, and the users had to wait patiently till everything loaded. Now with AMP, it loads its website in 53 milliseconds!
It is not only the e-commerce industry that is adopting AMP along with PWA, but even the publishers are actively seeing amazing results after combining both AMP and PWA. Washington Post even in their testing stage of PWA and AMP, saw that users accessed five times more pages than they did on the normal version.
AMP and PWA individually are doing a good job, but AMP and PWA combined are providing users with a rich user experience like never before. “Readers want instant load times, and the combination of Google’s AMP and Progressive Web App technologies allows us to offer a game-changing experience for the mobile web.” Shailesh Prakash, Chief Product and Technology Officer for The Washington Post.
Mind Blowing uh? Need more reasons to start experimenting it for yourself? 😉
This article was originally a guest post on Biztech.