What Is Google AMP? How It Works and Why It’s Useful for Mobile Sites
Whatsapp Pinterest
Advertisement

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.

Through a combination of optimizations and restrictions for HTML, JavaScript, and CSS; AMP pages load almost instantly. In place of author-written JavaScript, AMP-specific elements ensure speed and compatibility.

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.

There are two AMP caches in use today, Google’s AMP Cache and Cloudflare’s AMP Cache. Cloudflare’s servers alone cover 102 locations in 50 different countries.

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? Introducing Google's WebP, A Faster Web Alternative To JPEG Introducing Google's WebP, A Faster Web Alternative To JPEG Google has taken it upon themselves to make the Web faster. Read More ) 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 How to Spot Fake "Evil Twin" Public Wi-Fi Networks Run by Hackers How to Spot Fake "Evil Twin" Public Wi-Fi Networks Run by Hackers Not every Wi-Fi network you access is safe. Some of them might even be fake. Read on to learn about Rogue APs and Evil Twins. Read More . 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.

AMP Stories

An addition to the AMP ecosystem earlier this year was the AMP Story. Similar to Snapchat stories How to Use Snapchat: A Complete Beginner's Guide How to Use Snapchat: A Complete Beginner's Guide Snapchat is popular, but a surprising number of people don't know how to use it properly. This article will help turn you from a novice into an expert. Read More , 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?

Google mobile search
Image Credit: DepositPhotos

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. 5 Ways to Check Who Is Tracking You Online 5 Ways to Check Who Is Tracking You Online Want to see who is tracking you online? These websites and browser extensions will show you just how much Google, Facebook, and other ad networks are tracking your activity. Read More

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.

Cloudflare can improve your Accelerated Mobile Pages

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. You Can Now Use Cloudflare's 1.1.1.1 DNS on Mobile You Can Now Use Cloudflare's 1.1.1.1 DNS on Mobile Cloudflare has launched a mobile app for its 1.1.1.1 DNS service. This is now available for both Android and iOS. Read More

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 Goodbye Google: The 15 Best Alternatives to Search, News, Docs, and More Goodbye Google: The 15 Best Alternatives to Search, News, Docs, and More Do you want to switch away from Google for good? These are the best alternatives for all the major Google apps and services. Read More .

Should You Create AMP Pages?

AMP brings a lot of benefits for website owners, especially if you serve high volumes of content daily. However, you can solve many of the issues that slow down a website like excessive use of JavaScript, slow server response, and large file sizes without implementing AMP.

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 How to Disable Google AMP in Google Search on Android and iPhone How to Disable Google AMP in Google Search on Android and iPhone Google AMP has some advantages, but if you want to disable it, one of these three methods should work for you. Read More  on your mobile.

Explore more about: Google AMP, Mobile Browsing, Web Design, Web Development.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Sam Lester
    November 29, 2018 at 10:49 pm

    I like the part about a surge frying a motherboard because sometimes when it does you won't even know when I was eighteen my father stuck his old motherboard from his lighting struck pc in my machine and it even booted through post but then as it got to use the data ports it kept crashing that's when we found out it was fried