What Is Google AMP? How It Works and Why It’s Useful for Mobile Sites
Google AMP, or Accelerated Mobile Pages, is an open-source project created by Google with the aim of facilitating a smoother browsing experience for mobile devices.
The project promises higher performance, increased engagement, and less data usage that benefits both users and publishers.
How Does AMP Work?
Page Speed became a ranking factor for mobile pages in July of this year (2018), and AMP is here to satisfy your website’s need for speed. In fact, AMP promises to make mobile browsing up to 85% faster.
Page speed also improves with above-the-fold prioritization, specific AMP caches, and prerendering. Additionally, the use of small files and media, and few resource requests from the server adds further speed improvements.
The optimizations in AMP will also make sure the layout of your pages always load correctly, even before images and iframes (for adverts) are loaded.
This is done by specifying the size of images and iframes in the HTML document (called “static layouting”). And basically stops content moving around to fit the resources as they load.
What Is AMP Caching?
If you publish a valid AMP site, your pages are automatically cached as part of the AMP ecosystem. The cache will store your AMP documents, fonts, and images.
The cache is updated each time someone accesses content, and the updated content is served to the next user automatically. This ensures the latest version is served quickly to as many people as possible.
In addition to caching the content, the cache server will also provide some optimizations and modifications such as:
- Validating the AMP format.
- Limiting image dimensions to prevent browser memory issues and poor responsiveness.
- Removal of image data that is invisible or difficult to see, such as certain metadata.
- Converting images to smaller and more mobile-friendly image formats, such as converting GIF, PNG, and JPEG format images to WebP (what is WebP? ) in browsers that support WebP.
- Transforming images to lower quality if the request includes the Save-Data header.
- Adds support for responsively sized images.
- Serves over a secure channel (HTTPS) and uses the latest web protocols (SPDY, HTTP/2).
- Sanitizes AMP documents to prevent XSS attacks based on incorrectly closed HTML tags, comments, and more.
In addition to these optimizations, the cache will also complete many HTML sanitization processes to normalize parsing.
A full list of AMP cache optimizations is available on the Google Developers pages.
What Are the Actual Benefits of AMP?
Speed is the main attraction of AMP. And it’s why many publishers like Google, Facebook, Baidu, Pinterest, and Twitter have already adopted the technology. The improved speed adds engagement and lowers bounce rates almost across the board.
AMP is especially useful in areas of low mobile internet coverage, or on congested and slow public networks like airports and coffee shops . And it’s why content loads in their apps so fast when regular browsing is slow.
Research done in a Forrester Consulting Total Economic Impact study (commissioned by Google) last year, found that:
“AMP leads to a 10% increase in website traffic with a 2x increase in time spent on page. For e-commerce websites using AMP, the study also found a 20% increase in sales conversions compared to non-AMP pages.”
Google’s Top Stories Carousel on mobile will only use Google’s AMP Cache to display articles, so for many publishers, using AMP should be an automatic choice.
New York Times, eBay, and AliExpress are good examples to check out that have taken advantage of AMP. If you click content from these sites (marked with an amp icon) in Google search on your mobile, you will load the AMP version of their pages.
An addition to the AMP ecosystem earlier this year was the AMP Story. Similar to Snapchat stories , these are already in use by many publishers. Good examples include CNN’s story about missions still exploring our Solar System, and Mashable’s essential guide to Black Panther.
AMP Story Ads, an addition to the stories feature, was recently made available to all websites that use Google Ad Manager. These are fullscreen ads that appear in AMP stories, and are one of the many improvements that have made AMP much more useful than even a year ago.
What Are the Downsides to AMP?
If you use Google, Twitter, Pinterest, Messenger, etc., you will notice that external links will open within the domain itself, instead of the domain it’s linked to.
Although the AMP viewer improves the browsing experience for users, it can be a negative for website owners. It takes away from your power to control visitor’s navigation through your site.
This can rob your site of page-views and could disturb your ad revenue. There are even some analytics and tracking issues that can be difficult to solve unless you use Google Analytics for AMP.
That said, some readers may prefer the tracking difficulties. If so here’s what you can do to find out who is tracking you online.
Google’s Top Stories Carousel on mobile devices will only feature AMP ready content. This is an important fact since the majority of traffic to all AMP content comes from people searching on Google.com.
This AMP favoritism doesn’t just stop at the news carousel. Google will also feature AMP enabled websites higher than any other links, including standard mobile-friendly sites. All that said, AMP itself is not technically a Page Rank factor (yet), but the speed improvements are.
Even if you make your AMP pages available, they won’t always be used depending on the OS, apps, or device used. If you use Cloudflare, you can enable Accelerated Mobile Links to identify and display AMP content from your site on mobile, no matter the source.
Cloudflare can also help you improve your privacy and performance when using your mobile.
Visualization and Design in AMP
We love ourselves some fancy looking websites. However, limitations of AMP can make you lose some of your sites visual appeal that you can otherwise retain using Responsive websites and Mobile design.
Plugins in WordPress, for example, will serve AMP by offering a simplified version of your website. These WordPress to AMP converters offer very little visual appeal and are one of the main reasons why many AMP sites look similar.
If you design your AMP pages by hand, rather than using converters, you can get a design that is similar to traditional mobile design, and more visually appealing.
AMP still has a way to go, and many developers are strongly against its use as it’s forcing them to enter the Google ecosystem even further. This is causing many to search for Google alternatives .
Should You Create AMP Pages?
Being smart with your mobile design can serve your website fast. Jenny Gove at Google has written a great article on What Makes a Good Mobile Site, which is worth a read.
There are WordPress AMP plugins and Drupal AMP plugins that can assist you in generating AMP content. Otherwise, the AmpProject quickstart documents are a valuable resource to use to hand code your AMP pages.
The entire AMPProject website is actually created and rendered in AMP, so it’s is a good example of how these pages can look in all resolutions, not just on mobile.
Although people have a strong dislike of AMP for many different reasons, Stonetemple.com has looked at 10 case studies to see the difference in user engagement and conversion. They conclude that as long as the AMP implementation is done completely, most websites, regardless of their niche, will see benefits.
The bottom line is that you should consider whether your customers will get any benefits from AMP. Depending on the services you offer and the content you serve, it may not add improvements over mobile pages. With proper optimization, mobile pages can load pretty fast too!
How to Disable AMP
Caching is a core part of the AMP ecosystem, and publishing a valid AMP document automatically opts it into cache delivery. If you want to remove your pages, Google has written a guide on how to remove AMP Content from Google Search.
If you want to stop loading AMP pages as a user, you can disable AMP Links and load the original pages instead on your mobile.