How can AMP help you to build faster web applications?

It’s nothing new if I write that every year websites usage with mobile phone increasing. We are more often using mobile phone to surfing the Web and that’s a fact but on the other hand we encountered new difficulties in browsing websites that way. Statistics show that mobile users spend significantly less time on a single page and less often choose to browse other pages on the website. The expectations of mobile users are different from what they get and as one of the reasons they give too slow loading of the page.

73% of mobile internet users say that they’ve encountered a website that was too slow to load.

blog.kissmetrics.com

Of course, too slow loading of the page is not the only problem, there are also other related to browsing through the mobile phone, who has not experienced this when reading news or posts?

Moving page from the text we are just reading to completely different part due to the end of loading images or advertisings is very common. A similar situation occurs when we want to press link, and in the meantime the website is shifted and we click on prostate drug advertisements.

To solve this problem Google created Accelerated Mobile Pages, but what is AMP? On their website we can read following description

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.

ampproject.org

This means that AMP is ideal for solving website performance problems on mobile devices. Thanks to the use of good practices and extended html tags along with AMP JavaScript libraries, we can achieve significant increase in performance, prevent unwanted behavior on website and prepare it for use on mobile devices.

AMP consists of the following components

  • AMP HTML – recommendations for HTML tags through which it is possible to create rich content using the basic HTML tags and extensions available under AMP,
  • AMP JS – JavaScript libraries that make content on the page load faster,
  • AMP Cache – optional element that is responsible for delivering HTML pages based on AMP from Google search engine.

Once we know the basics of AMP, we can go to the example. Let’s look at Hello World example from ampbyexample.com.

<!doctype html>
<html amp>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    h1 {
      color: red;
    }
  </style>
  <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>
</head>
<body>
  <h1>Hello World!</h1>
  <amp-img src="/img/amp.jpg" width="1080" height="610" style="border: 1px solid #bbb;" layout="responsive"></amp-img>
</body>
</html>

To start with, in the html tag we need to add the amp attribute to make the page recognizable as page that uses AMP. Next, we need to add link rel=”cannonical” to the head with a reference to the full page, basic amp script with url https://cdn.ampproject.org/v0.js and amp-boilerplate style. To make pages load quickly, all scripts and css styles in AMP must be added directly. If we want to add an additional css style, we can use amp-custom for this. Finally, instead of img tag, we use amp-img, which immediately uses the entire declared image space. The page will look like this

In case we already have prepared page using AMP, we can check if there are any errors. We can do this with AMP Validator. It can be used by entering in the url address at the end #development=1. The validation result should be displayed in the development console.

AMP is widely used by websites like cnn.com or bbc.co.uk but it is not the only solution for performance problems. The alternative is Facebook Instant Articles offered by Facebook, solution that allows you to add articles to Facebook. They can be viewed and shared in the Facebook application on mobile devices. The difference between these solutions is that AMP has Google search engine support, which displays results with AMP pages, while FBIA allows you to add articles that can be viewed only in the Facebook mobile application, which is optimized for fast display and easy content sharing.

Finally, I would like to mention who should be particularly interested in using AMP. If your goal is to increase the number of users on the website, improve the time of browsing and positioning website in the Google search engine then definitely AMP is created for you.

Have you ever used AMP or maybe after reading this article you decided to use it? Let me know in the comment!