1. 1. Currently reading: Introduction to Google AMP for WordPress
  2. 2. How to Set Up AMP in WordPress

Google AMP (Accelerated Mobile Pages) is a disruptive new technology designed to make the web more mobile-friendly, significantly improving speed and reliability. This series of articles is dedicated to exploring Google AMP and how to set it up in WordPress.

Here’s a list of what we’ll be covering in this series of articles:

  • First, we’ll take a quick look back at current mobile web trends – demonstrating the need for AMP
  • We’ll also give a brief overview of how page speed affects our business and see how AMP can help
  • Next, we’ll understand what AMP is and look at some real-life examples.
  • This will mark the end of this article. In the next article, we will learn how to set up AMP for WordPress

Let’s start.

Google AMP

Before diving into information about AMP, you can follow WP Crafter Video guides related to our posts.

according to 2015 Internet Trends Report In 2015, adults spent an average of 5.6 hours a day on the Internet, according to data released by consulting firm KPCB. Of these, 2.8 hours were spent on mobile devices. This is a significant increase from 2010, when there was an average of only 0.4 hours a day on mobile devices.

Average daily internet usage by device

Source: Ezoic

Average mobile internet usage increased by 600% between 2010 and 2015

Emails opened by the device

Source: Ezoic

A study published in US Consumer Device Preference Report Find More than two-thirds of emails are opened on a mobile device, 52% open on smartphones and 16% on tablets.

digital media usage time

Source: Ezoic

One 2015 US Mobile Apps Report comScore publishes findings 90% increase in total time spent on mobile devices Use by U.S. adults between 2015 and 2013. The same report also stated that mobile apps accounted for 54% of total digital media consumption time, and mobile browsers accounted for 8% of total time.

All told, 62% of digital media usage time is spent on mobile devices.

So yes, a mobile-first strategy is Very important. Now let’s talk about speed.

Load times matter – they matter. This is a key factor that can influence other important factors such as revenue, bounce rate, time on site, search rankings and the performance of almost every other digital marketing channel.

Since revenue is the ultimate goal of any business or website, here’s an interesting fact from a 2014 study “Site speed is hurting everyone’s income”, conducted by digital marketing firm Protent.Highlights of the study are Faster pages make more money.

website speed

Source: Content

When load time was reduced from 8 seconds to 5 seconds (37.5% reduction), dollars per page view (we call it DPPV) increased by 20%.

But the real wins come when page load times are under a second or less.Load times from two seconds to one second result in 2x boost USD per pageview.

Not only revenue but site speed also affects social sharing performanceThe folks at .Protent ran a not-so-exhaustive experiment where they sent 100 paid clicks (from a Facebook ad) to two pages.

Page A loads in 2 seconds and page B loads in 4 seconds. guess what? Page A gets 10 shares, while Page B only gets 2 shares. While the sample size was too small to test the hypothesis, it does tell an important story!

Witnessing the explosive growth of the mobile internet market, the need for faster internet access, better network technology in terms of speed, accessibility and reliability has become paramount. Pioneers like Google quickly realized that a lot could be done to meet this growing demand, and so Project AMP was born.

What is an ampere?

Amplifier Example

Source: BusinessofApps.com

AMP or Accelerated Mobile Pages is an open framework for building a faster, standardized and more responsive mobile web. The beauty of AMP is that it can run on top of existing web technologies and dramatically improve the mobile user experience. This is why Google prefers AMP pages and ranks higher in the SERPs.

How does AMP improve speed?

website speed vector

AMP’s open framework is designed to take and build on existing web technologies. That’s why it works out of the box in content management systems like WordPress.

AMP follows a standardized framework for building web pages and ensures that all existing pages can adapt to that framework.in a little more technical termswhich only allows async scripts, no render-blocking external mechanisms, only inline CSS, etc.

In short, AMP renders the layout of the web page first (almost instantly) and loads the content first. It eliminates any waiting resources and greatly reduces the number of requests. When all these factors are perfectly coordinated with each other, you get a super-fast website that loads almost in an instant.

Check out the speed test below PenguinWP Compilation, which shows the “AMP effect”. Using AMP, they are able to:

  • Increase PageSpeed ​​score by 3 points
  • Reduced page load time from 5 seconds to 1.4 seconds, a 72% reduction!
  • 80% reduction in page size and 82% reduction in number of requests

Here’s a table sharing the numbers:

PageSpeed ​​Score load time total page size Require
original 92 5 1024 118
AMP version 95 1.4 206 twenty one
AMP differences 3 -3.6s -794KB -97
percent improvement 3% -72% -80% -82%

