Get Free Quote
« How to Improve Google... | Blog home | Advanced Search... »
February 19, 2019

How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages

  • Print Friendly, PDF & Email

lightning fast

Both searchers and search engines want webpages to be lightning fast. So it’s no surprise that page speed is a ranking factor in Google’s search algorithm.

Multiple studies have shown that page load time also heavily impacts a site’s bottom line: conversion and revenue.

Using Accelerated Mobile Pages (AMP) is one way to speed up your webpages for people using mobile devices.

AMP can present additional benefits: appearing in the AMP carousel in Google search, and offering a better experience to searchers.

AMP search results in Google

Google marks AMP results with a lightning bolt. Some SERPs include an AMP carousel that a user can swipe through.

Is AMP Right for Your Site?

Originally, the AMP solution was intended for media sites. Google wanted to help news stories come up almost instantly from the search results.

Over time, AMP has spread to other types of sites — particularly advertisers, ad-technology platforms and ecommerce sites as well as publishers.

Who is AMP for? diagram from AMPproject.com

Google recommends AMP primarily for these types of sites. (image credit: AMPproject.com)

Today, some websites do benefit from implementing AMP. Retailers and many others use AMP to serve landing pages fast. And ads in this format have a better chance of being seen.

If you’re looking for a way to make your webpages faster, AMP may be right for you.

You don’t need AMP at all for webpages that are responsive and fast enough already. Google’s Gary Illyes has said this publicly. And I explain why in this video clip.

What are alternatives to implementing AMP?

  • Content Delivery Network. CDNs work by bringing the heaviest resource files on a site closer to the end user. Less distance to travel means faster delivery, so your pages display more quickly on a mobile device.
  • Fully implemented HTTP/2. The HTTP/2 protocol speeds up data transport on the web. So if your market has 4G or 5G internet speeds and your website is HTTP/2 enabled, then you probably don’t need AMP at all.
  • Progressive Web Apps technology. PWAs can make your website behave like a native mobile app. We have written about these before (see What Is a Progressive Web App).

Here’s a story to illustrate that HTTP/2 statement.

One of our consulting clients, a U.S. company, converted several thousand of its webpages to AMP. Four staff members worked for five weeks to complete the project.

The result? Their AMP pages displayed slightly faster to mobile searchers. But the website’s rankings and traffic were unaffected. In hindsight, their time and effort would have been better spent creating new content.

The AMP solution makes the most sense in countries/regions with slow network speeds. For example, our Bruce Clay India office has helped implement AMP for some clients there with good results.

You don’t need AMP at all for webpages that are responsive and fast enough already. Click To Tweet

If you believe AMP is right for you and you’re ready to start, I’ll outline the basic first steps.

How to Implement Accelerated Mobile Pages

To implement Accelerated Mobile Pages for your website and track results, there are three basic steps:

  1. Create the AMP page template.
  2. Roll out the AMP pages.
  3. Track with analytics.

We’ll look at each step in detail below, and I’ll also link to AMP documentation for more info.

Once you have decided which parts of your site should be AMP’d, here are the basic steps to creating, publishing and tracking AMP pages.

1. Create the AMP Page Template

The first step in implementing AMP is creating a webpage template.

AMP integrates with many different publishing platforms. You can view the list in AMP’s Quickstart guide and choose your content management system to get more details.

You can build AMP templates from scratch. Or you can convert existing HTML pages into AMP format. The documentation gives information on all the options.

Pointers for creating an AMP template:

  • When creating a page template for AMP, ensure that it meets AMP specs. You can find guidance on HTML format and more at the AMP specifications page.
  • When styling the page, you won’t have JavaScript at your disposal. Include as many custom <amp*> tags as you need to make the layout look good. That includes using responsive images, video and audio (see AMP replacements for details).
  • Keep it simple. After all, the point of AMP is to have a clean, stripped-down webpage.
  • Include some sort of navigation to your domain on each page. You can link from a logo, image or text. Because AMP pages are served from a Google cache, giving searchers a link is essential to try and keep them on your website.
  • If you need to keep ads on your webpages, you must migrate them. Use the amp-ad component. If you cannot use <amp-ad>, then do not include ads in your AMP templates. (You can read more about advertisements on AMP here.)
  • Finally, validate the AMP page. Just one error or warning will keep the page out of the AMP cache. So validation is a crucial step. Check out this page for common validation errors.

This video produced by the AMP Project explains how to validate pages:

2. Roll Out the AMP Pages

I like the idea of testing one or two types of pages from your website on AMP first. Ideally, include some pages that rank so that you can see if Google is serving the AMP version in mobile search results.

Depending on your site’s crawl rate, it could take a couple of days before Google finds, checks and indexes the AMP version of the page.

Let the rollout run for at least one month (longer if you can do it). As long as your pages are getting traffic, you’ll build enough data to ensure that rolling out AMP sitewide is worth it.

3. Track with Analytics

You’ll want to track the performance of your AMP pages. Since AMP analytics will be different from normal Google Analytics, read this guide to understand how it works.

You can track pages via in-house or third-party analytics. Many analytics vendors have built-in configurations for amp-analytics.

You can use amp-pixel for simple tracking and amp-analytics for everything else.

