AMP vs PWA

In this article, we dive deep into mobile optimization practices and compare AMP vs PWA for optimal mobile user experience.

Over the last few years, there has been a huge growth in the number of smartphone users. Take a good look around and you will soon realize that mobile phones are literally becoming an extension of ourselves.

Today, more than 60% of total internet usage is happening in mobile. It makes total sense if you think about it – mobile devices are more portable, cheaper and easier to use than any PC.

And with this technological shift unfolding in front of our eyes, one question becomes increasingly important.

How can businesses optimize their websites for the best mobile experience?

Why optimize your website for mobile

The answer is simple – Because of mobile-first indexation.

Ever since Google announced that they will be ranking pages in a “mobile first” fashion, webmasters and businesses have been trying to wrap their head around what this could mean for them.

So, how can we make our readers not only visit our page but also fully engage with it?

Truth is, there are many ways to deliver an optimal mobile experience, both on the aesthetic side of things and from the speed of deliverability.

Preparing your website for mobile optimization

If you still haven’t optimized your pages for mobile readability, you need to catch up quickly.

Parity Audit

To start, it may be a good idea to carry out a parity audit and see what content Google is crawling for both versions of your website. You can use a tool like Screaming Frog to discover potential differences between desktop and mobile versions. You can use the results as guidelines for the next steps.

The process of doing a parity audit is fairly simple. Here are the steps you need to take:

Step 1: Using Screaming Frog, crawl your site as a desktop user:

Hover over Configurations and click on Spider to select your settings. The minimum you’d like to be looking at for a basic crawl are the ones selected in the image below.

Then, go to Configurations, click on HTTP Header and select User-Agent.
Click on OK, run the crawl and Export an “All-URL”(button on top-left corner) report in an Excel Sheet.

Step 2: Repeat the process, this time as a mobile user.

Clear the User-Agent settings and change the configuration as seen below.

Repeat the above steps and export an “All-URL” report as a CSV file.

Step 3: Use VLOOKUP in Excel and compare the two columns, side-by-side. Make sure you select the URL as the unique identifier.

Import each CSV file into a different sheet. You can download a copy of this sheet to do so.
On the Deduplication tab of the downloaded sheet, bring in the URLs from the Address column of each separate crawl tab. Then, remove duplicates. To do so, select the column with all the URLs, click on Data and select Remove duplicates.

Step 4: Run VLOOKUP to discover irregularities in each of the two tabs. Now analyze the results and make the necessary adjustments.

Page loading speed

While there are many ways to optimize for mobile, you should lock your eyes on everything that can improve loading speed. Pages that load fast provide a better experience and offer many benefits.

3 benefits that come with a faster website

There are many benefits associated with faster loading of mobile pages. These include but are not limited to:

Higher conversion rates
Reduced bounce rate (more on that below)
Customer retention

And while there is no evidence that the above points are directly linked to ranking, SEO experts do believe that they indirectly impact your ranks on Google.

Therefore, whether your website is already mobile-responsive or not, you need to work towards making everything run faster! And here are some good practices you can follow for that.

Having said that, it’s time to get to the flesh of this article.

In this article, we will compare AMP vs PWA, two different frameworks to build and optimize your mobile pages.

What is AMP

AMP is an acronym that stands for Accelerated Mobile Pages. The term was introduced by Google in 2016 and whether you know about it or not, it is something that you will eventually have to deal with.

Let’s put this all in some context.

Over its long reign, Google has a tendency of forcing its technology and algorithm updates down our throats.

They are well aware of their leverage and they know that we want to rank high.

Don’t you want Google to favor your website over your competitors’?

Of course you do!

Therefore, you have no choice but to play by Google’s rules; in this case, using AMP frameworks is slowly becoming a “must-do” for all webmasters.

The same thing happened with SSL certificates – now, thanks to Google, (almost) every page on the web is using HTTPS.

Essentially what AMP helps you with, is to create a version of all your website’s pages that are optimized for mobile readers. It removes all unnecessary design bloats (most of Javascript & CSS) and delivers the fastest text version of your website.

By doing so, Google also caches your content in its own cache. All this leads to the improved user experience which, in turn, result in higher rankings.

AMP and User Experience

There is a good reason for Google forcing you to improve your website’s loading speed. The way your mobile page loads determines what type of experience a user will have. The quality of your experience will then determine your Bounce Rate, which is an SEO factor that affects your rankings.

What bounce rate stands for, in short, is the decision of the visitor to bounce your website before the page is loaded. After a few seconds of waiting (which in the digital world could as well be a century), the reader will simply “bounce” back to the search results.

So, with that being said, here is how AMP works. Grab your mobile phone and search for any term on Google. What you will see under the search results are the top news stories.

And those illustrated cards will include an “AMP tag” to inform readers that this is an Accelerated Mobile page and that results will show up instantly.

The same tag is applied to most of the top results for your search term and you can see them on the top left corner of each page.

How to setup AMP

Now that we got a short intro into AMP, let’s take a look at how you can create one for yourself.