Content preservation

AMP is designed to make the web more beautiful and more responsive to mobile devices. It does this by removing some non-essential functionality from existing web technologies.

That doesn’t mean all the cool features of the modern web have been removed.no, it’s just migrate Consolidate all of these rich content capabilities into a standardized framework with minimal wiggle room.

AMP fully supports image carousels, maps, social plugins, data visualizations and videos to make publisher stories more interactive and stand out.

Case Study: The Washington Post

Wapo

Source: AMP Project

Let’s take a look at the Washington Post vs. AMP case study. After implementing AMP, The Post saw a 23% increase in returning users from mobile searches. This needs a little explanation.

Nearly 55% of The Post’s traffic comes from mobile devices – which again is in sync with the stats shared at the beginning of this article. If the data doesn’t load within 3 seconds, people start leaving.

Traditionally, 51% of mobile search users return to The Washington Post within 7 days. For users who read stories published in AMP, that number jumped to 63%. As a result, retention of mobile search traffic increased by 23% with AMP.

Not only that, but page load times averaged 400ms, which is an 88% improvement after AMP. Today, they push over 1000 articles through AMP.

great. How to access AMP?

You can access the AMP version of any website by appending “/amp” to the URL of any webpage.If the site does not support AMP or encounters rendering errors, it is intended to Degrade gracefully to the original mobile responsive version of the website.

Content distribution

Content vector graphics

“Also known as Free CDN for AMP Articles”

This free service from Google, better known as Google AMP Cache, enables publishers to host their content while allowing efficient distribution through Google’s high-performance global cache network. In other words, it’s like a free CDN for AMP sites.

great. How does it work?

AMP-compliant pages receive special attention from Google.When you start indexing the AMP versions of your site’s pages, Google stores them in a file called AMP cache. You still own the content, Google just helps serve it to the far corners of the planet. Here’s what Google has to say about cached content updates:

“Every time a user accesses AMP content from the cache, the content is automatically updated, and once the content is cached, the updated version is served to the next user.”

How do we access it?

Well, let’s see. If you have the URL of a web page, you first need to check if AMP is enabled. All you need to do is add “/amp” to the URL. Here’s a quick formula on how to get the Google AMP cached URL for any AMP certified website.

  1. Get the AMP version of the web page by appending “/amp” to the URL. If it works, continue to the next step. Otherwise stop.
  2. If a 404 page appears – the site has not implemented AMP.
  3. If you see content loading, AMP is installed.
  4. To get content from the Google AMP cache, just append https://cdn.ampproject.org/c/ to the beginning of the AMP URL, excluding the “www” part.
  5. starts with the primary domain name (Does not include “www”) and copy the AMP URL of the web page.
  6. additional https://cdn.ampproject.org/c/s/ to URL, this should give you the Google AMP cache URL.

Let’s put the above formula to the test using an article from Forbes as an example.

  • Here is the original URL for the Forbes article:
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/
  • To get the AMP version we just add /ampere to the original URL.
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • Now, to get the Google AMP Cache URL, we start by copying the AMP URL, starting with the main domain name, i.e. excluding the “www” part, and continuing to the end. This gives us:
forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • Next we add https://cdn.ampproject.org/c/s/ Go to this URL to get the Google AMP cache URL for the same page.
https://cdn.ampproject.org/c/s/forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp

Check it out, it will work!

Smart Advertising

online advertising

Creating high-quality content requires a lot of resources. Advertising helps fund free services and content on the web. AMP aims to incorporate this philosophy and Over 75 major ad networks.

AMP supports a wide range of ad formats, ad networks and technologies. Any site using AMP will retain their chosen ad network and any format that doesn’t affect the user experience.

analyze

Search Engine Optimization

Publishers also need to understand how users behave when interacting with their content.This is why AMP also works well with Over 25 top analytics solution providers For example comScore, Google Analytics, Krux, etc.

Analysis Platforms Supported by Amplifiers

AMP Supported Analytics Providers 1stone November 2016; Source: AMP Project

in conclusion

Leading content generation, aggregation and analytics platforms have started implementing AMP into their websites. Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics, and LinkedIn are the first technology partners planning to integrate AMP HTML pages. Google also plans to make Google News an AMP-first platform.

It will be interesting to see how this ambitious project evolves to change the future of the web.

I personally like the concept of AMP pages. They’re a pleasure to read, consume far less data than their mobile counterparts, and display ads in a completely unobtrusive way.

With AMP, reading, consuming and sharing content is easier and more fun. In the next article, we will learn how to integrate AMP with WordPress.

What are your thoughts on AMP? Will it pick it up?