Accessing data in today’s modern world has transformed over the due course of generations. This happened through the desktop earlier but with the advent and rise of smartphones, the way of consuming content has changed. Our mobiles have become our main focus. Even though they suffer from cluttered sites. The mobile applications create silos and reduce diversity resulting in an overall poor experience.
Recent studies show that 40% of the users abandon websites that take more than 3 seconds to load. As users take limited time from their very busy lives, they will not wait for that long for a web page to load on their device. This article is a reflection of the extensive research work conducted by Nico Digital bearing references from the contribution of TadDigital.com
AMP to the rescue
It is important for us to recourse to something which loads faster, is easy to implement, more user-friendly, and gives strong incentives. The expectation is rising every day with the advent of new tech and the post-pandemic times have proven to the world that man is ready to work on almost everything digitally. Today’s expectations demand that the content shouldn’t take more than 3 seconds to load and the interface should be user-friendly. Or else the user simply abandons the slow page.
Previously in the year 2016, Google introduced the concept of the Accelerated Mobile Pages (AMP) project: an open-source initiative to improve the entire mobile content ecosystem for everyone. From publishers, consumer platforms, creators to the users.
How Does the AMP work?
Accelerated mobile pages are similar to HTML pages but with limitations of technical functionality that is governed by the open-source AMP spec. Just the way all web pages load, the AMP’s load in any modern browser app web view.
AMP files prioritize speed to provide a faster and optimal experience for users, taking advantage of various technical and architectural approaches. AMP developers have options to use a collection of web components that offer the ability to embed video and social posts, collect analytics, and display ads. The objective is not to generalize the way the content looks or feels, but instead build a common technical core between pages that speeds up the loading times.
In order to reduce the time taken to get a user’s mobile device, the AMP files can be cached in the cloud. The AMP format allows content producers to make the content in AMP files available to be cached by third parties. Publishers are able to continue to control their content but platforms can easily get their content cached or mirrored for optimal delivery speed to users. The AMP cache can be used by anyone which is costless allowing the AMP’s to be cached by the Google AMP cache. Other companies may build their own AMP cache as well.
The goal is to combine limited technical functionalities with a distribution system that is built around caching that would lead to pages that perform better and increased audience development for publishers.
Benefits
Time is everything and speed matters. Researches have indicated that higher bounce rates are associated with slower–loading web pages. Using the AMP format will attract users to consume and engage with more content. But here it isn’t just about speed and performance. Publishers take advantage of the open web’s potential for their content to appear everywhere quickly as AMP would also promote enhanced distribution across various applications and platforms. This leads to more revenue via ads and subscriptions.
Implementation
Let’s look at the markups required to implement AMP
- Start with the doctype <!doctype html>.
- Contain a top-level <html ⚡>tag (<html amp> is accepted as well).
- Contain <head>and <body> tags (They are optional in HTML).
- Contain a <meta charset=”utf-8″>tag as the first child of their <head>
- Contain a <script async src=”https://cdn.ampproject.org/v0.js”></script>tag as the second child of their <head> tag (this includes and loads the AMP JS library).
- Contain a <link rel=”canonical” href=”$SOME_URL” /> tag inside their <head>tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
- Contain a <meta name=”viewport” content=”width=device-width, minimum-scale=1″>tag inside their <head> It’s also recommended to include initial-scale=1.
- Contain the following in their <head>tag: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Next comes including the Image
Most of the HTML tags can be used directly in AMP HTML, but there are certain tags like <img> tag, are replaced with an equivalent or slightly enhanced custom AMP HTML.
An additional markup can look like; <amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>
Upgrading the presentation
Any styling to the page and its elements on AMPs is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the <head>, called <style amp-custom>:
Validate
Up next, you should make sure that the AMP page is a valid AMP, or it won’t get discovered and distributed by third-party platforms like Google search. To validate:
- Open the page in your browser.
- Add “#development=1” to the URL, for example,http://localhost:8000/released.amp.html#development=1.
- Open the console and check for validation errors.
Linking pages with ‘<link>’
If you want to justify the fact that a non AMP page and an AMP page should be treated as being ‘paired’ together, you should add info on the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>:
<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>
And this to the AMP page
<link rel=” canonical” href=”https://www.example.com/url/to/full/document.html”>
If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
<link rel=” canonical” href=”https://www.example.com/url/to/amp/document.html”>
AMP with AEM
We create a project with some components like image, video, carousel, and shape. In AMP, creating these components is easy using AMP HTML tags. In JSP / HTML, creating carousel components is always a challenge and you need to add some good JavaScript, but with AMP this can be achieved by simply using the tag and adding a script for it in the header tag.
Author Bio:
Aditya Kathotia
Aditya is the Founder and CEO of Nico Digital and Digital Polo. He has attained the pinnacle of brand design expertise by delivering true value to brands and marketers. After pursuing his higher education in Business Analysis from Manchester Business School, he has helped both Nico Digital and Digital Polo unlock its true branding potential globally. You can reach out to him on LinkedIn and Twitter.
