Recent statistics show that about 4.68 billion mobile users are constantly browsing the web. And this number is steadily growing. According to Statcounter GlobalStats, more than 48% of Internet experience is via mobile devices. Desktop users take lower level, while tablets form up less than 10%. The Mobile-First era is there. No surprise, mobile users come as first priority.
AMP (which stands for Accelerated Mobile Page) is a platform also accepted by Google. A few years ago, when PWA and AMP were released, Google leaped into the web bandwagon. PWA and AMP were developed to improve the web experience of a mobile user. Let's see the differences between these approaches and find when they can be applicable.
What is AMP?
AMP was developed on JavaScript that allows quicker page loading than standard HTML. It is a tool for creating static material (web pages that do not modify the actions of the user). This makes it much easier for publishers to quickly create mobile-friendly content that speedily loads on mobile devices. On Feb 24, 2016, Google merged AMP in its mobile search results. AMP websites appear with an "AMP" tag (lightning) in the search result.
AMP aims to improve page-loading performance and browsing a website on mobile devices. In comparison to other HTML pages, we get a flat page with only the crucial information without a bunch of fancy features. It takes information from a normal website or app 10 times faster in order to produce useful content as quickly as possible.
The redundant (inline) JavaScript is deleted to build mobile-friendly websites. In fact, the CSS for inline use is limited to 50 KB. Google caches the content of the website to provide the features of a CDN. The AMP web component also provides (limited) insertion of JavaScript as part of the AMP library. When you use it, you can add animation without fear of lag to your mobile websites. AMP is no longer limited to websites in the current context. There are AMP ads and emails. All of these AMP models were designed to render on mobile devices easily.
AMP Pages are composed of 3 core components:
- AMP HTML - limited HTML for safe performance;
- AMP JS - Library to provide a fast rendering of AMP HTML pages;
- AMP CDN - a Content Delivery Manager responsible for delivering all documents to the AMP page.
Pros and cons of AMP
The Pros:
- Web pages are easy to load and cache;
- Supports all types of advertising;
- The load time of the website reduces to less than 1 second;
- Is particularly useful for websites based on content, such as news publishers;
- The AMP pages will appear in the "Top Stories" in the mobile search results.
The Cons:
- No JavaScript able (except an off-the-shelf AMP library);
- Images developed with lazy loading software, which means that they only load when you reach them ;
- Your Cascading Style Sheets will need a streamlined version;
- There is no tracking user activity on AMP sites;
- Not relevant for sites of e-commerce..
PWA & AMP - the Difference.
- While AMP lowers the page load time, PWA pages are updated on the go to allow users to surf and experience a mobile-app-like website without interruption;
- AMP is fast in delivering static content. On the contrary, PWA offers more interaction thanks to push notifications, add to the home screen button, etc.
- AMP includes ordered CSS and standardized JavaScript; PWA, on the other hand, combines Service Worker, App Shell, Web App Manifest, etc.
- AMP is particularly ideal for heavy websites such as blogs, publications, news reporting, or recipes, having static content. Since PWA allows pages to look and feel like mobile apps, it is best suited for e-commerce websites. They are advised for “HTTP” sites (with good secure connections between “site - user”).
Cooperation or competition
Now the combination of AMP and PWA becomes more common. Both solutions work together perfectly, increasing page load time and improving the user experience in general.
1. AMP as a PWA. If your content is static and the limited functionality of AMP is suitable for it, this option allows you to generate it as a PWA. In this example, AMP is designed in a way that PWA is fully integrated with AMP.
2. AMP to a PWA. Another way of using the combination of AMP and PWA is by designing your AMP page as the lure to your website. It catches the user with an immediate load, then makes it into your PWA.
3. AMP in a PWA. It is not necessary to build all your pages with AMP and to separate AMP and PWA’s like bait and base. Now, you can really develop only a small section of a single page using AMP, while reducing its size and lowering its load time without loss of functionality.
Which websites have already applied AMP?
The rank of AMP increases the website SEO rating, as the load time is an important factor for SEO.
Here are some of the most popular examples of AMP websites:
- CNBC - the leading provider of business news and real-time coverage of the financial market,
- The Washington Pos - a major US daily newspaper,
- The Verge - technology, science, art, and culture journalism portal, (check it here),
- The Guardian - British major newspaper (check it here),
- Gizmodo - design, technology, science and science fiction website (mentioned in the AMP Project portfolio),
- Wordpress.com - automatically implemented AMP for all its sites. (check it here ).
Final Word
We can conclude that PWA and AMP are quite different technologies. But still, they can cooperate perfectly.
By the end of January 2019, 12% of Google ads were AMPs. Most publishers adopted it, in particular, those who handle the delivery of ads and loading speed.
AMP and PWA are powerful tools to improve website performance, user experience, and SEO rating. You can choose from two technologies or use both to have the best result.