AMP vs. PWA - Choosing Right for Your Business Website

By: Rahul Kachhadiya, Jun 27th, 2019 # PWA

Blog Banner AMP vs PWA

If you are a web developer from the current generation, there’s a high possibility that you’d get the feeling of drowning— courtesy to the millions of developers and billions of web pages.

Of all the web pages on the internet, you have the pressure to perform or perish, and it’s to grow because the number of mobile devices and the need for the immersive web-experience are rearing up at a rapid pace.

But why would you do that? What would fuel you to do that?

Well, it’s the love of Google for its users and not you.

Google indexing probably hates you if the web pages are not user-friendly at the first hop.

It wants to make the search results more mobile-friendly for the users, and if you refuse to work on it— your page indexing is to suffer.

The first and foremost essential criteria for the mobile-friendly webpage is— faster page browsing.

It has everything to do with your existence because a low page load time would affect everything related to your revenue.

With the cornucopia of streamlined content including the videos, images, gifs, and other files; the size of web pages have grown in 2 decades, and so does the page load time.

Let’s see how web-development has evolved in two decades.

1999— the simple web pages.

Not long ago, the web development process was way too easy because web pages were elementary, and if there were any complexity— they were in the backend.

But in the front end— you only had HTML, maybe a part of CSS, and a gorgeous little scripting language, i.e., Javascript.

Back then, Javascript was a toy language— you were hailed as a great script writer if you knew the basic commands for changing the colors of the buttons and labels by merely hovering the mouse over them.

That was pretty much the Javascript.

Here was the recipe for making web pages— as easy as it gets.

  • Make the HTML markup.
  • Sprinkle some CSS (if needed).
  • Publish it at cheap servers.

That’s it— you didn’t have anything like slashdot effect, and the developer would think that they could do everything. Wow! Things were straightforward.

But now, things have changed.

2019— the complexities around web pages.

As you can have fully-interactive frontend with the help of the myriad of the framework, all the types of Javascript, and Webpack; the complexities around the web pages have leaped up like never before.

The recipe for a good, interactive, and user-friendly web page needs a lot of ingredients.

The recipe looks like this.

  • Making the HTML markup.
  • Sprinkling the CSS.
  • Choosing the ‘build tool.’
  • Adding the ‘babel.’
  • Appending the ‘web pack.’
  • Deploying the generators of all the kind.
  • Adding react.
  • Relying on better CDNs for averting the slashdot effect.
  • Series of complicated steps...
  • Publish at expensive servers.

So, you need a lot of things to compete in the current landscape.

And it’s not just about the content, because Javascript has also grown huge with its code block handling thousands of scripting.

Besides that, if you are handling mobile web, desktop web, native iOS apps, native Android apps, etc., the complexity around the code may kill your efficiency making users pay the ultimate price of your convenience.

So, is there a smarter way to get out of the intricate web development which takes care of the page load speed, user experience, reliability, etc. at the same time?

Well, you may ask that “if there are so many complexities in building a web application, why not go for the latest fad in the form of native applications?”

Here’s the catch.

There’s no way native applications could replace web-pages, and if revenue is a concern; you shall check these stats.

  • Most of the customers fork out more than 80% of their time on big 3 or 4 applications such as Facebook, Gmail, WhatsApp, etc.
  • An average user installs or downloads ZERO (0) application in a month.

As native applications accompany horrible statistics— you can’t promote your business entirely through applications.

And we are not done with the statistics yet.

  • When a page loads in 0-2 second, it feels instant and natural; however, Google states that the average page takes more than 15 seconds to load— which is way beyond the natural feeling.
  • 77% of the mobile web pages take more than 10 seconds to load, and it’s stated that the user loses attention by 3rd second never to return.
  • It means that 77% of the mobile web pages are never opened on mobile because users toggle even before the page loads completely.

Combining both the statistics, it is where AMP comes into the picture for resolving all the problems.

AMP— Accelerated Mobile Page

About AMP

  • Accelerated Mobile Page— an approved technology by Google— fastens the content streaming in the mobile environment.
  • It’s an open source built on Javascript for faster-page loading and getting over non-responsive and shifting content.
  • It’s usually used for the first landing page where user hops for the first time— the page which eliminates ten times the data of the regular web pages.
  • The idea of reducing the content in the first page is to deliver the informative data to the busy user at one go.
  • Google wants mobile-searches to be user-friendly without compromising with the way content behaves with the users, page load time, etc., and AMP does it everything.

With AMP, here’s how the complicated recipe has pruned down in 2019.

  • Making the HTML markup.
  • Sprinkling CSS.
  • Publish.

