Google's Accelerated Mobile Pages (AMP) HTML

You may read the previous article What is Responsive web design?
Like Mobile usability, mobile performance also matters when it comes to appear first in Google search results.

Page speed is important

Google has announced that from July 2018, Page speed as mobile ranking factor. The announcement has been come in advance so that website owners can revamp their sites accordingly and make sure that their website is performing well.

Google business logic behind AMP

There are many ad-blockers in usage and many potential players switch from website to web apps. So web advertising revenue of Google might be at threat. So AMP is devised so ads are integral part of the HTML itself.

Nowadays, people use apps to search content and apps are comparatively performing faster to web. Google’s main business is based on crawling and indexing of websites and searching content from web and producing it in a readable format. It is also noted that web pages have a drawback of loading speed. Since apps and apps searches are performing better and web pages being slow it may cause a potential threat to advertising revenue of Google. Inorder to protect that they have introduced the concept called AMP. AMP full form is “Accelerated Mobile Pages Project” (AMP project).
Whenever our website is targeted in any mobile devices and if we have AMP version of it, the AMP site will be rendered without any delay.

Google release Accelerated Mobile Pages in order to boost webpage speed in mobile and thereby providing optimized content for mobile users. AMP promises
1) To reform the searching and ranking mechanisms
2) To ensure faster content delivery
3) To provide advertisers an enhanced experience of marketing without compromising on user experience.
Google amp

Google I/O Developer Conference 2018

In Google I/O developer conference last week, it has been stated that adapting to AMP HTML technology has brought fortunes to major companies like AliExpress, Tencent. Amp has extensive support to CMS like Wordpress through its plug-in Wordpress AMP plug-in. Apart from AMP sites, AMP emails and AMP stories are in the preview stage.

Components of AMP

AMP format is a stripped version of website preventing FOUC and rendering the web page in a single-go without any delay. It compromises 3 components.
1) AMP HTML
2) AMP JS
3) AMP CDN

Basics steps to be followed for creating an AMP HTML document:

Following the changes to the usual HTML documents and saving it as an AMP HTML.
1) Copy the index html contents and save as index.amp.html
2) Top level elements should contain

<html amp=""></html>

3) Should have head and body tags
3) Add

and

in head tag
4)

<link rel=”canonical” href=”./index.html”>

Add the above code in amp file
5)

<link rel="amphtml" href="/index.amp.html”>

The fourth and fifth step is bi-directional linking making search engines recognise that the pages are related to each other. In simple words, index.amp.html is just a simple amp version of index.html
6)

<meta name=”viewport” content=”width=device-width, minimum-scale=1,initial-scale=1″>

must be included and initial-scale=1 should not be removed.
6) Custom styles can be added by adding within the head element.
7) The following code-snippet is added in the head element

<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}}

Copy your css file contents into .AMP CSS maximum size is predefined. Stylesheet should be minified before adding since file size should not exceed 50 kilobytes

AMP CDN

AMP Projects provides CDN which allows caching our site and delivering it swiftly. Performance of the pages is reportedly increased by including it into our AMP.

AMP runtime

AMP runtime is a JavaScript snippet that goes inside any AMP document.

AMP elements

In an Google's AMP HTML, all elements like, images, video, carousel, audio, youtube, lightbox, sidebar elements can be added.

Images:

<amp-img></amp-img>

Audio:

<amp-audio></amp-audio>

Video:

<amp-video></amp-video>

Youtube:

<amp-youtube></amp-youtube>

Carousel:

<amp-carousel type=‘slides’>&t;/amp-carousel>

Accelerated Mobile Pages supports visitor analytics for tracking visitors and AMP-Ads are integral part of the AMP HTML structure.

By following guidelines for Google AMP, we can create a AMP version of the website / can convert an existing site to an AMP. All the AMP documents should be a valid AMP. Once after completion, we need to test the valid AMP. Only valid AMP HTMLs are eligible and invalid ones are ignored.
There are many Accelerated Mobile Pages templates available for customization. AMP pages focus only on content and we also need to understand that the limitations of using AMP such as

Custom JavaScript functionalities
Certain tracking cookies
Leading forms
Geolocation scripts

So we have to decide whether to implement AMP technology for our website. AMP will appear only in mobile and tablets and not for desktops. If our websites are already optimized and performing well, implementing AMP is not necessary.

Accelerated Mobile Pages validity can be checked from AMP Validity Test link.

Follow our FB page @CreativeTechnocrayts

Subscribe to Creative Technocrayts and be a part of growing community.

Search This Blog

Creative Technocrayts