< Back to blog
PUBLISH DATE:
UPD:
OlegOleg RomanyukHead of Inbound Marketing

PWA vs AMP: What Is the Difference and How Do You Choose?

Let’s have a look at 8 questions to understand what PWA and AMP are and what is better for you!

PWA vs AMP

Almost every person in the developed world owns a smartphone. It opens endless opportunities to a business, which, however, are immediately challenged by an immense number of competitors in the mobile software market. Surely, mobile apps are way more convenient than web or desktop platforms. Yet, they are not the most comfortable option that the industry offers. 

To strike the highest level of user satisfaction and to outrun competitors, inventive people opt in favor of progressive web apps (PWA) or accelerated mobile pages (AMP). 

What are these and how to choose a more appropriate option? Let’s consider step-by-step.

  1. What is PWA?

  2. What is AMP?

  3. What is similar?

  4. What is different?

  5. Why PWA is better than web?

  6. Why PWA is better than native mobile?

  7. Why AMP is better than web?

  8. Why AMP is NOT better than native mobile?

1. What Is PWA?

PWA is a progressive web application, the idea of which is to unite the advantages of both web and mobile apps into a single software product. As Google declares, PWAs are “user experiences that have the reach of the web and are reliable, fast, and engaging”. It is a technology that lets you use a website as if it was a native app.

Twitter is one of the major companies using PWA. To install it, you should open the web version on your phone and add this to your home screen. Once you open Twitter from the home screen icon, you will open it as a progressive web app.

PWA

Fundamentals

PWA is a highly responsive and easily shareable solution, which can work offline. Progressive web apps store HTML and CSS files in the browser cache and archive them with service workers, which makes it possible to use the web page offline. Service workers are one of the three essential components of PWA, along with the manifest file and a secure protocol HTTPS.

Service workers are JavaScript code components, which play the role of a proxy between the network and the browser. When you open a web page for the first time, service workers store the necessary data in the browser cache. When you open it for the second time, service workers retrieve this data from the cache even before the app checked network availability. Not only it provides the ability to work offline but also it greatly boosts the response time. Service workers also manage push notifications.

The manifest file is a JSON file with all the information about your app. For instance, it contains data about the home screen icon of your PWA, its short name, color palette, or theme. If you are using the Chrome browser on an Android phone, the manifest file will trigger the automatic installation of the PWA onto your phone.

The secure HTTPS protocol is an absolute must if you develop a progressive web app. While service workers make the very concept of PWA possible, they are vulnerable to network errors or breaches. Service workers can intercept network requests and modify responses. To ensure data security and network security, the secure protocol needs to be used.

Success stories

Twitter is not the only company that benefited from PWA. Check these case studies published by Google to see how this technology helped popular businesses succeed. Among these companies, there are Pinterest, Alibaba, The Weather Channel, Lancome, and The Home Depot.

2. What Is AMP?

AMP is an accelerated mobile page – a mobile-friendly web page, which is designed to be loaded instantly. It is a fast and smoothly loading solution, which is developed with the user experience in mind. Introduced as an open-source project, the AMP technology was integrated by Google in February 2016.

In 2016, The Guardian announced that their platform is now available as AMP. To see the example of how it works, they offer to check one and the same article displayed as a web version and an AMP version. There are some differences, but they are insignificant. What you cannot but notice is how much faster the AMP loads than the regular web.

*By comparing this illustration with the one I included earlier, you could notice an interesting point. A PWA needs to be installed. In turn, you do not need to install AMP. It is accessed via a different like.
*By comparing this illustration with the one I included earlier, you could notice an interesting point. A PWA needs to be installed. In turn, you do not need to install AMP. It is accessed via a different like.

Fundamentals

The idea of AMP is to reduce the amount of unnecessary content and functionality so that to display the essential content immediately. The data can be reduced up to ten times. The three essential components of AMP are AMP HTML, AMP Components, and AMP Cache.

AMP HTML is a simplified version of a regular HTML. AMP HTML does not allow some tags and elements of HTML, for example, forms. To understand better what AMP HTML should look like, check the required mark-up.

AMP Components are the scripts that enable you to do without Javascript. The idea of AMP is to get rid of all JavaScript scripts as they negatively affect page loading time. Yet, it does not mean that your page should do without animations, modified layouts, analytics data, autocomplete suggestions, or ads. There is an extensive library of components that enable you to implement these and a lot of other features.

AMP Cache is a proxy-based content delivery network, which fetches and caches page content. AMP Cache enables you as an app owner to easily introduce page updates. It optimizes and, if needed, modifies, the AMP. 

Success stories

Same as with PWA, the community is very proud of the business advantages that the solution offers. There is a collection of success stories – case studies of companies that used AMP and benefited from it. Musement, RCS MediaGroup, CNBC, The Washington Post – these are the companies that are deciding or have already decided to implement AMP.

3. What Is Similar?

