What is AMP?

Amp header image.png

On an average a user will wait not more than 3.5 seconds to see content on any page on mobile.

The answer to this dilemma could be AMP or Accelerated Mobile Pages. What are accelerated mobile pages?

Many have asked me this, when the term AMP was mentioned in discussions with reference to the effects of Pigeon update introduced by Google .

To answer the question – these are web pages designed to load instantly on mobile which will contribute to a great experience for publishers, brands and users.

Well how do they work – they are just like any other HTML page but with a limited technical functionality, governed by the open source AMP spec. Plus there are third party companies who cache the content on cloud so it is available to users mobile immediately. Google has said that it will provide cache that can be used by anyone. All AMPs will be cached by Google cache. If companies don’t want to use the one from Google ,they can build their own cache.

Here’s an interesting video about AMP, should be able to clear the air on basics at least:

https://youtu.be/WrpkFROqR0Q

Moz has a nice rendition about the AMP as follows:

moz-amp-image

(Source: Moz.com)

The type of content that can work well on AMPs can be anything – blog, GIF, video, image or a news story.

Now if you have a wordpress blog then you can implement a WordPress AMP plugin from Automatic.

If you want to keep both the Amp and Non-Amp pages then you can refer the following snippet from http://digitaluncovered.com/.

On any non-AMP page, reference the AMP version of the page to let Google and other platforms know about it:<link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html&#8221; />

On the AMP page, add the following text to reference its non-AMP canonical version:<link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html&#8221; />

For standalone AMP pages (those that don’t have a non-AMP version) the AMP page should specify itself as the canonical version:

<link rel=”canonical” href=”https://www.example.com/url/to/amp-document.html&#8221; />

(Source: http://digitaluncovered.com/)

You must be thinking “what about analytics?” – Chartbeat and Parse.ly, two publisher analytics providers, are participants in the project and help you to collect data without compromising the AMP file speed or size.

Chartbeat reference links –

http://support.chartbeat.com/assets/img/amp_dash.png

http://blog.chartbeat.com/2015/10/07/chartbeat-and-the-google-amp-project/

 

Parse.ly reference links –

http://www.parsely.com/tour/?blog_cta=cta_2

http://blog.parsely.com/post/2617/parse-ly-joins-googles-accelerated-mobile-pages-project-to-improve-the-mobile-web/

https://www.parsely.com/help/integration/google-amp/

Many of you must be thinking how can I show ads on my blog or AMP page because eventually traffic will start coming from mobile. Lots of it…

Well the objective of the AMP project is also to provide support for various ad formats, ad networks and technologies to ensure ads in AMP files are fast, safe, effective.

AMP uses following techniques to give superior content discovery feel without compromising the monetization aspect of your webpage:

1) Content first. AMP loads ads after the rest of the content, so ads would never slow down load time.

2) Containment. AMP strictly manages the area of a page that ads can access and control to a well defined rectangle. Among other things this avoids pages “jumping around” as ads pop in.  

3) Mitigation. AMP mitigates against various JavaScript worst practices often found in ad tech such as `document.write`, by limiting their effect on the ad itself vs. the entire page.

4) Intervention. AMP slows down timers such as those used for animations for ads that are not currently visible, so that ads use much less battery and CPU when they aren’t being seen. Firefox, Safari, Opera and Chrome have recently started doing this by default.

These measures, together with AMP’s aggressive optimizations for general web content, significantly improve both page load time and lessen effects of the ads on the user experience. The fact that content always loads first guarantees that ads are never in a user’s way on a given page.

A little glimpse in the future tells us that the following things are possible:

1) Ads will be statically analyzable to be safe and behave well,

2) They will be able to use a common set of functionality to significantly reduce bandwidth consumption,

3) CPU usage will be limited to on-screen ads, maximizing battery life,

4) Ads will be coordinated with the page making sure that primary content and functionality can always be buttery smooth at 60 frames per second.
Finally all the resources that you need from a developer and beneficiary perspective could be found on Github, so do check it out.  

That’s it for today. Hope all of you liked it.

Do let me know your feedback and any topic that you may be struggling with. Till next time – Be Awesome 🙂