With the above recipe, it looks like we had rolled back to the good old times— the times when we really had an inexpensive deployment model.

Features of AMP

  • It minimizes the load time and speeds up the website.
  • It complies with the mobile SEO requirements.
  • The website developers have complete control over the interactive visual design without any hassle.
  • It also supports ad infrastructure of all formats on the web pages.
  • The caching and loading of web-pages are relatively easy with it.
  • For the content-based websites such as news and editorial portals, the web pages load four times faster than the usual because it trims excessive data and highlights “breaking news” through the carousel or other components. 

To check whether the highlighting features of AMP really assist a website, let’s take a use case.

Use Case of AMP

MyNet— one of the famous publishers of Turkey uses Accelerated Mobile Pages in the form of pre-rendered carousels which gives the feeling of immediate loading in a wink of an eye.

With AMP as the significant developing component, the company released vital statistics regarding their operation.

Here are they:

  • Encouraging AMP-based web page hiked revenue per article page view by a massive 25%.
  • The average page load time went shooting fourfold.
  • A reader spent 43% of longer average time on the website.
  • The page views surged by 34% per session.
  • The bounce rate on the web page got reduced by 24%.

The stats clearly indicate that AMP takes the user experience to a new level, and as it promotes the content on the landing page of a search result (Search Engine Result Page), you can outrank your competitors who haven’t taken the need of the hour seriously.

Having a great run with AMP, a web developer can’t think of publishing a website without it; however, AMP has certain limitations.

The limitations of AMP

As mentioned above, since the idea of using AMP is to have faster-browsing speed, the major information on the page is trimmed.

With AMP abolishing information, it may also remove the code and javascript which may further incur problems which are:

  • It may make user traceability a hell of a challenge on AMP pages. 
  • With abolishing data and code, it won’t allow you to access dynamic content on the web-pages of e-commerce portals.
  • The content will only load when you scroll down to the lower fold of the page.
  • The search engine rankings may take a huge blow.
  • Your webpage has nothing to do with other JavaScripts other than the ones in the AMP library.

Other problems such as lack of JavaScript and no support to dynamic content already make AMP technology of a limiting background.

While AMP solves the partial problem regarding the page load time, it has a lot to offer as shortcomings.

Interestingly, you may earn a user’s attention for the first time using AMP; however, you may not get a perfect result related to the average time spent per visit.

More because users have a complex requirement. Who are the users?

For me, “users are the ones who want to get ‘app-like’ feeling without having to download, install, or open the application.”

If you mull about it— it’s a sheer challenge. How on earth could you possibly provide app-feel without making your user jog through the actual application?

It’s a source of annoyance as your users don’t want to download applications, and they want app-like touch on the web pages.

But hang around.

Progressive Web Applications can do what AMP couldn’t.

PWA- Progressive Web Application.

About PWA

  • Progressive Web Applications are nothing but the web pages which look and function similarly to the native apps.
  • You spray in little technical nutrients and vitamins on the web pages, and they work like Android or iOS native applications.
  • You use web APIs, the new features which the browsers support, and modern technology to ensure that the website looks as interactive and responsive as the native applications. 

Salient features of PWA

Focusing on the “app-like” feel as a salient feature will be an injustice to the potentialities of PWA.

PWA has multitudinous benefits other than to make the web-experience immersive.

They are:

  • Not just mobile phones, but with PWA, you can interact with the website in an app-like manner in other portable devices like tablets, laptops, and even computers. Hence, the design-build over PWA technology is compatible with all the tools.
  • It doesn’t play bias with any user. It works smooth and seamless regardless of the browsers.
  • With the poor networks, you wouldn’t have to worry about page load because it works reasonably well on the offline mode.
  • The content loads faster which ultimately means that the page load speed gets accelerated.
  • It offers a safe and secure accessing channel through https.
  • You can share the URLs and link with ease.
  • Although PWA allows webpages to behave like applications, you won’t have to install or update it for the latest feature. Instead, you can access the most recent features without wasting your data in updating it.
  • You can add webpage on the home-screen pretty much as you do with applications.
  • It respects your budget and prevents holes in your pocket.
  • You’ll get a homogeneous experience across the channels. 
  • You can make the most of it through other application like features such as push notification, dynamic content update in the background, caching the content, etc.
  • You will get significant help in indexing your web-page on the Google SERP.
  • The complexity in developing is almost nil if compared to the development of native applications.
  • With the limited developing efforts and time, you can reach places. 

PWA unleashes all the powers for creating an app-like environment for web pages. To confirm the same, let’s take a use case.

Use Case of PWA

Rakuten— one of the leading Japanese recipe websites— earned a massive name in a few years of its launch.

