How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages
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.
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 e-commerce sites as well as publishers.
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, then 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:
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 of 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.
- 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, then 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:
- 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.
- 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:
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.
If you’re interested in learning more about mobile optimization practices, then be sure to have a look at these mobile SEO services available to you!
I invite you to share this post. Please subscribe to our blog to get future new posts delivered for free to your inbox.
30 Replies to “How to Implement AMP (If You Really Must): A Quick-Start Guide to Accelerated Mobile Pages”
This article provides an excellent introduction to implementing AMP for webmasters who may not be familiar with the technology. The step-by-step guide gives clear explanations about the benefits of AMP, how to configure it, and how to use it to boost user experience and performance. The information presented is thorough and well-explained, making the article a great resource for anyone wanting to make the most out of their website.
Yes, you are right AMP are very important nowadays. Even we have implemented it on our new websites.
Let me tell you a fact, if someone is working on webstories nowadays, he need to implement AMP on his website. There is no other option.
By the way, great article for those who want to implement AMP on there website.
It was helpful for us too.
hey .. how to use in php version pages ? any tool or code ?
Thanks for your question! We haven’t used any tools to create AMP pages specifically for PHP, but there are multiple plugins/modules for PHP powered sites that use things like WordPress or Drupal.
AMP has more to do with the markup of the HTML that is output from PHP. So, you can still do whatever you need to do in PHP, but control the output so that the HTML is AMP HTML.
Hope this helps!
Beautiful article. I wasn’t even aware that page loading speed was a factor in page ranking.
As you said that why we require a AMP on website just because of mobile users, but according to me normal website is look more responsive than AMP. I don’t use AMP on my website at all.
I think AMP would remove those unwanted media files and ads on the page and make the page load faster. For wordpress sites, it is not so tough to implement AMP. There is already one famous plugin with the name “AMP for wordpress”. I’m using it for some time and I’m absolutely happy with it. The setup is very easy and all we have to do is choose the suitable option to implement AMP on our site through the plugin.
AMP Pages are web pages suitable for your mobile devices, they are really fast and could be useful in everyday life either as a web developer or as a web user.
Great Article. I was thinking about creating my own template but now have changed my mind. Thanks for advice.
I don’t clearly understand why one need the AMP, if you can simply clean your css / js, the same way you need for AMP
Not sure AMP is really good, since it;s all idea is to strip out css / js. Why can’t one clean his css / js without the need for an AMP
AMP is most important of SEO ranking aspect, all my website using amp. It’s solution for user/visitor so this is why using amp
Most of all, implementing AMP means sacrificing a lot of UX elements of your webpage. AMP HTML prioritizes efficiency over say, creativity. But more tangibly, not only are you missing out on rendering some images on your site, AMP pages only allow one advertisement tag per page. Also, implementing this code was incredibly difficult before the WordPress plugin. By the way, your article is very informative.
It’s a little complicated to implement but has a good effect on websites. Are there any tools that can automatically create AMP?
We noticed that AMP is useful just like this “bruceclay blog” for all of us involved in implementing new SEO optimization solutions. Thank you
When the site is well optimized, AMP can further affect the overall quality of the site, but it is difficult for the average user to implement. The blog article is great.
We have definitely noticed that AMP has an impact on site ranking and overall SEO. This is a very useful article.
According to Google Adsense report, my revenue dropped by 10%. They suggest me to use AMP. My site is about entertainment, videos.
There are also lots of places that are really good for faster use of many plugins. Slow sites have problems. Amp big business this blog useful.
Speed is a real issue for almost every website so this is a very helpful material for everyone. Thanks for sharing this informative article.
I’m really amazed by the concept of AMP. I will surely implement it on my website. Thanks for such useful content.
Really faster sites are even visually better than many using many plugins. Slow sites have problems. AMP is a great thing for business, and this blog is very useful.
Very helpful article. Site load speed is very important, especially on mobile devices. Google loves fast sites.
Terrific work! This is the type of information that should be shared around the net. Shame on Google for not positioning this post higher! Come on over and visit my website . Thanks =)