One great way to speed up your WordPress site on mobile is to add Google AMP. Accelerated Mobile Pages (AMP) are web pages designed to load near instantaneously.

If you run a news site or a blog, this technology will definitely help you provide a better user experience and engage your mobile visitors.

In this post, we will explain how to add Google AMP to your WordPress site.

What is Google AMP?

According to Google:

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

Truth is that the web is slow for lots of people, and no one likes to wait for pages to load. Actually, data shows that most people leave a site after just three seconds if the content doesn’t load quickly.

Blogpost-GoogleAMP — This is the AMP version of one of our posts.

In order to address this problem, Google partnered with like-minded players in the industry to create the AMP project. It aims to improve the performance of the mobile web with a strong focus on speed and loading times.

Google AMP is currently used by Twitter, Reddit, Wired, The Washington Post, and many others. Here you can see what Google AMP can do for you and read some interesting case studies.

How to add Google AMP to your WordPress site

There are different WordPress plugins that enable Google AMP on your site. We are going to use the AMP plugin by Automattic this time, as it adds AMP functionality to your site in a very simple way.

First thing you need to do is install and activate the AMP plugin. Upon activation, all posts on your site will have generated AMP-compatible versions.

You can check the AMP version of your articles by adding /amp/ to the end of the URL. For example: www.yoursite.com/name-of-the-post/amp/.

AMP Customizer

Since version 0.4, this plugin added a customizer to see how your AMP pages look on mobile devices. From your dashboard, go to Appearance > AMP.

The AMP Customizer lets you change the header background and link color, the header text color, and the color scheme (light or dark).

If you want to add more styling, or simply get more functionality for AMP, you’ll have to install the AMP for WP plugin or any of these other AMP plugins.

Adding Analytics to your AMP pages

The AMP plugin also extends AMP to support analytics on your WordPress site since version 0.5. It automatically adds this functionality to your page and includes the extended component <amp-analytics>, which is necessary to track traffic and user interactions with AMP pages.

To configure the AMP Analytics Options simply go to AMP > Analytics from your WordPress dashboard. Then follow the next steps.

1. Send data to your analytics provider

In order to integrate analytics with AMP and start sending data, you need to set the value of the type attribute to your analytics provider. In simple terms, you have to specify the name of your provider in the Type field.

If you are using Google Analytics, then enter the value googleanalytics.

Check out here the list of all analytics vendors to see if yours is integrated with AMP and find out the value you have to enter in the type field. Your user ID may be necessary too.

2. Specify what data you want to measure

After defining where to send the analytics data, you will have to determine what data you want to capture and track, and specify those details in the JSON Configuration field. The configuration object uses the following format:

{
  "requests": {
    request-name: request-value,
    ...
  },
  "vars": {
    var-name: var-value,
    ...
  },
  "extraUrlParams": {
    extraurlparam-name: extraurlparam-value,
    ...
  },
  "triggers": {
    trigger-name: trigger-object,
    ...
  },
  "transport": {
    "beacon": *boolean*,
    "xhrpost": *boolean*,
    "image": *boolean*,
    "iframe": *url*,
  }
}

Each analytics vendor supports different values and has different instructions on how to capture data. Please check your provider’s documentation for details.

Here are all the events (user interactions) that are supported for the Google Analytics configuration, and how to specify them in the JSON Configuration with code snippets.

You can also see an example in the image below. We wanted to track when a particular page element was clicked by a user. To do so, we looked for this event in Google’s documentation, copied the code example, and pasted it in the JSON configuration field. Lastly, we replaced the account ID with ours.

AMP_Analytics_Options_Example_JSON_Configuration

For more information about AMP analytics, you can refer to the official documentation.

Final thoughts

Integrating Google AMP on your WordPress site can benefit your business in many ways. If your site loads fast, your visitors are more likely to engage with your content and spend more time on it. Speed is key.

In addition, Google announced last week that starting in July 2018, page speed will be a ranking factor for mobile searches.

This can be a good reason to optimize your WordPress performance and prioritize speed if you haven’t yet. Consider using Google AMP to be faster than your competitors and provide a great experience across devices.