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.
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: 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
Technical background
AMP is one web standard built on existing web technologies, and focused on static content. It has 3 different parts 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.
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. 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
