This post was most recently updated on January 18th, 2023
The Accelerated Mobile Pages (AMP) project, initially developed by Google in 2015, is now an open-source project. AMP pages first started appearing in 2016 to improve the loading speed of webpages and ads. They can be served alongside standard counterparts and displayed by search engines instead of traditional mobile pages.
AMP protocols have been designed to be a manageable and relatively simple process. If you already have a website with traditional code, AMP says you can convert an entire site in days rather than weeks or months, and you’ll see the page load benefits immediately.
You can choose to run just the AMP version of your site or have both running alongside each other. If you use WordPress as your content management system, you can utilize a standard version of AMP using the various plugins available.
The page speed of AMP comes from caching and is specifically designed to hold page details and deliver them instantly. Online caches hold all the page details, including the text, images, and JavaScript, and load them from the same origin. It contains a built-in validator that guarantees the page will work even if an external resource (such as a live data feed) breaks.
Objects, images, third-party apps, and ads are rendered asynchronously, meaning that one bad piece of code (custom JS code is passed in iFrames) or an ad that is slow to render does not hold up the rest of the page. The content is always shown immediately to the user, creating a very good experience.
In addition, all objects, as mentioned above, must declare their size first before loading. This enables the browser to layout the page correctly and formats the page properly even before content in frames has loaded, rather than waiting for an image to download. This is known as the static layout.
Only a single CSS stylesheet with a maximum size of 50 kilobytes is allowed when it comes to style. This is to encourage programmers to streamline and enhance their code, simplifying where necessary to reduce the load time while still allowing for quite complex page styles.
We’ve all seen websites where the HTML loads a basic version of the site with a base font, then starts downloading the files needed to display the intended font. This might only take a second or two, but because it’s happening in sequence, it’s a different block on the rest of the page, and the downloading of fonts can be delayed until after external objects and style sheets have downloaded. With AMP pages, the fonts start downloading first, and the act of downloading does not hold up the rest of the page. Within the time the fonts have downloaded, the page (or an element) is ready, and the font can be applied instantly.
You can read more about how AMP improves page speed on the AMP site.
So after you’ve created your AMP site or pages, either to run alongside or to replace your existing pages, you’ll want to create AMP ads. Although not mandatory, you can run HTML ads on AMP, but AMPHTML ads are faster, and when you’ve gone to the trouble of creating AMP pages in the first place, it would be a shame not to reap the benefits. Instead of having two sets of ads, AMP ads can be delivered on non-AMPs.
They are written in a variant of HTML, known as AMPHTML, and can not run arbitrary and potentially unnecessary JavaScript. Like the pages, the ads themselves can use JS code blocks in frames that do not slow the rest of the ad.
AMPHTML ads do everything possible to reduce the use of system resources and speed up loading. Videos and animations are paused when not in view. Data is collected once across all ads and then passed to trackers instead of each one requesting the ad directly.
They are displayed just before a user gets to them (which has a knock-on effect of a higher view rate than traditional display ads). Not only that, but as the ads are pre-verified to be safe, malware can not be transmitted via AMPHTML ads.
In terms of ad serving mechanics, AMP ads are not all that different from regular HTML ads. Publishers insert ad slots on their pages using the amp-ad tag, which, when called, can either request ads from the required ad network directly or through a server such as Google Ad Manager. Once the request is received, the creative is validated, and the ad is returned to the page.
To create them, you need to follow the AMPHTML ad specification. You can also build them using Google Web Designer or Celtra Ad Creator. We’d also recommend checking out the examples shown on the AMP developers site.
Again, this step is very much like creating a regular ad tag. Once you’ve headed to Inventory -> Ad units, click to add a new ad unit and then name, size and save your ad as usual, or navigate into an existing ad unit.
In the ‘Tags’ tab, choose the AMP tag. Here you have a few options. You can select/deselect multi-size validation (secondary sizes must not be larger than the primary size or less than ⅔ of the primary size), add placeholders, inventory sizes, and critical values if required. Once you’ve generated the tag, implement the tag on your AMP site or page.
Due to performance considerations, not all ad types available in regular ad tags are available with AMP ad tags.
You can still use standard display, text, native, HTML5, and responsive layouts, but interstitials and flash are not permitted. Expandable ads are also not allowed though you can use rich media as long as it doesn’t resize. All creatives must use HTTPS.
Fluid and fixed-aspect sizes are fine, as are all static sizes. Sizes must be declared at the time of the request.
Google Ad Manager includes reporting options to report on AMPs or AMP ad tags. To report on AMP pages or sites themselves, use the ‘inventory types’ dimension, including a selectable ‘AMP’ field when ads have started serving to AMPs.
If you’re looking for data from a specific AMP ad unit, use the ‘request type’ dimension and look for ‘AMP ad tag’ rows. You can also combine these dimensions to examine whether you’re serving non-AMP ads on AMPs, which will slow down performance.
Also, be sure to read our article on whether switching to AMP will result in an ad revenue hit or not: https://www.monetizemore.com/blog/will-switching-to-amp-result-in-a-revenue-hit/
AMP ads are a great way to speed up page loading times and create a fantastic user experience for your site visitors, who will no longer have to sit around waiting for your content to load. They should be no more challenging to implement than traditional ads while still offering various formats, though not as many as conventional ad units. However, since publishers aren’t all the same, AMP might be a good option for one, and even have a negative impact on ad revenue for another.
Not sure whether AMP is a good fit for your publishing business? Let MonetizeMore help! We’re a Google Certified Publisher Partner that can optimize your ad inventory and maximize your ad revenue. Sign up for a Premium account at MonetizeMore today!
Kean Graham is the CEO and founder of MonetizeMore & a pioneer in the Adtech Industry. He is the resident expert in Ad Optimization, covering areas like Adsense Optimization,GAM Management, and third-party ad network partnerships. Kean believes in the supremacy of direct publisher deals and holistic optimization as keys to effective and consistent ad revenue increases.
10X your ad revenue with our award-winning solutions.
