Google AMP - Overview

Google Accelerated Mobile Pages (Google-AMP) is Google’s new open source project specially designed to build light-weight web pages using amp html. The main aim of this project is to make sure the amp code works fine and loads fast on all possible devices such as smartphones, tablets etc.

What is AMP?

Accerated Mobile Pages (AMP) is Google's open source project specially designed to make th web pages mobile friendly by making it render contents faster, smoother and responsive in any browser.

The official site of Google amp is − https://www.ampproject.org/

WHY AMP?

Any user expects that websites would load the contents very fast. However, this may not be the case when the pages are almost flooded with images, videos, animations, social widgets, which makes page very heavy and thus increases its loading time. Such scenario may cause loss of users to the website in a long term.

Google AMP is designed to solve this issue. AMP has a special way to take care of images, iframes, javascripts, ads, videos, animations, css, font loaded etc. The contents of AMP pages are cached at the Google end, so each time the user clicks on the search results the content is served from cache. The cache version is also updated timely so that the user always gets a fresh updated page.

Why to Choose AMP?

This section tells you why you have to opt for AMP for your site −

Prioritized on Google Search

Today when you search something on the Google, you will find a Google carousel displayed at the top with pages, followed by the list of pages as a response to your search. The news carousel displayed are all valid AMP sites. It means Google gives priority to amp pages and displays them as per ranking in the news carousel.

An example for a search made in Google with the keyword “latest indian news” is given here −

All the high ranked pages which are AMP pages are displayed at the start in the Google carousel as shown in the image above.

A Google AMP page looks as shown below when user searches something in Google search. Note that there is a Google AMP logo on the AMP pages.

Faster Loading Time

When your page is AMP converted the load time will be much better in comparison to a non-amp page. Faster load time is also an important factor in page ranking in Google search.

No Pop-ups

Using Google AMP gives a pleasant web browsing experience as the user will not see any unwanted pop-ups for pages designed with Google AMP.

Generates Traffic

When loading rate of pages is fast, it automatically increases number of viewers and thus traffic to the page increases.

How AMP works?

The most important components that are used to build website are javascript, images, videos, fonts, css etc. AMP page design is done by taking care of all these factors in a unique way. In this section, let us discuss in brief what exactly AMP does to make the pages faster.

Asynchronous JavaScript

Javascript plays an important role on the page, as it helps in adding interactivity to the page in the form of animations, DOM changes etc. It also adds slowness to the page and can block other contents from rendering on the page.

How AMP tackles JavaScript?

AMP loads JavaScript asynchronously. Custom JavaScript is strictly not allowed inside a AMP page. Note that AMP has lot of components added, some of them are a replacement to the existing html tags; for example amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations etc.

For each of this component, there is a JavaScript file to be loaded which has the async attribute added to the script tag. Only JavaScript files related to the amp-components are allowed on the page and any other JavaScript inside a AMP page or third party javascript file is not allowed. As AMP uses Google AMP cache, the files are preloaded from cache making their loading faster.

Sizes for HTML Tags

It is mandatory to give size for the image, iframe, video tags so that amp page can locate the space on the page without having to load the resource. The resources to be loaded are prioritized by the amp page. The content is given more priority over the resources to be loaded.

Social Widgets/ ADs

Amp provides special components namely amp-facebook, amp-twitter, amp-ad, amp-sticky to take care of social widgets to be shown on the page. AMP-ad component is used to serve ads on the page. AMP takes special care in handling the components and loads the contents on a priority based on the requirements.

CSS

External CSS is not allowed in AMP pages. Custom CSS if any can be added inside style tag using amp-custom attribute. Inline CSS is also allowed. AMP reduces http requests in all possible ways.

Fonts

Fonts are allowed in amp pages and the priority of loading the fonts are decided by AMP.

Animation

AMP supports amp-animation components and allows transition as supported by modern browsers.

Considering all the points listed above, AMP takes very special care for HTTP request made for fonts, images, iframes , ads to be served etc. The resources available above the page fold are rendered first and later preference are given for resources available below the fold.

Other Points

Google AMP Cache is another important factor which helps in rendering the contents faster as the contents are fetched from the cache.

Publisher has to maintain two sites amp and non-amp page. For example, consider that the site has the address − https://www.mypage.com. Then, the pages internally for non-amp to be served on desktop will be https://www.mypage.com/news. For devices or AMP, it will be: https://www.mypage/com/news/amp/

How does Google Identify AMP and non-AMP page?

Now, let us understand how Google identifies AMP and non-AMP page.

When Google search crawls the page, if it happens to get amp in html or <html amp> or <html ⚡>, it knows that it is an AMP page.
Also incase Google comes across a non-amp page, first to know about the amp page it is mandatory to add following link tags in head section of html page for both amp and non-amp pages.

Page-url for Non amp-page

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Here rel = ”amphtml” is specified for a non-amp page to point to the amp version, so that Google shows the right one based on the platform.

Page-url for amp-page

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

Here rel = ”canonical” is specified in amp page to point to the standard version of html, so that Google shows the right one based on the platform.

