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.
Previously, one of our trusted publishers, Coindoo, had managed to include our ads on AMP pages using Google Ad Manager. However, since then, the platform has changed a lot and implementing an ad changed quite a bit. You can view all the Google Ad Manager changes here.
Although Google Ad Manager has changed, you can still deploy ads from Coinzilla through it on AMP pages.
This is how:
Step 1 – Create a new Order
In order to capture the whole process, we will start by creating a new order. You should generally create a separate order for each ad network and upload their creatives within the dedicated order.
In Google Ad Manager, go under Delivery > orders and click on New Order.
This will open up a form where you mainly have to complete the General Settings. In the name field and advertiser field you add the name of the ad network. As you would most likely not have the ad network as an advertiser yet, you can simply add it by clicking add new company (the option is under the Advertiser field.)
To add Coinzilla as an advertiser you will have to select New Company first and input Coinzilla as an Ad network.
After you fill the mandatory fields, hit New Line.
Step 2 – Create a New Line Item
After creating the Order, you should proceed to create the New Line Item. You will first see a screen that tells you to chose between Display and Video or Audio. Choose Display.
Next, you will be directed to a form in which you will set up the Line Item.
Here, you should start by inputting a name for the ad unit, the type of ad unit it will be, and the expected creatives’ sizes, as discussed with the ad network.
After that, scroll down to delivery settings and fill in the delivery requirements as discussed with the network.
Down the page, you have the Add Targeting section in which you can see what inventory the network can use, where it will be seen, and on what devices.
These are, again, things that you should discuss with the ad network representative.
As for the optional fields, you can leave them as they are. But for further personalization, you can discuss it with one of Coinzilla’s representatives.
Step 3 – Add Creatives
After successfully creating a new Line Item, you will be prompted to the new ad unit’s screen. You can later find it under Delivery > Line Items.
There, you need to click either on Manage creatives or Creatives to be directed to the Creatives section.
Within Creatives, click on the New Creative button and select the size of the banner you expect on the website.
Next will appear a screen where you have to select which type of creative you will upload.
Select the Third Party option.
Within the Third Party type, you have three options for Code Type: Standard, AMP, Standard and AMP.
Select AMP, paste the code given by the ad network, provide a name for the creative, then hit save.
You may have to repeat the third step for each format received from the ad network if you want the website to deploy the banners correctly within your website’s inventory.
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.