When you open an AMP article, you’ll immediately notice the difference–there’s no lag, no waiting for individual elements to load, and no jittery movements on the page. The entire content of the page is delivered in one smooth motion, which is a big contrast to regular webpages on the mobile web.

Copyblogger’s post on AMP explains this in numbers:

The remaining time until “fully rendered” is spent loading resources like images, ads and iframes. The AMP version of the webpage loaded the HTML in 0.857 seconds and then spent the rest of the time until it was “fully rendered” loading resources like images, ads, and iframes.

A blink of an eye takes around 0.33 seconds.

This means that you can start reading the useful part of the content on the subway almost immediately after blinking your eyes twice, thanks to AMP.

Now that’s speed.

When was the last time you waited for a page to load on your mobile before you blinked twice?

JavaScript can make pages more dynamic, but it can also slow them down.

AMP pages only allow asynchronous JS to load, which speeds up the page. While you are allowed to use custom JavaScript in amp-script, and third-party JavaScript is allowed in iframes, it cannot delay or block the page from rendering.

All resources are sized statically

AMP loads all resources in a prioritized order, based on the size of each resource. The layout is loaded without waiting for resources to download.

Doesn’t allow extensions to slow downloading

While AMP supports extensions that require additional HTTP requests, these requests will not block page loading. Pages using custom scripts must tell the AMP system that there will be an amp-iframe tag, example:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

CSS must be in-line and size-bound

CSS blocks all rendering and tends to get bloated. In AMP HTML pages, only inline styles are allowed. This means that fewer HTTP requests are needed to load the page, which makes the page load faster.

The maximum size for an inline style sheet is 50 kilobytes. Even though this size can accommodate advanced pages, the person creating the page still needs to follow CSS guidelines.

Prioritize image loading accordingly

AMP focuses on items that are needed when users are present on that part of the page. This means that it uses lazy loading to download and load resources that are in the viewport or about to be in the viewport while users scroll through the page.

Implementing AMP: Three Things You Need to Know

AMP has some serious ramifications for content marketers. Though there are advantages to the fresh program, it will take some effort to execute.

Here’s what you need to know:

1. You’ll Need Two Versions of Each Article You Publish

AMP pages are designed to load faster by removing any unnecessary elements. You should keep two copies of each page; one regular version and one AMP version. AMP pages do not include things like JavaScript and embeds, so comments and lead forms will not be present.

2. You’ll Need to Update Your Images and Videos

Multimedia is affected directly by the implementation of AMP. Images on AMP pages will need to use custom amp-ing elements and be a certain width and height. GIFs need to be using the amp-anim feature.

You will now need to put a custom tag on your videos so that they can be embedded using HTML5. This tag is known as amp-video. The only exception is for YouTube videos which use the amp-youtube tag instead of amp-video . Images embedded from social media sites like Facebook, Pinterest, and Vine will need special tags. You can find those tags here.

3. Original Page Versions Must be Modified

You will need to change the original version of your content in order to help Google know that you have AMP versions of your content. This is done by using something akin to a canonical tag:

If your pages are classified as articles, reviews, recipes, or videos, you will need to include Schema.org metadata to help search engines understand the content of the page. If you want your content to appear in the new AMP content carousel feature, make sure your Schema is correct from the beginning.

Ads and AMP

The exponential rise in AdBlocker usage in recent years is one thing that is interesting about Google AMP as a whole. AMP is working to help marketers monetize their sites with advertising without driving users to install ad-blocking software.

This means that ad networks such as AdSense, AdTech, Flite, Taboola, Adform, Yieldmo, and Amazon A9 are compatible with AMP pages, so most content marketers should be able to transition their ads to AMP without any difficulty. If you have a complex ad strategy that involves subscriptions, you will need to put in more effort to make it work with AMP.

AMP and Analytics

AMP understands that it would not be well-received to remove your analytics, so it does not. This program uses a two-pronged approach to analytics in order to provide accurate analytics without slowing down your site. These approaches are as follows:

• Amp-Pixels: The Amp-Pixel element is an easy-to-install tag that helps users track page views.
• Amp-Analytics: Slightly more grown-up than the pixel option, this allows users to view implement more analytics on their sites when Google Analytics won’t work.

Using AMP in WordPress: Getting Started

Although you may not be the ultimate webmaster, it is still easy to get started with AMP in WordPress. Here’s what you need to do:

1. Install the AMP Plugin

The first step to creating an AMP is to install the WordPress plugin. From the GitHub page, click the “Download ZIP” button.

This will install the plugin on your site in the same way as any other plugin. After installing the plugin, go to your article pages and add “/amp/” to the end of the permalinks.

2. Wait for Google

It will take Google a few days to catch on to your new AMP articles. Matt Southern of Search Engine Journal suggests using the Chrome validation process to speed up your work. To do this, follow these steps:

1. Use the Chrome browser to find one of your AMP pages.
2. Add “#development=1” to your page’s URL
3. Open the Chrome Developer Tools toolbar (Control+Shift) and navigate to Console
4. Here, you’ll either see a note that indicates a successful AMP validation or you’ll be confronted with a list of problems to fix.

You’ll need to validate each page you want recognized as being up to Google AMP standards.

3. Check your schema

The Google data testing tool can be used to test the markup on your pages. Ideal schema markup is essential for a successful AMP page.

4. Integrate Google Analytics

In your WordPress dashboard, go to Plugins and then select “Editor.” From there, choose AMP and add this text, changing UA-XXXXX-Y to match your personal Analytics ID. This process is completed by validating all AMP pages, which then allows analytics to resume functioning properly.