Accelerated Mobile Pages (AMP) for Mobile-First Generation

| Last Updated December 21, 2021 - by Softcrylic under application engineering

Statistics say 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load. What could be more damaging than this when a business spends lot of money to gain users’ attention from immense competition in the online advertising space? In an effort to get past this, Companies are adapting Accelerated Mobile Pages (AMP) to gain faster loading web pages, improved traffic, better sales conversions and search ranking.

What are AMP pages?

Accelerated Mobile Pages or AMPs are pages that are exclusively created for the mobile-first generation. They are the stripped down version of HTML, (similar to Diet HTML) that uses only necessary tags for loading pages faster on Mobile Devices.

Google often lists AMP pages in the mobile search results first. This blog post explains the need for AMP pages, steps in creating a simple AMP page, how to preview the AMP page and validate it.

There are 2 Billion plus AMP Pages across 900,000 domains names that loads 2X times faster – Google I/O Developer Conference, 2017

Why we need AMP pages?

Agility is key in the mobile first world. Consumers are getting used to faster internet bandwidth and high-speed computing gadgets. In the process of searching for information, users demand faster websites to effectively meet their need.

Users don’t engage with content-heavy websites with conventional client-server architecture anymore. Even worse, they abandon slower websites. Websites have other challenges like responsiveness, intrusive ads and security as well.

Designing, developing and maintaining high-performing websites requires constant updates, cross-functional tool expertise, adequate experts and a lot of effort. To address this problem area, a team of Engineers from Google and Twitter started the AMP Project.

AMP pages have three core components

AMP HTML – This is a restricted subset of html. It is restricted to work well with other pieces like AMP JS
AMP JS – This is a JavaScript library that implements best practices for performance and manages resource loading to ensure that the page renders quiet quickly
AMP Cache – Fetches the AMP pages and caches them to improve page performance

How to create a simple AMP page?

Let’s see the steps involved in creating a minimal AMP Page with a practical example.

If you want to create a simple AMP project, create a simple file with .html extension.
Every Amp Page starts with <!doctype html> tag. This is the html5 standard of creating the html tag.
Along with this tag, we need to have one more tag for our browsers to understand it is an amp page. For that, we can use thetag along with the amp attribute.
In order to load the AMP project, we have to include their CDN JavaScript library in the head section
The head section should also contain the Canonical URL of the page. This helps people identify the real html page associated with it.
We can decide this page’s viewport in the viewport name of Meta attributeAdding scripts, link and meta attributes can go within the Head section.
The body section can have AMP specific image tags and used with attribute
We can control the layout of these pages with amp specific styles. The style tag should have amp-custom attribute
The end html looks like this

AMP page previews

We can preview the AMP pages created by running them directly on the browser. Running the above code produces the following output
AMP Sample project preview

Validating the AMP pages

We can validate these AMP pages by opening the Google developer console.
amp validate

Frequently asked questions (FAQs) or Myths on AMP

Will AMPs load on web browsers?
Yes. AMPs loads on both mobile and web browsers. Much faster than normal .html pages.
How can we convert normal HTML pages to AMP?
The AMP Project website has a list of instructions available on this note. Please refer this link https://www.ampproject.org/docs/tutorials/converting.
Who use AMPs in real world?
Any business that cares to have a mobile-first strategy. Leading companies like Google, Facebook, LinkedIn, WordPress, Medium and so on.
Are there any disadvantages of using AMPs?
If your website contains lots of rich media (video/audio), AMPs might take a little more time to load. The Analytics Tags are limited for AMPs and all the styles we make are inline when we build AMPs. AMPs are the best option for the websites that loads lots of text content. For e.g., websites like Guardian loads its content with AMPs.
Are AMPs and Responsive Web Design are same?
No. They are not the same.
AMPs doesn’t require extra work and it still can be implemented along with your main website. It can work better with static content and hence content heavy, rich media websites can use them as a landing page and redirect users to key promotional pages.Responsive web design can handle any amount of dynamic, rich media content but requires extra development effort to make it work for different platforms and devices.

Conclusion

The pace at which your business website loads provides significant benefits in terms of better browsing experience, online sales conversions, lesser bounce rate, and improved customer experience. Businesses are adopting AMPs for critical web pages they want to highlight. I am keen to understand your journey with AMPs. Connect with me.