As you can see, the job is highly technical and you will probably require an experienced software developer to set up your AMP page.

If you are using WordPress, on the other hand, this process is fairly easy. Simply install a plugin that will do all the heavy lifting for you. It is important to remember, however, that such plugins will only work with compatible WP themes which, at this moment, are not many.

Now that we explored the first contender, let’s see how Progressive Web Apps score in the AMP vs PWA showdown.

What is PWA

PWA stands for Progressive Web Applications. It creates a cached version of your website that can load without the need of an internet connection. Essentially, they look and feel like an app, but do so through your browser.

Pretty cool, huh?

Before going any further, let’s take a look at the reason anyone would want to create a PWA for their website.

When it comes to mobile optimization for companies that don’t have their own native app, creating a web app is the best alternative that helps them win customers by providing a similar experience.

PWA examples

Pure Formulas, a U.S. based supplement brand, decided to create a PWA to improve its page loading time and checkout process. The result? Less abandoned carts, better user experience and a revenue increase of 23%.

For bigger companies that do have the budget and the time to create native mobile apps, there are still many instances where people will rather use their web version to avoid the download and install process.

Here is one you are probably familiar with:

Twitter created a PWA page (Twitter Lite) in order to improve its user experience for their mobile audience, which forms 80% of its users’ total.

Twitter Lite can load any page instantly, decreases data use by adjusting images and relies on cached data. It also re-engages mobile users by using push notifications and allows users to save the PWA on their home screen.

Native apps and how they are different from Progressive Web Apps?

Native apps are the typical apps you see in the App Store and Google Play; they are seamless, look very professional and usually have all aspects covered.

So why would anyone rather opt for a PWA over a traditional native app?

The answer is simple really. While Native apps prove a great user experience, they are:

Limited to certain devices (e.g. only compatible with Android or iOS devices).
They need to be downloaded and installed, which is both a lengthy process and removes all impulsive behavior.
Development is expensive and time-consuming

And this is where Progressive Web Apps come in for the aid!

Differences between native apps and progressive web apps

Features: PWA still has certain limitations compared to Native apps. While features like push notifications, GPS and gestures are available for PWA’s, they are more readily available on native apps.
Content limitations: In order to make your app a worthy contender in the App store or in Google Play, you will have to work at the edges of current content rules of the marketplace. Restrictions in content and fees that come with it make it really hard for certain websites to create native apps that are successful. PWAs, on the other hand, there are no content limitations or fees, making it easier to create an app regardless of the type of content.
Offline connectivity: Even though PWA got their rep for their ability to store information for offline use, native apps still maintain the upper hand when it comes to the caching process.
Installation process: To install a native app, users need to first open the App Store or Google Play, find the app, download it and install it. Someone has to be seriously determined to perform all those actions in a society where one extra click may mean the loss of a customer. With PWAs, however, everything is much easier, since all you have to do is create a bookmark on your home screen. The only difference between a PWA and a Native app will be a chrome symbol.
Speed: When it comes to speed, there does not seem to be any significant difference between native apps and PWAs.

PWA in action

If you’d like to know how a PWA works, take the Twitter Lite example we shared above.

When there is no network connection, you are still able to open the web app, read through your past messages and ever send replies.

When the phone eventually connects to the internet, the messages will be automatically delivered in the background.

This is, in short, the unique selling point of PWAs. They enable web apps to load without an internet connection, sync in the background and perform actions that provide an experience similar to using a native app.

How does PWA make your website available without an internet connection?

We are all familiar with how native apps work. You can easily open them even when you are offline because, when you download and install them, your device stores important resources and data.

PWAs work in a similar fashion, minus the download and install process. You simply save the website to your mobile phone’s home screen and voila!

We won’t go into too much detail about the information that is being saved on your device, because essentially it’s just a cached version of your page.

In more detail, the first time you load the page on your device (when you are online) it stores your HTML and CSS files as well as your images in the browser’s cache.

If you have some time at your disposal and are looking to build your own PWA, this video explains everything you should know about Progressive Web Apps and how to build them.

Breaking down the main differences

Now that you know more about AMP vs PWA, you probably realize that they are actually pretty different from one another and come with a few key differences.

AMP helps you create copies of your pages that are stripped from any additional information (design elements) that could affect their loading speed, and helps your pages load instantly when accessed through mobile.
PWA, on the other hand, creates a cached version of your website, so you can access it like you would access a native app. They also perform a few key actions even without an internet connection.

Which one is better?

Is there a place for both AMP and PWA or is one of the two superior? That will really depend on the type of your website and your goals. Here is what you should be looking at:

Search engine placement: AMP is vastly superior to PWA when it comes to discoverability. It gets boosted by a carousel in Google search results, where PWAs, unfortunately, do not.
Engagement: PWAs are not limited by AMP, HTML or CSS, which means that they can become a lot more engaging than AMPs. The AMP framework is not able to create anything that requires Javascript (interactive) and, therefore, dynamic content is very limited.
Speed: When it comes to mobile speed optimization, AMP is the winner. It may only support lightweight content but that also improves load times.