Incase your site has only one amp page, still you should not forget to add the rel = ”canonical” which will point to itself −

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

The following diagram shows reference to rel=”amphtml” pointing to amp page and rel = ”canonical” pointing to standard html page.

Features of Google AMP

In this section, let us discuss the important features available with Google AMP −

Amp Caching

Google Amp caching is one of the core feature added to amp. It provides a proxy based content delivery network to serve pure amp pages.Amp cache is available by default to all the valid amp pages.It helps in rendering the pages faster in comparison to non amp pages.At present there are 2 amp cache providers Google AMP Cache and Cloudflare AMP Cache. When the user clicks and gets redirected to the amp page, the content is served from the google cache.

Amp Components

Amp has a big list of components designed for various purposes. Some of them are listed below −

amp-img − Used to show images on amp pages.
amp-iframe − Used to show iframe with external content to be shown on the pages. Please note the iframe used are sandboxed which means it needs permission to show data on the amp page. So the cross origin details has to be specified for sandbox attribute.
amp-video − To show video on the page.
amp-audio − To show audio on the page.
amp-datepicker − Used to show date widgets on the page. You don’t have to go for any third party datepickers as the same is directly available is amp.
amp-story − A medium to display your stories on the page.
amp-selector − Is an amp component which displays menu of options and the user can select between the options. The options displayed can be text,images or any other amp-component.
amp-list − Is an amp-component which calls a CORS json endpoint and the data from the json file is displayed inside a template.

Advertising

Advertising is very important for publishers as their revenue is completely dependent on the ads served on the page. Amp does not allow any external javascript to be added on the page, but has a special amp component called amp-ad is introduced which takes care of serving ads on the page.

The adnetwork the publisher wants to serve on their page needs to be amp-ad supported. For example, to serve double click ads on the page, double click needs to support ads to be served using amp-ad component. The following code shows an amp-ad tag of doubleclick.

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

Amp also supports amphtmlads which are pure ampads developed from AMP components and html. Amp also supports amp-sticky-ads, a footer ad displayed at the bottom of the page. The details of ads in amp is discussed in amp ads chapter.

Social Widgets

Social widgets like Facebook, Twitter, Instagram have become very important to be displayed on the publisher page , so that the pages are shared across social media. AMP has extended its supports to all the important social media widgets to be used on the page by developing AMP components like amp-facebook, amp-twitter, amp-instagram, amp-pinterest etc.

Amp Media

Another important component on pages is media to shows videos and also serve ads in between the video as midroll ads. AMP provides a medium to do that using amp-jwplayer, amp-youtube etc. You don’t have to load any extra third party files to have jwplayer, youtube to be shown on your page.

Amp Analytics

Amp analytics is an AMP component used to track data on a given page. All the user interaction on the page can be recorded and saved to analyze the data for further improvements or business purpose.

Amp Animations

Amp-animation is an amp component which defines animations to be used on other amp components. IT supports the animation, transition which works well with modern browser. You don’t have to use any external CSS library to perform the animation and can make use of amp-animation component.

Amp Layouts

AMP-Layout is one of the important feature available in google-amp. Amp Layout makes sure the amp components are rendered properly when the page is loaded without causing any flicker or scrolling issue.

Google AMP makes sure that layout rendering is done on the page before any other remote resources like http request for images, data calls are done. The attributes available for layout are width/height to all amp components, layout attribute with values like responsive, fill, fixed etc., placeholder attribute to be shown when the resource takes time to load or has any error, fallback attribute to be shown when the resource has any error.

Amp Display Layouts

Amp supports a lot of components used to display content on the page without a need for any third party library or without having to make any heavy CSS on the page. The list includes

Accordion − Amp-accordion is an amp component used to display the content in the expand-collapse format. It becomes easy for users to view it on mobile devices where they can select the section as per their choice from the accordion.
Carousel − Amp-carousel is an amp-component to show a set of similar contents on the screen and using the arrows to shift between the content.
Lightbox − Amp-lightbox is an amp component that will take up the full viewport and display like an overlay.
Slider − Amp-image-slider is an amp component used to compare 2 images by adding slider on moving it vertically over the image.
Sidebar − Amp sidebar is an amp component used to display content which slides from the sides of the window on tap of a button.

Advantages of AMP

AMP pages are lightweight and loads faster
Google gives for priority to AMP pages on google search. AMP pages are listed in the carousel format at the top of the page. To get a higher ranking, it is a good advantage to have your pages in AMP.
AMP pages are mobile friendly as the content is responsive and adjusts well in all browsers without the need of any additional styling.
Users satisfaction increases for AMP pages as the page load rate is faster in comparison to non-amp pages, thus saving their bandwidth and mobile battery.

Disadvantages of AMP

Amp possesses the following disadvantages −

Publisher has to maintain two version for their pages amp and non-amp.
The user has to put additional efforts in converting the non-amp pages to amp. As amp does not support custom javascript or loading of external javascript, the same has to be achieved with whatever is available with amp.