Techblog

All about web

Making web beautiful and high performing with AMP

1 year ago · 3 MIN READ
#frontend  #amp 

When speed matters AMP is the way to go, it makes web much faster, provides better user experience at lower bounce rate. So switch to AMP and get higher customer satisfaction, better ranking hence more conversions.

What is AMP

Accelerated Mobile Pages or AMP for short, is a project from Google and Twitter designed to make mobile web page load almost instantaneous, much similar to Facebook's instant article and Apple News. Technically, it's a HTML page on a diet, as it contains only a subset of HTML tags (elements) to keep it light weight. Google aims to make future of websites better and faster as they quote on their official amp project page :

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

Once an AMP page is indexed by Google it will appear on Google SERP (Search Engine Result Page) with a lightning bolt () icon and will be served from google amp cache and load instantly.

Wonder why AMP pages load so fast?

A typical AMP page construct looks like this:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

AMP is built with 3 core components which are the main reason why AMP loads instantly.

AMP HTML

AMP HTML is basically extension to traditional HTML with custom AMP properties. Some of the HTML tags are replaced with the AMP specific tags for instant <img> is replaced with <amp-img> and <iframe> to <amp-iframe> to name a few. While keeping those regular HTML tags AMP also strips down some of the HTML tags which would not provide any speed benefits. The full list of AMP HTML can be found here..

AMP Javascript

Google puts a strict tab on the use of Javascript and the only JS that can be used in an AMP page is the AMP JS Library (https://cdn.ampproject.org/v0.js), which implements the AMP's best performance practices. In essence AMP makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.

Google AMP Cache

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency. Every AMP cached page once indexed will then be served by the AMP cache directly from SERP.

So in essence AMP pages are fast because:

  • HTML and CSS are stripped down,
  • No Javascript is allowed,
  • Images are lazily loaded,
  • Above the fold of AMP page is prerendered, below the fold is loaded asynchronously,
  • And most importantly, pages are heavily cached, that avoid the need to fetching it from the web server.

Impact on SEO and page ranking

Since google's announcement on mobile-first index which clearly states "Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results. Of course, while our index will be built from mobile documents, we're going to continue to build a great search experience for all users, whether they come from mobile or desktop devices.". It means that AMP apart from providing indirect SEO benefits due to great UX and speed will have direct benefit on page ranking due to mobile-first indexing.

Hands on with AMP

To get a quick hands on with AMP I have created a microsite using Grow. It can be found here at my git repo amp-ground-zero. This is a quick demo to show how easily AMP can be incorporated in a website. Here the amp-html has been included into the base.html which is the master file for the website. This example leverages on the basic AMP page skeleton along with two commonly used components i.e. amp-image & amp-sidebar and the page is AMP valid (which can be tested by appending #development=1 in the url).

Screenshot from amp-ground-zero:

amp-ground-zero.png

Further research

Going forward I will try out different features (amp-components) from AMP for developing a complete production ready website. The starting point of my research will be ampbyexample which provides succinct user interface to play around with all AMP offerings.

···

Rahul Sharma

Product Enthusiast & a clean coder. Strong believer of attention to detail, hungry for optimisations and making things better.
comments powered by Disqus


Copyright © Rahul Sharma, 2017 · Sign In