How can I use AMP and PWA together?

Since AMP vs PWA is not really a challenge, after all, we may as well search for ways to team them up. And there are many ways to do so.

Create AMP pages with PWA features

To do this, you will need to enable PWA features on an AMP page.

Step 1: Install a Service Worker.

Step 2: Use the amp-install-serviceworker to register the Service worker on a given page.

Step 3: Include the amp-install-serviceworker component in the <head> of your page by using its script:

<script async custom-element=”amp-install-serviceworker”

src=”https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js”></script>

Step 4: Add the following script within the <body> of your content(make sure it points to your Service Worker):

<amp-install-serviceworker

src=”https://www.your-domain.com/serviceworker.js”

layout=”nodisplay”>

</amp-install-serviceworker>

Step 5: Now, if a user clicks on your AMP page, the Service Worker be activated and subsequently take over, doing many awesome things!

Create an AMP as a gateway to PWA

As we learned above, AMPs are the way to go when it comes to optimal mobile speed. As such, it the best option for the first interaction with your website through a mobile device.

PWAs, on the other hand, will help you implement more interactive and engaging features but they do so by sacrificing loading speed.

In this case, a good strategy is to lead users to an AMP page and switch to a PWA from that moment onwards.

Here’s how you can connect your AMP page to a PWA:

Step 1: Publish all pages that include specific content (not overview pages) in AMP form for optimal loading speed.

Step 2: These AMPs will have to present PWA features, a process that is explained on the subchapter above.

Step 3: When the visitor utilizes the internal linking structure (e.g. by clicking on a CTA), the Service Worker takes over and loads the PWA page instead.

Create an AMP as a data source for PWA

If you are currently working on a PWA, you can take advantage of the same benefits by re-using your AMPs as a data source for your PWA.

Step 1: Start by loading a (shadow) AMP library in the top-level page, in a way that it won’t control the top-level content. It will just “boost” the parts of our page that you direct it towards. This is the script you need to add:

<script async src=”https://cdn.ampproject.org/shadow-v0.js”></script>

Step 2: It is best to load the (shadow) AMP library including an “async” attribute. This, however, entails that you will need to understand when the library is ready to be used (fully loaded).

The best thing you can do in this case is to observe the availability of the global AMP variable. To help with this process, Shadow AMP uses an “asynchronous function loading approach”:

(window.AMP = window.AMP || []).push(function(AMP) {

// AMP is now available.

});

Step 3: To make practical use of the code sample presented above, it is best that you wrap it into a Promise, and then always use that Promise initially, before working with the AMP API.

Step 4: Manually handle the navigation on PWA. What you want to achieve with this step is a function callback that activates when a user clicks on one of the links. For that reason, include the URL of the requested AMP page in the callback.

Step 5: At this point, we want to display content after a user responds to a CTA, which will require us to fetch the AMP document and let the Shadow AMP take control. To do this, include a function to fetch the page:

function fetchDocument(url) {

// unfortunately fetch() does not support retrieving documents,

// so we have to resort to good old XMLHttpRequest.

var xhr = new XMLHttpRequest();

return new Promise(function(resolve, reject) {

xhr.open(‘GET’, url, true);

xhr.responseType = ‘document’;

xhr.setRequestHeader(‘Accept’, ‘text/html’);

xhr.onload = function() {

// .responseXML contains a ready-to-use Document object

resolve(xhr.responseXML);

};

xhr.send();

});

}

Step 6: Now that the Document object is ready to use, you can allow AMP to take over and render it. Get a reference to the DOM element which acts as a container for the AMP document, then call AMP.attachShadowDoc():

For any Dom element:

var container = document.getElementById(‘container’);

For the AMP page you want to show:

var url = “https://my-domain/amp/an-article.html”;

Implement the fetchDocument method to receive the document:

fetchDocument(url).then(function(doc) {

Allow AMP to take control and render the page

var ampedDoc = AMP.attachShadowDoc(container, doc, url);

});

Step 7: And that’s it! Now your AMP acts as a data source for your PWA.

Conclusion

AMP vs PWA has come to a close! If you made it this far, you probably have a bunch of notes and a mild headache.

No worries though, in time, you will get ahold of everything you learned. Before we part ways, let’s quickly summarize the most important points that you need to remember:

AMPs are copies of your pages that are much “lighter” and load much faster when accessed through mobile devices.
PWAs are cached versions of a website, which users can access and perform a few key actions even without an internet connection.
If mobile speed is your priority, AMP is the way to go. If more interactive and engaging pages are your goal, then PWAs are what you should be looking at.
There is not one winner when it comes to AMP vs PWA, and they can even be used in combination for optimal results.

We hope you found this article useful and you got a lot out of it. And while, at parts, things may get quite technical and advanced, we are here to help you out with any AMP vs PWA related questions. Therefore, feel free to leave your comments below.