AMP. Speedup your website today!

Accelerate Mobile Page

Introduction

Accelerated Mobile Pages shortly AMP is an open source platform independent project that relies on existing web technologies, built in collaboration with different partners such as Google, LinkedIn, BBC, WordPress, Adobe Analytics, Pinterest, and The Washington Post and others. Basically AMP is a normal HTML page with extended properties and some restrictions that actually perform a skeleton for instant loading.

AMP was launched on Google mobile search on February 24 2016 in twelve countries including USA, Brazil, U.K, France, Italy, Spain, Japan and Russia. The premise of creating AMP project was a fact that the count of search queries on mobile devices exceeded amount of searching queries on PC. According to the statistics produced by Google, nearly 40 % of internet users leave slowly loading websites if the waiting process is more than 3 seconds. This causes a problem for publishers. They need a universal solution in order to adapt mobile content, since technologies outpace the process of developing mobile websites. So the market needs something fast, easy in development, mobile, available for everyone and definitely something that brings a profit.

How does it work?

After a user has entered search string if there are pages in AMP format they are displayed under the search string in carousel and the user can navigate between them just swiping to the left or to the right.

AMP1200x600

Source

This pages are loading instantly. The main difference from the usual web pages is that first of all AMP page contains almost none javascript that usually slows the loading process. Now a publisher who wants to create extremely fast loading web pages should create them with AMP HTML with accordance to all restrictions provided by AMP.

Technically AMP document is valid if it doesn’t contain things that slow it down. There are some general rules for AMP document:

  • All external scripts are async:
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  • AMP framework should know some static resource such as width, height etc., of your page, because if it knows what to show it will load it faster.
  • Nothing should block page loading. For instance AMP has such custom elements as “amp-iframe” where you should put reference to a resource to your servers so AMP loads it faster.
    <script async custom-element="apm-iframe" src="…/v0/amp-iframe-0.1.js"></script>.
    amp-iframe is a part of runtime and the  resource that is inside it will be optimized.
  • AMP instant loading is a key feature that shows the 1st viewport (header, logo, responsive hero image and headline) and loads other part of your article at the moment when a user opens a page and starts reading article.

first Viewprot

Resources

Everything that you need to get started with AMP is available on www.ampproject.org/. There you can find tutorials, guides and references also additional references on GitHub and Stack Overflow.

Summary

Nowadays mobile development is an essential part of web evolution. For publishers it is a chance to keep their audience and AMP could provide a background for this purpose moreover with AMP the audience count can be increased. The fact that AMP is open source, cached by Google to reduce loading time and supportable by modern browsers provides an opportunity to use it for everyone at no cost. With AMP users can read their favorite articles immediately after selecting them on theirs mobile devices without waiting for page loading. Publishers can increase their audience, show them more content and also they won’t be restricted to put ads on a page because with AMP the first viewport will be shown for a user after he/she selects it and the rest of the page will be loaded afterwards without no time affect.

Posted by Andriy Andreychuk

Andriy is a software developer. Contact him at andriy.andreychuk@westcoup.com

Comments