Technical recommendations as you’re setting up tracking:

  • Make sure to use the canonical URL and other variables to define what should be recorded. This is essential to understanding any traffic increases or decreases due to AMP.
  • Use the extraUrlParams attribute in amp‐analytics to add a query string parameter to the canonical URL like “type=amp” or something similar. This will make it easy to differentiate AMP pages from normal webpages in analytics, or to create a custom segment if you need to. This way, you can compare total traffic on pages before and after the AMP launch.

Side Note: How Accelerated Mobile Pages Work

If you’re wondering how AMP pages can possibly appear to load instantly, it’s because they are optimized differently than a regular webpage.

Below I’ve summarized optimizations that AMP does to reduce the amount of work a browser must do to display a page. (See the full list on the AMP Project site.)

Here’s what the AMP process can do:

  • Execute asynchronous JavaScript only – It doesn’t wait for big files to load.
  • Size resources (such as images, ads and iframes) statically – The browser knows exactly how the page will be laid out from the start.
  • Don’t let extensions block rendering – The page doesn’t have to wait even if there are extensions coming.
  • Keep third-party JavaScript out of the critical path – Things like ads are restricted to sandboxed iframes.
  • Allow inline CSS only – Bloated CSS files don’t delay the page.
  • No HTTP requests until fonts start downloading – Keeps fonts efficient.
  • Minimize style recalculations – All DOM reads happen up front to lay out the page.
  • Only run GPU-accelerated animations – The graphics processing unit handles visual animations (transform and opacity), reducing strain on the CPU.
  • Prioritize resource loading – The most important resources (above the fold) get downloaded first.
  • Load pages via prerendered content – Above-the-fold content may be available even before a user selects it, so it appears instantly on click.

This video explains how AMP speeds up webpages:

Concluding Thoughts

AMP is one way that you can speed up your webpages and offer a better experience to mobile users.

If you’re ready to amp up your webpages, follow the basic steps in this article and the AMP documentation to get started. You might even be able to attend one of Google’s AMP Roadshow workshops (see worldwide schedule here).

But my advice for most sites is: reconsider.

Unless it is critical to your business, please do not implement AMP.

The time you invest converting your webpages to a different format could be better spent creating good content that will serve all of your users.

I invite you to share this post. Please subscribe to our blog to get future new posts delivered for free to your inbox.

  • Print Friendly, PDF & Email




11 responses to “How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages”

  1. Lisa George writes:

    Very interesting post on Accelerated Mobile Pages.

    Awesome tips and step by step explanation. Really appreciate the way you have written and explained.

    I am really gonna apply this for the future. Worth reading it.

    Thanks for sharing it with us.

    Good work..!!

  2. venkatesh kumar writes:

    Hi, Bruce clay,
    Thanks for this amazing article. It helps me implement AMP for my website. Keep up the good work.

  3. Paula Allen writes:

    Massimo: Thanks for the update. I see that the AMP Project has scheduled a conference in Tokyo for April (details at https://www.ampproject.org/amp-conf/). I’ll update this comment if we find out more about the roadshow events in particular.

    I heard back from the AMP Project that they have NOT discontinued the roadshows. They said to “stay tuned” for more event dates to be scheduled (via Twitter https://twitter.com/AMPhtml/status/1100137674101293056).

  4. Massimo Cibelli writes:

    Great points and excellent article. In fact, I agree with you on the first point of your second step: “…testing one or two types of pages from your website on AMP first. Ideally, include some pages that rank so that you can see if Google is serving the AMP version in mobile search results.”

    Last point… I noticed AMP stopped their world tour.. when do you think they will start it up again?

    https://www.ampproject.org/amp-roadshow/

  5. James Anderson writes:

    Your explanations of this stuff are the best on the web. Thanks so much I always learn something new from these tutorials

  6. Shubham Yadav writes:

    You will find very few websites which have been built completely in AMP.
    http://www.canbayinc.com is one such website which has been developed in AMP.

  7. Paula Allen writes:

    Hi William: We’ve read that statistic from Google, too; however, the page on ThinkWithGoogle.com that stated it seems to have been removed. Google still has a 2015 post up that states: “40% of shoppers will wait no more than three seconds before abandoning a retail or travel site” (per https://www.thinkwithgoogle.com/marketing-resources/experience-design/speed-is-key-optimize-your-mobile-experience/). It makes sense that mobile users’ expectations have risen since then.

  8. William Denver writes:

    Hi,

    Is it true that a website that loads in more 3 seconds will be abandoned by 60% of its visitors? And how fast are sites that use AMP?

  9. Guide rencontre writes:

    Hello,
    @mansirana
    I would ask you in return : does it depend in witch indutry ?
    PS : the fastest way to load a responsive page is to push no css and images at all (well, back to just html and better than amp) :p

  10. Mansi Rana writes:

    Thank for this valuable post! as there was a lot of buzz about AMP, Does it make any impact on the SEO industry.

    Would love to hear on same from others?

  11. Gale writes:

    Thank you, Bruce Clay! I couldn’t say any better. The AMPs doesn’t affect your website ranking significantly. It is better to concentrate on creating more and better quality content which will improve your website ranking. When I am on any major media website, and they offer me an AMP page, I ignore it. I never found the abbreviated content of AMP pages useful; it is just an extra step for me to read the material that I need.



Get Started
Learn SEO

Be a Blog Subscriber

Save a trip! Get Bruce Clay's latest digital marketing strategy delivered to your inbox for free.

We respect your privacy and never share your email address

Free Executives Guide To SEO
By continuing to use the site, you agree to the use of cookies. AcceptDo Not Accept
css.php