One of the most common UX issues is site speed, especially for mobile. AMP (Accelerated Mobile Protocol) comes as a solution and a framework to improve and optimize the way websites are designed in terms of speed and usability.
Table of Contents
1. What is AMP?
Accelerated Mobile Protocol, abbreviated as AMP, is a relatively open-source initiative, mainly developed by Google’s employees, that enables the creation of faster websites and ads.
The AMP websites are loaded on Google’s server, granting almost instant loading speed.
2. How does it work?
In order to set up an AMP page, you first need the AMP Page Validator to recognize your website. Once the page is AMP valid it will get it into AMP Cache.
The AMP Validator is a Chrome extension that will point out the changes you should make to have a valid AMP page. To have the Validator recognize your page as an AMP page, you need to include the AMP tag to your HTML code (<HTML AMP lang=”en”>).
The AMP Cache is a component that stores and preloads validated AMP documents published to the web that is available for anyone to use. It also performs automatic optimizations on your site (caches images and fonts, converts and compresses images, limits security threats).
There are several steps that you need to go through in order to set up your AMP website, all of which are explained in the AMP Documentation (https://amp.dev/documentation/).
Does AMP work with WordPress?
Yes, and the installation itself is quite fast. There are 2 main plugins for doing this:
- AMP – WordPress plugin. This is the official plugin developed by the contributors of the AMP Project and Google.
- AMP for WP – Accelerated Mobile Pages.
But which one is better?
We tried implementing both of them into Coinzilla Academy, and we ended up abandoning the implementation altogether.
The official AMP plugin is great. It’s easy to install, but it isn’t very permissive. After we enabled it, the plugin was in conflict with several other plugins, and fixing them required extensive work.
Not to mention that plugins such as OneSignal Push Notifications didn’t work altogether.
AMP for WP, on the other hand, had support for several plugins (such as Contact Form 7, OneSignal, and Adsense). However, the plugin has a free and a paid plan. And the support for those plugins is offered in the paid plan.
If I were to choose between the two, I would definitely opt for AMP for WP, mainly because of its support for plugins.
So why did we ditch AMP if the AMP for WP plugin worked well?
Because AMP can be a pain in the ass if your website is heavily customized using JS and CSS. After several meetings we decided that it would be easier to manually optimize our code than to do it through AMP.
Moreso, uninstalling AMP is also a labor-intensive process. Once removed, you will need to set up 301 redirects from your AMP pages to your non-AMP pages, just to make sure you’re not losing any links and traffic due to 404 errors.
3. What websites should use AMP?
Currently, AMP works best for news websites.
If you’re starting up a news website from scratch, AMP might be a really good approach for you. The high speed it provides may help your website rank higher and quicker in Google’s SERP, and your articles have a better chance to be listed on mobile Google News.
If you don’t have a news website, you should also consider AMP if your mobile website is slow and/or unresponsive (even for desktop if your current version is too slow).
The AMP framework is still developing and expanding its capabilities, getting more and more support from Google. However, there are many webmasters, developers, and publishers who are reluctant to this framework and see it only as Google’s way of trying to monopolize the internet.
Depending on how much will it be enforced, AMP may be the next big thing or may be forgotten in a few years.
4. Displaying ads on an AMP website
According to the guide from amp.dev, you should add the amp-ad in your head section, add the amp-ad tag to your AMP page, specify the size of the ad unit, set ad network parameters, then you’re good to go.
5. Displaying ads with Coinzilla on AMP pages
The AMP development team states that there are 100+ ad servers and networks (AMP partners) that are able to deploy ads on AMP pages. Truth be told, you don’t have to work exclusively with AMP’s partners if you decided to go all the way with the AMP framework.
Before we begin, I just want to say that this guide was put together with the help of one of our trusted publishers, Coindoo. They managed to include our ads on AMP pages with the use of Google Ad Manager.
This is how they did it:
Step 1 – Create a new Ad Unit
To begin with, an ad unit represents the inventory slot from your website’s page. To show an ad on your website you have to either select an existing ad unit or create a new one.
In Google Ad Manager go under Inventory > Ad units and create a new ad unit.
Complete the form with the required information and select the size.
Step 2 – Generate a Tag
After creating the new ad unit, select it and generate a tag. The tag will connect the ad unit in Ad Manager to the inventory slot from your page.
To correctly generate an AMP tag it’s important to select the Accelerated Mobile Pages for the tag type.
Then, at Tag Option, check the Multi Size Validation and select the appropriate unit sizes.
After that, copy the tag result and insert it in your website’s code. You can add the tag manually or with Google Tag Manager.
Step 3 – Generate a New Order
An order represents the advertiser that wishes to show banners on your website. You can have multiple orders on an ad unit.
Go under Delivery > Orders and create a new order. In the New order form, you are required to complete only the first three rows, the others are optional.
In the first row you will name the order, in the second row you will add Coinzila as an Ad Network, then at Trafficker you need to add an email address. This is the owner of the account.
To add Coinzilla as an advertiser you will have to select New Company first and input Coinzilla as an Ad network.
Step 4 – Add a Line Item
A line item works similarly to a campaign.
By clicking the ADD LINE ITEM button from the bottom of the page, you will get into the New Line Item creation panel. First, select Display as an Ad type.
Then set up the new line items Type, Delivery, and targeting.
Step 5 – Add a new Creative
The Creative is the actual banner that will show on your website. You may add multiple creatives to an ad Line.
Go under Delivery > Creatives > New Creative and select Custom. This way you will be able to add the AD code without any problem.
Next, select the standard Code type and insert the ad’s snippet, then save it
The reporting process for an AMP ad is similar to any other Ads. You can either monitor them in Google Ad Manager or Google Analytics. However, keep in mind that Analytics will count pageviews and Ad Manager will count impressions.
The AMP framework makes web page creation approachable even to people who only have a basic understanding of HTML and CSS. Moreover, it provides a better user experience for mobile users.
However, the tendency of amp.dev’s support and guides to encourage the rebuilding of the whole website and limit the information to manual procedures and exclusive collaboration with AMP partners is a major turn off. For a niche like cryptocurrency, such limitations overthrow the advantages the framework comes with.
Even so, if you have the time, patience, and resources, go test it and see how it works for you.