Both PWA and AMP are the methods of displaying web pages on mobile devices. Both of them are created with the aim to enhance user experience. AMP and PWA help to reduce page load time. While AMP may be slightly more effective in terms of loading speed than PWA, the difference between AMP and PWA loading times is barely noticeable. Both technologies are actively supported by Google. There is a PWA page on Google Developers and an AMP page on Google Developers.

There are not a lot of similarities. However, these similarities are essential. Let’s see what the differences are. Here goes the comparison of AMP with PWA.

4. What Is Different?

Appearance

By using PWA, you do not feel that you use a web page. PWA looks and feels like a mobile app.

By using AMP, you are well-aware that you use a web page because it looks the same.

Development

In the case of PWA, the application code is written, either from scratch or with some parts of the existing code.

In the case of AMP, the existing code of a web page is stripped of unnecessary CSS and JS for the web page to load faster.

User experience

PWA offers a much better user experience. It has push-notifications, a home screen icon, and no browser tabs. Also, it is much easier to download and lighter in size than a regular mobile app. It loads faster than a regular web version because of being embedded with App Shell. Moreover, PWA can be used when the network connection is down.

AMP offers a slightly improved user experience since the page loads faster than regular. Yet, it is the only UX advantage that it offers. Unlike PWA AMP cannot work offline.

Performance

From the SEO standpoint, AMP wins the PWA vs AMP competition. Google favors these pages and lists them in the carousel of top stories, which increases the Click-Through Rate. 

PWAs, in turn, do not have a direct advantage for SEO. However, better user experience translates into higher retention rates, which helps you win the SEO.

Support

PWA is not supported equally on all devices, it may have slight inconveniences with being displayed on iOS. Also, it does not support all the hardware functionalities, such as Bluetooth, NFC, GPS, or accelerometer. 

AMPs are supported by all major browsers on all devices.

Apps it is best suitable for

PWAs work perfectly for the apps that need to interact with the user. E-commerce websites, social media, or online learning platforms where the app needs to be responsive and constantly updated can make use of this technology. This is why Twitter uses PWA.

AMPs are more suitable for the platforms with a wall of content, such as online magazines or newspapers. AMP loads content instantly, but the interaction opportunities are limited. This is why The Guardian has decided to employ AMP.

5. Why PWA Is Better Than Web?

If you access a web page on mobile, you will have to deal with browser tabs, slow loading times, and annoying pop-ups. If your device has a relatively small screen or a slow network connection, surfing web on it becomes unbearable.

This problem is solved by progressive web apps. In a few clicks, you install the app on your phone and get down to using it. No need to type a link, no browser tabs, and no pop-up screens. The app works fast, and it does work if the network connection is down.

Alright, the benefits of this solution are evident, but it seems like the native mobile app could work perfectly instead. No, it would not. Let’s see why PWA is better than native mobile.

6. Why PWA Is Better Than Native Mobile?

To use a native mobile application, you have to find it in the App Store or Google Play catalogs. Then, you have to wait for some time to download it. There might be a case that you do not have enough free space on your device, so you need to spare some. 

In turn, PWA is installed and ready to be used in seconds. The file size is small but bound to increase while you are using the app and it is caching. Yet, the size of cached data depends on the amount of free storage you have on your device. 

Thus, PWA seems better than a web or native mobile app. Yet, you should understand that this solution is not universal. Check our recent article on PWA vs Native to learn when a native app is a better choice than a PWA.

7. Why AMP Is Better Than Web?

As mentioned above, web apps are slow and inconvenient, especially when accessed on mobile devices with small screen size or underpowered hardware.

By getting rid of all the unnecessary for user experience web components, accelerated mobile pages solve this problem. AMPs perform 4 times faster and use 10 times less data than regular web pages.

8. Why AMP Is NOT Better Than Native Mobile?

Unfortunately, AMPs cannot substitute native mobile apps. They cannot be installed on the home screen, they still include browser tabs, and the functionality of such is limited to some basic stuff. 

Yet, for an online newspaper or for an informational website, such as WebMD, it would be better to use AMP rather than a native mobile app. These do not require any additional functionality but for displaying page content.


To Wrap Up

Both AMP and PWA are powerful technologies, and our specialists develop both. The results of PWA vs AMP: AMP will be easier, faster, and cheaper for you to develop, while PWA will offer more benefits. We have been working with both technologies since they were introduced, so our specialists are experts in these.


We believe that progressive web apps are the future. Accelerated mobile pages are just too simple and limited in functionality to compete. 


Yet, neither of these is a universal solution, neither is a panacea. Even AMP and PWA together may not meet all your demands.  Sometimes, you may need to choose more conventional types of software. If you are still not sure what to choose, our specialists share four questions to understand if you need PWA.

Do you need help with AMP or PWA development?

Our developers will gladly help you with both. Contact us! I will get you in touch with a developer, who will help you choose the most suitable technology – AMP vs PWA vs native mobile.