Accelerated Mobile Pages (AMP): Quick Guide

AMP demo on IPad

Hello friends today we gonna learn about Accelerated Mobile Pages (AMP): Quick Guide. So read this article, Accelerated Mobile Pages (AMP): Quick Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Accelerated Mobile Pages (AMP): Quick Guide

Accelerated Mobile Pages is the initiative of Google that is the biggest problem of the mobile web – speedThe great user experiences that we design with great care are painfully slow mobile

Slowness is not only a UX problem, but also lowers conversion rates, and harms accessibility by excluding users with slower internet connections. AMP is a team effort launched with the goal of empowering publishers to create mobile content optimized once, and let it load instantly anywhere

Since its launch, many publishers such as the BBC, The Economist, Guardian News and the Financial Times have implemented the initiative, so we can now rest assured that AMP is an innovation worth considering for anyone looking to stay competitive on the mobile web.

back to menu ↑

AMP in action

Before you dive into the details, here it is AMP demoso you can see it in actionThe demo can be accessed via this link.

To see AMP in action, you need to do two things:

  1. Watch the demo either on one mobile device, or on a mobile simulator, e.g. Chrome DevTools’ Mobile Device simulator.
  2. Perform a search on the search bar. Since Google AMP currently works primarily with news sites, the best choice is a fresh news item.

In the screenshot below, you can see what I got when using the search term rio olympics.

Accelerated Mobile Pages Demo on IPad

As you can see, AMP pages are listed as Google Rich Cards, a mobile- optimized image carousel, which Google released in January.

Note how Google distinguishes AMP pages from others mobileoptimized pages by using 2 different labels: AMP and Mobile-friendly. It’s also worth clicking on some of the results to see what an AMP webpage looks like and how fast it runs mobile

back to menu ↑

Technical background

AMP is one web standard built on existing web technologies, and focused on static content. It has 3 different parts

  1. AMP HTML: modified HTML with (1) the limitation of some regular HTML / CSS features and (2) the introduction of new custom tags (Components)
  2. AMP JS: enforces best practices to reduce page load times
  3. AMP CDN: a cache with a built-in validation system, which further optimizes your site

If you want to learn more about the technical background of AMP pages, check out the video below showing Google’s Paul Bakaus a introductory conversation on AMP.

If you want to dive deeper, it’s also worth understanding what optimization techniques AMP uses to speed up up performance mobileIn the video below, Malte Ubl, the leader of AMP Engineering, explains anatomy of AMP in detail.

back to menu ↑

AMP HTML

Accelerated Mobile Pages are regular HTML pages that must follow some rules to make pages load faster and render reliably.

Let’s take a look at the most important things you need to know about it. You can also view the full AMP HTML specification.

Decide if you want a separate AMP page

For the same static content page, you can 2 separate versions – one for the AMP and one for the non-AMP version. You can also opt for it only one version – the AMP page and use it everywhere. Concerning browser support, AMP’s Github page claims:

If you’re still concerned about browser support, check out Google’s Paul Irish’s post on Stackoverflow.

If you want to have two pages (AMP and non-AMP), you have to link to each of them to inform search engines about the existence of the two versions

Add the following code to the portion of the non-AMP page

tag. The
Compsmag
Logo
Shopping cart