Using Google AMP to Make Your WordPress Site's Mobile Pages Load Faster

Why Page Speed Matters

If like billions of us you’ve recently consumed web content on a mobile device, you noticed the experience could be improved. Reading news articles is often painfully slow, with pages taking a long time to load. Even after text loads on page, pages continue loading over many seconds, as ads, tracking javascript and images get downloaded. Mobile apps have gotten us used to fast loading content, offline viewing and fast interfaces. But mobile sites often lag behind, literally. This is particularly true for news and blog sites, which make use of many widgets for ads, analytics, sharing and commenting. You can test this easily by installing a content blocker on an iOS device and noticing the speed increase.
Sure, you can use a responsive theme to alleviate some of the problems, but responsive design doesn’t deal with page load performance. Most times, responsive is at the root of the problem: we design websites able to fit on displays of many different resolutions and we fail to create an experience optimised for the smallest displays, lower CPU performance and the slowest connections. With responsive design, all desktop assets and functionality will still load when the page is rendered on mobile, often resulting in poor performance. According to Facebook, the average loading time of a news article on mobile is 8 seconds.
While some of us are lucky enough to have 3G or 4G network connections on our smartphones, you just need to get out of urban centers for network speeds to drop dramatically. And of course there’s the “next billion” people and devices connecting from developing countries where fast network connections are just not available yet.
Fortunately, things are moving in the right direction, with all of the big players working on ways to speed up content loading on mobile devices. Facebook launched Instant Articles, a solution for fast loading web content, though one limited to their walled garden. Apple has launched its own News app. Google launched AMP (Accelerated Mobile Pages), an initiative with a similar purpose as Facebook’s but an open standard approach.
WordPress recently announced they added support for Google's Accelerated Mobile Pages (AMP) to WordPress.com and to WordPress.org sites in the form of a free plugin.
So let’s see how you can add AMP to your WordPress.org blog or news site and benefit from the latest tech to speed up your website on mobile devices.

What is Google AMP?

Google's AMP promise is to make your pages load instantly on mobile devices. It fixes one of the last remaining problems with mobile internet. Despite everyone using it, mobile internet is surprising slow. AMP gets around this by restricting the number features on a page, stripping out design features for speed. Google has claimed that AMP’s loading speed is 85 percent faster than regular web pages.
AMP creates a special mobile view for your website. This new mobile site enhances your content for supported clients such as Google mobile search and Chrome. This new view is in addition to the the regular and mobile websites you already have. Under this view, your pages look like normal web pages but with all but the content stripped away. Because of this, you need to make sure your WordPress site is ready for it

How Does AMP work?

AMP HTML is essentially subset of HTML with only specific JavaScript elements allowed. The focus is on speeding up loading for content heavy sites such as news sites and blogs. While it limits Javascript heavily, it does allow specific Analytics and Advertising elements on your pages, making it a good option for news publishers.
To create its new mobile view, AMP uses three main elements:  

• AMP HTML – This subset of HTML adds some custom tags and properties with many restrictions that allow AMP clients to render your content the way you want it without worrying about performance. The plugin adds these new tags to your pages automatically, but you can use them in your own AMP-specific templates if you need them.
• AMP JS – This JavaScript framework was made for mobile pages that manages the resource handling and asynchronous loading that make the AMP process work. Please note, you cannot use any third-party JavaScript on your AMP pages.
• AMP CDN – AMP provides an optional content delivery network that can cache and optimize your AMP pages further.

Installing AMP

you will need to install the plugin before you can use AMP on your WordPress site. If you’re using WordPress.com, this is already available to you.

The Official Plugin

While you can find the official AMP plugin in the WordPress plugin store, you will only find the latest version at the project's Github site. Thus, you have a choice to make.
Installing the plugin through WordPress is the quickest. You just have to search for amp-wp in the "Add New" section of your Plugins WordPress admin panel. You then simply click install and then activate to start using AMP on your website.
If you need the latest version for any reason, you will have to install the plugin manually. After downloading the Github package, you just have to click "Upload plugin" while in your "Add New"  Plugins panel. Just find the zip file containing the package, and let WordPress take things from there. Once upload finishes, you can just activate the plugin to begin using it.

PageFrog and Other AMP Plugins

The official plugin comes directly from Google's AMP project team, making it the most up to date version of AMP. It creates an /amp/ version of every page and post you have. You just have to add /amp/ to the end of the URls to see them yourself.
However, you cannot edit these AMP pages. If you need something more than what the base plugin gives you, you will need one of the other AMP plugins out there, such as PageFrog.
PageFrog builds on the core AMP plugin by allowing you to edit some of the changes it makes. It will even let you add some style and theming features, as well as other protocols such as Facebook's Instant Articles. You can find PageFrog and a few other  AMP plugins on WordPress plugin store.

Configuring your WordPress site for AMP

Once you activated the plugin, you are done. For most installations, you just have to create the content as you would normally do, and the plugin will take care of the rest. Note though, things such as your Google Analytics code won’t be working on your AMP pages out of the box. Read through to see how to add Analytics and SEO features to your new AMP pages. .

Adding Google Analytics to your AMP pages

If you need these features on your mobile pages as well, you have to manually add them to the plugin's single.php page template.
To do this, you will have to click the edit option next to the AMP plugin's name in your Plugins list. From there, you just click the single.php link to start editing it. Please note that you might have to redo this every time your update the plugin.

SEO Plugins and AMP

Because your AMP pages will not include any of your SEO features, you are going to need a new AMP-compatible SEO plugin.
Fortunately, most SEO plugin developers have or will have AMP extensions you can use. You will have to install them separately, but you need them to ensure all your pages work towards improving your site's SEO.
As of this article, only three SEO WordPress Plugins have released AMP extensions or updates.

• Glue for Yoast SEO - Adds AMP support to the Yoast SEO WordPress plugin
• Schema App Structured Data - SEO schema plugin with AMP from schema.org
• WP SEO Structured Data Schema - SEO schema plugin with AMP from Kansas City SEO

Fixing Any Errors

As with any addition to your website, you want to test your AMP pages for errors and inconsistencies, and correct them.
AMP is still evolving, and many of the features may still have bugs. You will have to manually fix these errors in your template files before you make your AMP pages public. Just remember, that you might have to redo your edits each time you update the plugin in case anything changes.

Advertising on your AMP pages

AMP HTML doesn’t allow JavaScript so ads cannot be directly embedded – instead they live in sandboxed iframes with no access to the main article contents.
Google designed AMP to allow some types of advertising through. You just need the AMP-compatible version of your ad plugins. You can find a complete list of these compatible plugins on the AMP Github page.
Currently supported ad providers include the following:

• A9
• AdReactor
• AdSense
• AdTech
• Doubleclick

AMP or Mobile App?

While AMP can help speed up your site’s article pages under some conditions, it won’t work in every situation and on all devices. Not only that, it also comes with great limitations on what kind of analytics (no js!) and advertising you can run on your pages.
AMP can be an effective solution for traffic coming from search, but how about your most loyal readers?
For those, I believe an app still makes a lot of makes sense, depending on the type and size of your audience. An app can still provide many benefits even AMP or Instant Articles fail to provide: content delivery and re-activation with push notifications, content caching and offline use, a presence on app stores and, even more importantly, the user’s home screen.
So if you’re looking for a platform that will help you drive growth over time, while retaining control of your content and mobile specific options for advertising and analytics, then consider publishing your own app. If you’re using WordPress on your news or blog site, then we might have the right solution for you over at MobiLoud.