Accelerated Mobile Pages (or AMP) is an Open Source Initiative taken up by Google to make the pages load faster on mobiles and smart devices – even over a slower connection.
People consume a tremendous amount of news on their phones. Publishers around the world use the mobile web to reach these readers, but the experience can often leave a lot to be desired. Every time a webpage takes too long to load, they lose a reader – along with the opportunity to earn revenue through advertising or subscriptions.
Here is what Google has to say:
“We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant – no matter what type of phone, tablet or mobile device you’re using. The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight webpages.”
From 24th February Google started showing AMP pages in the search results. As it is now a reality, let us try and understand what they are and how they are set up.
Although experienced developers can often achieve similar results through intensive performance optimisations, publishers often neglect this due to resource constraints. AMP allows these optimisations to be easily achieved without altering the primary mobile web experience.
How does AMP work?
AMP is essentially a framework to create mobile pages that load faster – even on slower connections.
1. AMP HTML: This is a subset of the HTML that we are used to. But some tags and properties are custom to this specific mark up, Check out AMP Project’s list of required markup that your AMP HTML page ‘must’ have.
2. AMP JS: A JavaScript framework for mobile pages. For the most part it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
3. AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimisations.
How do you AMP your site?
This is slightly complicated, as two versions of same article/page have to be maintained, the original version that the users typically see and the other being the AMP version.
There are certain restrictions on what AMP pages can/cannot have.
1. AMP pages do not permit form elements like third-party JavaScripts.
2. CSS in AMP should inline and be less than 50KB, so one may have to completely rewrite the code for such pages.
3. Images and other multimedia needs to be handled separately. For example image height and width must be specified.
4. It supports slideshows via AMP-carousel and lightboxes via AMP-lightbox.
5. For embedding YouTube, there is a separate component as it is the most widely used web video channel.
6. Social Media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components.
In order for Google (and other technologies supporting the AMP Project) to detect the AMP version of your article, you will need to modify the original version of the article page. The original article page must include the following tag, essentially a canonical tag for AMP pages:
<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>
Who are using the AMP pages?
Currently, the majority of sites using the AMP pages are content publishers. In the USA The Washington Post, The Wall Street Journal, Daily Mail and Mic are launch partners, while in the UK and the rest of Europe, The Guardian, International Business Times, Trinity Mirror, the Financial Times, Axel Springer and others have been AMP-coding their articles.
WordPress is on board with AMP and has released an official version of a plugin.
https://wordpress.org/plugins/amp/
Here are the Google Search guidelines for AMP pages.
These are very early days and we will see more development and more data coming through. At the moment it is the big publishers and some other platforms that are using AMP actively, but as time goes by and the benefits become clearer more sites will be implementing them to speed up the web.