If you want to measure the reason for their success, learn about their PWA approach on the website.

It’s basically a three-step process.

  • The user finds the Rakuten content on the search page.
  • The service worker installs in the background.
  • The user gets immediately advanced to the PWA page.

Incorporating PWA techniques with application-lookalike features such as “push notification” and “adding webpage as tiles on the home screen,” the company revealed vital statistics.

With “push notification,” they observed:

  • Over 3.3 times per week sessions per user after the first week, i.e., three times more re-engagement.
  • The re-engagement increased by four times after the second week and a massive 5.3 times after a month.
  • The bounce rate of the users who entered to the webpage through push notification was way too less (75%) than the ones who stepped in through social media and other sharing options.

With “add to the home screen,” they found that:

  • The visits per unique user went up to 70%, i.e., 1.7x.
  • An average user viewed 3.1x pages per visit.

You got to believe in PWA if you are eyeing at user re-engagement, faster check-ins, and check-outs, and if you are trying to sell a lot of stuff— in case of eCommerce.

As it aids your website to pretend as an application, you can satisfy the users who have half-commitment towards application (read it in a funny tone)— “we love apps, but we don’t want to download them as they consume a lot of space.”

Though PWA brings a lot of flexibility and reliability for the websites which endorse dynamic content, you can’t sideline its limitations.

The limitations of PWA

  • The functionality of PWA is not symmetrical on all the operating systems. For example, iOS-based mobile devices can’t enjoy important PWA features such as push notifications and shortcut tile to the home screen. Similarly, it doesn’t support all the android devices.
  • It doesn’t support native call features like sending and receiving SMS/MMS, making phone calls, going through the voicemail, or stashing the user details like a phone number.
  • You can’t access other native features like alarms, camera, calendar, phonebook, browser, etc.
  • Not all browsers are kind enough to support the PWA based webpage.
  • It doesn’t support cross-app logins.
  • It also doesn’t go well with all hardware functionality.
  • You can’t access other sensor and hardware features like atmospheric pressure sensor, proximity sensor, accelerometer, etc.

When to use AMP and PWA

It’s like comparing apples to oranges because AMP brings the user to the website while PWA sticks the user to it.

Have a detailed look.

AMPPWA
If you wish to target the audience who are seemingly busy and want to convey essential details as soon as they land on the webpage, it has to be AMP. If your target audience wants to access dynamic content but with faster page load time, it has to PWA.
You can use it for gaining the first attention of users by quickly loading the page. You can use it when you have successfully attained user attention and are looking for healthy engagement.
You can’t rule it out if you don’t want the user to bounce off your web page in the first few seconds. You can’t rule it out if want user to enjoy seamless experience once they have settled on your webpage.
Use it for pre-rendering your page for instant loading. Use it for instant loading without pre-rendering any page.
It will suit you if you want static content in a profession such as publishing or newspaper. It would fit your requirement if you want millions of users to render to a dynamic page in cases like e-commerce.
It doesn’t give you an immersive-app like feeling. With push notification, home tile shortcut, and other features, it’s a trending app-like webpage.
It can be applied on the landing page because it doesn’t depend on the technology called service workers— the client side proxy. Hence, the loading of the first page is very quick. The service workers kick in only after the second request. It means that the first page will take time to load when the webpage has PWA.

Choosing between the two

Now that you know the features of AMP and PWA— the question is— what should you choose for your website?

Well, the reason for the accouchement of both technologies is to make mobile surfing a phenomenal experience.

Going by your content type, that is, static or dynamic— you may choose the suitable technology for you; howbeit, how about changing your concept to— “starting fast and staying fast?”

Yes, you can start fast, and you can stay fast as long as you want if you integrate AMP and PWA on your website.

  • If you only choose to use AMP, you will start fast because it triggers the page load in the first request itself; however, it may not guarantee a great user experience in the later part of the surfing (which doesn’t keep your website fast).
  • Contrary to AMP, if you choose to use PWA, you will start slow as it has service workers which trigger the page load on the second request, thereby affecting the swift entry of the users on the landing page.

But if you plan to use both, here’s how entering and staying on the website will look like:

  • As soon as you find and click the content on the search page, you will be redirected to the landing page (which uses AMP) in a jiffy of a moment— credits to the non-service workers. It’s where you start fast.
  • Once you land on the dashboard, you can experience the app-like environment which furthers the healthy interaction on the web page with fast-page loading time (which use PWA). It’s where you stay fast.

So, which side are you? AMP or PWA? Or both. What are you getting for your website? Looking at their integration a massive hit, PWAMP is the future of our mobile world.