Diving into Google Accelerated Mobile Pages (AMP)
If you're a website owner, you know how important it is to have a fast-loading website. Not only does it improve the user experience, but it also helps with search engine optimization (SEO). With the growing usage of mobile devices to browse the web, it's even more crucial to have a mobile-optimized website that loads quickly. This is where Google's Accelerated Mobile Page (AMP) comes in.
AMP is an open-source framework that helps websites load faster on mobile devices. It's designed to reduce the loading time of a page by removing elements that slow down the page load and by using a simplified HTML version. By using AMP, you can ensure that your website loads quickly on mobile devices, which can improve the user experience and can lead to better SEO results. Today we will dive into how to use Google AMP, show you examples of it in practice, and also discuss some of the pros and cons of this new project.
What is the Google Accelerated Mobile Pages Project?
The open source initiative known as the Google Accelerated Mobile Pages Project was originally announced on October 7, 2015 by the Google web team. It officially started showing up in SERPs on February 24, 2016. The inspiration for the project was that Google wants the same code to work across multiple platforms and devices, no matter what type of phone, tablet or mobile device people are using and that it load instantly.
AMP achieves this by reducing the complexity of HTML, JavaScript, and other elements that can slow down page loading times, and by limiting the use of certain types of scripts and styles that can negatively impact performance. In place of these elements, AMP uses a simplified version of HTML, known as AMP HTML, along with custom JavaScript and other components, to provide a fast and efficient user experience.
In retail, a one second delay in mobile can impact mobile conversions by up to 20%.
Google Accelerated Mobile pages (AMP) is available for everyone to use and the HTML source code can be found on their GitHub page. To put is simply, AMP is basically a stripped down HTML page which restricts certain HTML, CSS, and JavaScript. Some interesting requirements to make a note of:
- Allows only asynchronous scripts
- All CSS must be inlined
- Styles are limited to 50 KB
- External resources like images must state their size in HTML
- All JavaScript must be out of critical path
- No user written JavaScript is allowed, only AMP supported
- Fonts must be loaded with a link tag or a CSS
@font-face rule
Remind you of Google PageSpeed Insights guidelines? That is because Google is basically taking all of the recommendations they have told us over the past years and are enforcing them with AMP. Which is a good thing, for the most part, as it should stop some bad mobile performance habits floating around the web.
How do Accelerated Mobile Pages work?
AMP work by reducing the complexity of webpages and limiting the use of certain elements that can slow down loading times on mobile devices. Here's how it works:
Simplified HTML: AMP uses a simplified version of HTML, called AMP HTML, which is optimized for performance. It has a limited set of tags and restrictions on custom JavaScript, allowing for faster rendering of the page.
AMP Components: AMP provides a set of pre-built components, such as AMP images, AMP videos, and AMP ads, which are optimized for fast loading and performance. These components can be easily integrated into AMP pages, reducing the time and effort required to create a fast-loading page.
AMP Cache: The AMP Cache is a content delivery network (CDN) that helps to serve cached versions of AMP pages. When a user accesses an AMP page, the AMP Cache serves a pre-optimized version of the page, reducing the time required to load the page and improving performance.
JavaScript: AMP uses a custom JavaScript library, called AMP JS, to handle resource loading and provide fast rendering of the page. AMP JS ensures that all resources are loaded asynchronously, without blocking the rendering of the page.
Validation: AMP pages are required to follow certain rules and guidelines, and a validation process ensures that all AMP pages meet these standards. This helps to ensure that all AMP pages are optimized for fast performance and provide a consistent user experience.
By using these elements, Accelerated Mobile Pages provide a fast and seamless mobile browsing experience for users. The combination of simplified HTML, optimized components, and a fast content delivery network helps AMP pages load quickly and smoothly, even on slow network connections.
Google has published a great tutorial on how to create your first AMP page. We will go through a quick rundown on what is involved and what you need to know. It is important to know how AMP work in SERPs. In most cases, Google will only serve AMP pages to mobile devices. However, Google does not penalize users who have AMP only pages (i.e. no additional HTML desktop version) such as the AMP Project itself.
Google has a preview up but you can emulate it from your desktop using Chrome DevTools. For example, we toggled device mode over to an Apple iPhone and did a search for "Mars" which is one the AMP promos running. You can see below a little AMP icon that appears in the carousel, which means an AMP HTML page is being served.
So if you are running AMP you might be lucky enough to grab one of those carousel spots on mobile SERPs. And below you can see this is an AMP HTML page.
Below is an example of what you're starting AMP page might look like from an HTML perspective.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>My 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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to my AMP Page</h1>
</body>
</html>
Depending on the platform the AMP page is on the URL might vary slightly, but typically the URL will have /?amp=1 or /amp appended to it.
Some also use .amp as the phys.org did in the Mars example.
According to Google's documentation AMP HTML documents must follow the following syntax.
- Start with the doctype
<!doctype html>. - Contain a top-level
<html ⚡>tag (<html amp>is accepted as well). - Contain
<head>and<body>tags (They are optional in HTML). - Contain a
<link rel="canonical" href="$SOME_URL" />tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. - Contain a
<meta charset="utf-8">tag as the first child of their head tag. - Contain a
<meta name="viewport" content="width=device-width,minimum-scale=1">tag inside their head tag. It's also recommended to include initial-scale=1. - Contain a
<script async src="https://cdn.ampproject.org/v0.js"></script>tag as the last element in their head (this includes and loads the AMP JS library). - Contain the following in their
<head>tag:
<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>
Images
In AMP HTML the <img> tag is replaced with <amp-image>. Here is an example.
<amp-img src="amp-image.jpg" alt="AMP Image" height="200" width="500"></amp-img>
CSS
Remember as we mentioned earlier your CSS must all be inline within your HTML doc using the following tag <style amp-custom>.
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: red;
}
</style>
Validating AMP
Every AMP page must be validated to ensure there are no errors. There is an easy way to validate your AMP HTML page with Google Chrome DevTools.
- Open up your AMP page and add
#development=1to the end of URL. - Launch the Console, refresh the page and you will see if your AMP validation is successful. Learn more about validation.
SEO your AMP pages
By having an AMP version of your post or page you don't want to get dinged for duplicate content, so Google requires that you use the canonical tag when linking to pages.
Example on your original page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Example on your AMP page:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.
Schema required for carousel
If you are wanting to achieve that carousel shown in the earlier preview you are required to use Schema markup. Here is an example below.
<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>
AMP in the wild
There are a number of larger companies and publishers already using AMP HTML in production, such as The Next Web, The Verge, Washington Post, Entrepreneur, The New York Post, and many more. Below is an example of what the AMP page looks like on a recent article posted on The Next Web. The AMP page is accessible via the ?amp=1 string added onto the web page.
http://thenextweb.com/dd/2016/02/29/this-clever-design-firm-is-open-sourcing-its-rejected-logos-so-startups-can-use-them-for-free/**?amp=1**
A big problem today is that people don't optimize the responsive or mobile versions of their website's enough. Here is a comparison of the desktop version and the AMP version of that post above.
Desktop version of The Next Web
As you can see the desktop version of The Next Web post is quite heavy at over 5 MB and 275 requests. That is a lot of content. Most of the weight and requests are actually coming from third party advertising networks.
AMP version of The Next Web
The AMP version of that same post is only 380 KB and only generates 13 requests. That is quite a difference and should have no trouble loading fast on a mobile device.
Pros and cons of Google Accelerated Mobile Pages (AMP)
Google is definitely pushing for a faster mobile web which is great! But there are pros and cons to using Google Accelerated Mobile Pages which every developer should think about before jumping on the AMP bandwagon.
Pros
- AMP is open source.
- Faster load times: One of the main benefits of AMP is faster page load times, even on slow network connections. This provides a better user experience and can help to improve engagement, reduce bounce rates, and increase conversion rates.
- Improved User Experience: By providing fast-loading pages, AMP enhances the mobile browsing experience for users, making it easier for them to access and interact with content.
- Increased visibility in SERPs: AMP pages are highlighted in Google search results, making it easier for users to find and access fast-loading content. This can help to increase visibility, drive more traffic to your site, and improve your search engine rankings.
- Reduced development time and effort: AMP provides pre-built components, such as AMP images, AMP videos, and AMP ads, that can be easily integrated into pages, reducing the time and effort required to create fast-loading pages.
- Better mobile optimization: AMP requires that pages follow certain guidelines and restrictions, ensuring that all AMP pages are optimized for fast performance on mobile devices.
Cons
- Limited customization options: AMP has restrictions on custom HTML, CSS, and JavaScript, limiting the level of customization that can be applied to pages. This may make it challenging for some website owners to implement AMP in a way that meets their specific needs and requirements.
- Dependence on AMP Cache: AMP pages are served through the AMP Cache, which can cause some issues with content control and management. Additionally, relying on a third-party service to deliver content can raise concerns about data privacy and security.
- Limited interactivity: AMP has restrictions on certain types of interactivity, such as form submissions and animations, which may limit the level of engagement that can be achieved on AMP pages.
- Implementation challenges: Implementing AMP can be challenging, especially for website owners who are not familiar with the technology. This may require additional time, effort, and resources to implement and maintain.
Overall, Google Accelerated Mobile Pages (AMP) provides a number of benefits, including faster page load times, improved user experience, and increased visibility in search results. However, there are also some limitations to consider, such as limited customization options, dependence on the AMP Cache, and implementation challenges. Whether AMP is right for your website will depend on your specific needs and requirements.
Using Accelerated Mobile Pages in WordPress
There are a couple WordPress plugins on the repository already that will enable Google Accelerated Mobile Pages on your WordPress site.
- AMP (developed the Automattic team)
- Accelerated Mobile Pages
We installed the AMP plugin on our test site, which automatically creates the AMP version of your posts. There are no settings in the plugin, simply install and you're good to go. It also adds the required canonical and links tags as well.
You can test your schema markup using Google's structured Data Testing Tool. Remember the schema data is needed if you want that carousel feature in SERPs.
Good references for Google Accelerated Mobile Pages (AMP)
There are a lot of great references out there to get you started with Google AMP. Here are a couple we recommend:
Summary
In this blog article, we've taken a deep dive into Google Accelerated Mobile Pages (AMP). AMP is an open-source project from Google that aims to improve the speed and performance of mobile web pages. We've discussed what AMP is, how it works, and how it can benefit your website. AMP pages are optimized for fast performance on mobile devices and can help to improve user experience, increase visibility in search results, and reduce the time and effort required to create fast-loading pages. However, there are also some limitations to consider, such as limited customization options, dependence on the AMP Cache, and implementation challenges. Whether AMP is right for your website will depend on your specific needs and requirements.
In conclusion, AMP provides several benefits and can help improve your users' mobile browsing experience. Perhaps the creation of this project resulted from us not optimizing our sites well enough for mobile in the past? If you're looking to improve the speed and performance of your mobile web pages, AMP may be worth considering.