Table of Contents
What are Accelerated Mobile Pages?
AMP stands for Accelerated Mobile Pages. It is a component-based approach for designing and developing websites. With a mobile-first approach, the focus of AMP is to improve the performance of websites and tackle other common issues related to responsive design and accessibility.
AMP utilizes an extensive collection of web components for developing websites faster without compromising the user experience.
How AMP improves performance
- AMP websites uses traditional HTML tags. But, it goes beyond that by introducing web components that you can use with HTML. These web components ( or simply components ) are used for common web features such as slide-out navigation menus, video players, and image carousels on modern websites.
- Often loading and running JavaSript contribute to the slow performance of websites. Therefore AMP sites restrict the use of javascript. This is critical for faster performance and thereby improving the user experience on mobile platforms.
- AMP provides a validator to detect performance or accessibility issues in the development process. Validation helps detect issues early before they become significant problems.
- In addition, the AMP cache, a CDN provided by companies such as Google and Microsoft, optimizes the AMP website content to improve performance while making sure to maintain a better user experience. These caches are for AMP pages with no validation errors. Cached AMP pages also appear in search result pages in seconds.
The three major pillars of AMP
There are 3 major components that contribute to the making up of AMP pages.
AMP HTML
An extension to regular HTML with some specific tags that represent web components. Most of the AMP pages use regular HTML with no modification. But, the AMP team introduce these specific tags to increase the performance of web pages. Search engines can track AMP pages using these particular tags.
For example AMP page do not use regular <img /> tags. It uses <amp-img></amp-img>.
This <amp-img> is a Component/ web component. The good news is you can convert almost all regular HTML pages into AMP pages.
AMP JavaScript
All javascript in AMP executes asynchronously. This helps improve the user experience by not delaying page rendering when scripts are executing. AMP components do use JavaScript. However, the AMP team makes sure these JavaScripts do not compromise the performance of web pages.
AMP cache
AMP cache is a CDN offered by companies such as Google, Microsoft, and Cloudflare. While the AMP cache ensures that it serves only valid AMP pages, it also improves the safe and efficient preload of AMP pages and performance optimization for AMP page content.
Validating AMP pages
Validation is a critical step in developing AMP pages. The AMP validator is responsible for assisting in debugging errors in developing AMP pages.
AMP pages are an extension of regular HTML pages. There are must-have requirements to make a regular web page into an AMP page. The validator makes sure the AMP pages meet these requirements and any other violation of AMP standards.
How to use an AMP validator?
You can use the AMP validator in several ways
In developer console
AMP validator is available on every AMP page. All you need to do is add #development=1 at the end of the APM page URL, and open the browser developer console. You should notice if there are any errors in to debug
As a web interface
Another way to do this is to access the validator at https://validator.ampproject.org/ and debug in real-time. You can add the URL of the AMP page, see any errors and debug those errors in real time.
Browser extension
Perhaps the most convenient wat validate AMP pages is when you install the validator and browser extension. At the moment Chrome and Opera support the validator
NPM package
You can add amphtml-validator or gulp-amphtml-validator to your project and check the validation status on the console. The official document shows the code snippet you need to use these libraries on your project.
Command line tool
Amphtml-validator is also available as a command line tool. You can install it globally with npm and run it to validate your AMP pages.
Amp component
AMP components are the building blocks of AMP pages. You can add an AMP component with HTML-like tags. These AMP components, similar to HTML tags, take attributes that change the behavior, styles, the content, and capture events. You can find the list of AMP components in the official document.
AMP components use specially designed JavaScript so that it has less impact negative on the performance of the pages. While some of the components such as <amp-img> or <amp-layout> use built-in JavaScripts in the AMP runtime script, for most components, you need to add the relevant script tag at the top of the page.
If you are a developer that needs to develop an AMP page, you must know well about AMP components. The official documentation is a good place to start. It provides a comprehensive guide for each component on usage and attributes with examples. At the moment of writing this article, the latest version of AMP is 1.0. There is two separate documentation for both 1.0 and 0.1( the previous version ), and the latest documentation shows updated features of a particular component.
Controversy over AMP
Now, you might wonder if you should convert all your regular web pages into AMP web pages. Hold on…! There are both pros and cons of AMP. While I am not claimed to be an expert on AMP, when I go through articles written on AMP, I have noticed that tech gurus are divided on this matter of if one should adopt AMP as a new trend. Digital Marketing guru, Neil Patel argues that because the cons of AMP outweigh the pros for most websites and as AMP is not a requirement for Top Stories in google search, it is unlikely that AMP website to drive more traffic. Another concern of AMP is link sharing. As your AMP page is served by AMP cache( Mostly provided by Google ), the origin of the domain name changes to something like google.com/amp/jan/www.yoursite.com. Google was criticized for stealing the original publisher’s traffic. Consequently, Google introduced a pop-up header bar that shows the true origin of the page. In addition, for link sharing, they introduced a special button on the pop-up header bar that will let users share the content with its original URL.
Conclusion
AMP is a new technology that is improving. Its acceptance by the public will determine its path for enhancement. At the moment it is in a transition period. While it definitely speeds up the loading time of web pages, which is crucial on mobile platforms, it also seems to provide a lack of freedom for customization. One might need to consider where they gain traffic from before they make a transition to AMP pages. If your traffic is mainly from mobile users, you may give AMP a try.
Resources
About that ‘mobile’ in Accelerated Mobile Pages
The Definitive Guide to Accelerated Mobile Pages (AMP) For 2021
Why AMP is bad for your site and for the Web
How to Replace Google’s AMP Without Slowing It Down
.
