How to Create High Performing AMP Pages

How to Create High Performing AMP Pages

The AMP Project was launched in 2015 by Google in order to improve the performance of the mobile web.

AMP is an open-source initiative that aims to drastically reduce the loading time of web pages in order to build high-performing websites across all devices.

The AMP framework consists of three components namely AMP HTML, AMP JavaScript for managing the resource loading, and AMP caches for serving and validating AMP pages.

Most webmasters have started to feel the importance of having AMP pages on their websites. AMP pages help to improve the overall user experience which in turn reduces the bounce rate and increases the number of conversions.

Start by Creating a Basic AMP Page

It is recommended that you start by creating a basic AMP page by using the below boilerplate script:

<!doctype html>
<html amp lang=”en”>
 <head>
   <meta charset=”utf-8″>
   <script async src=”https://cdn.ampproject.org/v0.js”></script>
   <title>This is my first AMP page</title>
   <link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html”>
   <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
   <script type=”application/ld+json”>
     {
       “@context”: “http://schema.org”,
       “@type”: “NewsArticle”,
       “headline”: “Open-source framework for publishing content”,
       “datePublished”: “2015-10-07T12:02:41Z”,
       “image”: [
         “logo.jpg”
       ]
     }
   </script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 </head>
 <body>
   <h1>Welcome AMP</h1>
 </body>
</html>

amp page

You can include images by using the below code:

<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

Moreover, you can make changes to the layout by using the style element as given below:

<style amp-custom>
 /* any custom style goes here */
 body {
   background-color: white;
 }
 amp-img {
   background-color: gray;
   border: 1px solid black;
 }
</style>

For the full tutorial, please refer to this page. As a start, you can create some AMP HTML pages and see how well they respond to your server. After you are comfortable with creating and uploading basic AMP pages, you can gradually move towards creating the more advanced ones.

Add Advanced Features

Display Ads

You can add advertisements in your pages by adding the following script in the header tag:

<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js“></script>

Then, add the following code in the <amp-ad> attribute:

<amp-ad width=”250″
 height=”200″
 type=”a9″
 data-aax_size=”250×200″
 data-aax_pubname=”testad”
 data-aax_src=”32″>
</amp-ad>

This will display an ad as shown in the below example (size is different):

AMP Pages

Add Image Carousels

With the help of the amp-carousel, you can display a set of images as a continuous strip along the horizontal axis.

amp image

An example code is provided below:

<amp-carousel height=”300″
 layout=”fixed-height”
 type=”carousel”>
 <amp-img src=”/img/image1.jpg”
   width=”400″
   height=”300″
   alt=”a sample image”></amp-img>
 <amp-img src=”/img/image2.jpg”
   width=”400″
   height=”300″
   alt=”another sample image”></amp-img>
 <amp-img src=”/img/image3.jpg”
   width=”400″
   height=”300″
   alt=”and another sample image”></amp-img>
</amp-carousel>

Add AMP sidebar

You can add a sidebar navigation as shown in the below example:

amp sidebar

The required script for adding the sidebar is provided below:

<script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js“></script>

Add Scrollbound Effect

Who says you can’t add visual effects on AMP? You can easily add the scroll bound effect on your AMP pages by using the below code:

<div class=”card ampstart-card”>

 <amp-position-observer on=”scroll:fadeTransition.seekTo(percent=event.percent)”
   intersection-ratios=”0″
   layout=”nodisplay”>
 </amp-position-observer>

 <amp-position-observer on=”enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse”
   intersection-ratios=”0.8″
   layout=”nodisplay”>
 </amp-position-observer>

 <amp-fit-text layout=”fill”>
   <div class=”card-title”>
     Organic, fresh tomatos and pasta!
   </div>
 </amp-fit-text>

 <amp-img id=”cardImage”
   width=”1280″
   height=”898″
   layout=”responsive”
   src=”/img/food.jpg”
   alt=”Picture of food table.”></amp-img>
</div>

This will add a scrollbound fade in/out transition in your web page.

For the full tutorial, please refer to this page.

Create Interactive AMP Pages

