May 2, 2016

Google AMP: What You Need to Know

Google AMP: What You Need to Know

We live in a world where technology innovations continue to speed up processes, simplify workflows, and above all, make life easier. . As consumers, our expectations around performance continue to rise. According to data collected by Soasta, 47% of consumers expect a web page to load in 2 seconds or less and 46% of smartphone users will not return to a site that performs poorly. Yowza! Google knows they are battling against apps for speed, so they devised a way to improve mobile web page loading. They’re calling it Accelerated Mobile Pages, or AMP for short.

What Google AMP Looks Like

Just in case you haven’t seen it yet, here’s a quick example. When you type in a search term on your mobile device (like we did in the screenshot below) Google displays AMP results first and marks them with a little lightning icon.

Google AMP Search Google AMP Image Google AMP example

Experience the lightning-fast speed of Google AMP through this demo https://g.co/ampdemo

How It Works

Simply stated, AMP is an open source framework created to assist developers in delivering fast-loading web pages that contain static content. The solution uses simplified versions of pages, cached by Google, to speed load times when the pages are accessed on mobile devices. The Accelerated Mobile Pages (AMP) Project is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users.” – ampproject.org AMP consists of three core pieces:

  1. HTML – While most HTML tags in an AMP page are regular tags, some are replaced with AMP-specific tags (see the AMP spec).
  2. JS (JavaScript) – The AMPJS library implements all of AMP’s performance best practices, manages resource loading, and provides developers with the custom tags mentioned above, all to ensure a faster page rendering.
  3. CDN (Content Delivery Network) – The AMP CDN is a proxy-based network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and automatically improves page performance.

The Benefits to You

Because Google AMP compliance improves the overall mobile web experience, Google gives higher rankings to publishers who meet the AMP requirements. Sites that use AMP best practices to improve website speed, mobile experience, and content delivery achieve AMP ranking, meaning those articles and blogs will be displayed in a scrollable carousel. This priority placement gives publishers the advantage by enticing users with a visual result and garnering more clicks. Here is an example of what the carousel articles look like after they’ve been opened from the AMP search result. Readers can simply swipe left to view the next story.

Google AMP carouselGoogle AMP sample

Browser caching is another huge benefit to optimizing for AMP. Google stores images and text so pages are displayed to users almost instantaneously. If you need to update an image or text, don’t worry. Google’s cache will recognize changes in a matter of seconds. Get ready to say, “Hello, more mobile readers!”

Things to Consider

The AMP project is still fairly new, making the framework uncertain. As Google continues to roll out AMP in mobile search results, their API and user experience are bound to change. Make sure you’re following the release notes and technical documentation carefully so that you’re using the latest AMP standards in your development. If your brand uses WordPress for blogging, the plugin to enable AMP makes it easy to implement. Read more about how to validate your AMP, and the best practices to optimize for search here.

With Google AMP placing heavy emphasis on load speed as the driver for a positive user experience, it’s critical to understand your website’s performance. Tools like Google PageSpeed Insights provide ratings and recommendations for overall user experience and speed. SEO teams can help prioritize web pages, and developers can implement best practices to optimize content page delivery.

If you’re feeling a bit overwhelmed or just crunched for time, reach out to a killer creative development agency for a little help.

Charmon Stiles

Written by Charmon Stiles

Share post