If I say, you can build entire e-commerce page with full functionality using AMP, you won’t believe me? Right? But that’s possible! AMP is not about reducing the functionality of your pages in order to make them faster. You can create faster user experience even if you keep all the functionality intact. Have a look at the below webpage:

interactive amp

Yes, it’s created using AMP. You can build awesome interactive AMP pages by using the <amp-bind> attribute. The following script is required to add AMP-bind to your web pages:

<script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js“></script>

The amp-bind’s state can be initialized with the amp-state component as given below:

<amp-state id=”myState”>
 <script type=”application/json”>
   {
     “foo”: “bar”
   }
 </script>
</amp-state>

For the full tutorial, please refer to this page.

Validate and Publish

Once you have created your web page, it’s time to preview and validate it. You can do that by using the below steps:

  • Open the page directly in the browser from the file system.
  • Use a local web server like Apache 2 or Nginx.
  • Once uploaded to the server, check it with the help of AMP test tool from Google.

Bonus Tip: You can also conduct A/B experiments by using the <amp-experiment> element. A sample code is provided below:

<amp-experiment>

<script type=”application/json”>

{

 recommendedLinksExperiment: {

   sticky: true,

   variants: {

     shorterList: 25.0,

     longerList: 25.0,

     control: 50.0,

   },

 },

 bExperiment: {…}

}

 </script>

</amp-experiment>

For a detailed reference, visit this resource.

Best Practices to Follow

Here are some of the best practices that you need to follow in order to have an optimized AMP page:

  • The recent Akamai study pointed out that a 100-millisecond delay can hurt conversion rates by up to 7%. Convert your Adwords landing pages to AMP and see your conversion rates jump up. It is the best-kept secret to improve the performance of your Adwords campaigns!
  • Add the Amp-pixel element in your web pages as with its help of it, you can track the number of views that your web pages are receiving.
  • Check out the Google guidelines for creating AMP pages and ensure to follow those.
  • Create a catchy headline and use a compelling image as these components get displayed in the search results along with the AMP symbol (see image below). You can gradually your CTR if you are able to capitalize on these factors.
  • Your AMP and canonical pages must match. Ensure that both the canonical version and the main page offer the same information to the users.
  • If your website is on WordPress, simply install the AMP plugin. Once this is activated, all the posts on your site will have dynamically generated AMP-compatible versions, accessible by appending /amp/ to the end your post URLs.
  • Ensure your AMP pages are not blocked by robots.txt. Always follow the best practices.
  • Always mark up your content items. For qualifying content types, visit this resource.
  • AMP also supports hreflang and internationalization. An example for hreflang annotation is <link rel=”alternate” hreflang=”fr” href=”https://www.example.com/path/to/french.html” />. For pairing non-AMP canonical documents with AMP documents, follow the below diagram:

AMP Pages

  • Don’t forget analytics when it comes to measuring the performance of AMP pages. To add AMP analytics functionality to your page include the following script in the <head>, before the AMP JS library:

     <script async custom-element=”amp-analytics”

        src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js“></script>

        Then add the amp-analytics element to the body of your page.

        <amp-analytics type=”googleanalytics”>

         …

      </amp-analytics>

AMP FAQs

Is AMP a Ranking Signal?

Google has made it clear that AMP is NOT a ranking signal.

Do AMP Pages Get Cached?

Yes, they do provide they are valid. All the resources like AMP images also get cached.

Are AMP Pages and Responsive Pages Similar?

No, they are not similar. Responsive sites only make webpages accessible to all devices irrespective of the screen size, while AMP pages also optimizes the speed and performance of the pages.

Is AMP Only For News Articles?

No, AMP is for every important web page on your site where you want to drive in more visitors.

Are AMP Pages Mobile Only?

No, AMP pages can be displayed on a desktop. In that case, add a canonical link to the AMP page that will point to itself:

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

AMP is not new as innovative features and updates are being added to it on a regular basis. The basic HTML page that AMP resembled when it was launched back in 2015 has changed a lot. With added functionalities and improved capabilities, you can now use AMP pages to easily run your e-commerce store.

High performance is what matters for the mobile web. Google has realized the importance of a speedy mobile web and hence the AMP project was started. As a business owner, you need to start using the advanced features of AMP pages in order to provide users with enhanced web capabilities at high speed that was not possible before.