{"id":3794,"date":"2020-12-02T03:28:38","date_gmt":"2020-12-02T08:28:38","guid":{"rendered":"https:\/\/www.adpushup.com\/?page_id=3794"},"modified":"2022-09-01T09:09:48","modified_gmt":"2022-09-01T13:09:48","slug":"amp-accelerated-mobile-pages-guide","status":"publish","type":"page","link":"https:\/\/www.adpushup.com\/amp-accelerated-mobile-pages-guide\/","title":{"rendered":"Accelerated Mobile Pages (AMP): A Publisher\u2019s Guide"},"content":{"rendered":"
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n
\n

Accelerated Mobile Pages<\/strong><\/h1>\n
\n

AMP or Accelerated Mobile Pages is an open-source web component framework used by web publishers to improve the speed and performance of their mobile site.<\/span><\/p>\n
\n download guide <\/a>\n <\/div>\n\n

\n \"Alternative\n <\/div>\n<\/div>\n\t<\/div>\n<\/header>\r\n

 <\/p>\r\n\r\n

Two seconds is all you get<\/strong> before your readers start bouncing off if your webpage doesn\u2019t load.<\/p>\r\n\r\n\r\n\r\n

Seems unrealistic? Fine, give it three seconds, but now you’re gambling\u2014roughly 40% of users will leave<\/a>, and then it only goes downhill from there.<\/p>\r\n\r\n\r\n\r\n

Page abandonment is a terrible incident for publishers:<\/strong> It increases bounce rate, decreases ad revenue, and generally throws a wet towel on all their hard work.<\/p>\r\n\r\n\r\n\r\n

The ad tech giant, Google decided to fix this situation by launching AMP.<\/p>\r\n\r\n\r\n\r\n

What does it mean for you though? How can you implement it on your website? And more importantly, should you? Read on to find out in our guide on Google AMP.<\/p>\r\n\r\n\r\n\r\n

\u00a0<\/div>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n
\r\n
\r\n

What is an Accelerated Mobile
Page (AMP)?<\/h2>\r\n<\/div>\r\n<\/section>\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n

AMP is an open-source project based on AMP HTML, an open framework built out of existing web technologies, which allows websites to build light-weight web pages.<\/p>\r\n\r\n\r\n\r\n

The primary goal of the project is to speed up the delivery of content on all mobile devices by stripping away all that is unessential.<\/p>\r\n\r\n\r\n\r\n

\r\n

Today, after discussions with publishers and technology companies around the world, we\u2019re announcing a new open-source initiative called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web. We want webpages with rich content like video, animations, and graphics to work alongside smart ads and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant\u2014no matter what type of phone, tablet, or mobile device you\u2019re using.<\/p>\r\nGoogle Official Blog<\/a><\/cite><\/blockquote>\r\n\r\n\r\n\r\n

With mobile traffic now exceeding desktop, publishers, advertisers, and developers can no longer afford to look the other way while users bounce from one page to another in frustration\u2014and as far as Google is concerned\u2014speed matters far more than features.<\/p>\r\n\r\n\r\n\r\n

Some big news publications such as Time, The Atlantic, Vox, BBC, and The Huffington Post and several technology companies like WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn, and Pinterest have already joined AMP.<\/p>\r\n\r\n\r\n\r\n

Perhaps the biggest selling point of Google AMP is that it\u2019s open-source, and therefore any publisher can sign up and start using it, unlike other more tightly controlled projects such as Facebook’s Instant Articles and Apple News.<\/p>\r\n\r\n\r\n\r\n

\u00a0<\/div>\r\n\r\n
\r\n

Is AMP Really That Fast?<\/h2>\r\n<\/div>\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n

Yes, it is.<\/p>\r\n\r\n\r\n\r\n

Jon Parise from Pinterest says<\/a>, \u201cAccelerated Mobile Pages load four times faster and use eight times fewer data than traditional mobile-optimized pages.\u201d<\/p>\r\n\r\n\r\n\r\n

Hey, why don’t you try it for yourself?<\/strong> Just open Google on your mobile device and type in anything that’s making news right now. For the sake of an example, let\u2019s type “Cardi B”, well, because she is cool and always making news.<\/p>\r\n\r\n\r\n\r\n

Just above the search results, you will see a stack of horizontally scroll-able cards tagged “AMP”. Clicking on a card will load that article.<\/p>\r\n\r\n\r\n\r\n

\u00a0<\/div>\r\n\r\n\r\n\r\n
\r\n
\"AMP<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n

You’ll notice the difference instantly as you open an AMP article<\/strong>\u2014there’s no lag, no waiting for individual elements to load, no jittery movements on the page\u2014the entire content of the page is delivered in one smooth motion and seems like a far cry from the regular webpages on the mobile web.<\/p>\r\n\r\n\r\n\r\n

Copyblogger’s post on AMP<\/a> explains this in numbers:<\/p>\r\n\r\n\r\n\r\n

The AMP version reached \u201cdomContentLoaded \u2014 a key point in a webpage\u2019s load where the HTML is fully downloaded and certain important parsing has been completed\u201d in 0.857 seconds.<\/p>\r\n\r\n\r\n\r\n

A blink of an eye takes around 0.33 seconds.<\/p>\r\n\r\n\r\n\r\n

In other words, blink your eye twice and you, our subway commuter, can start reading the useful part of the content almost instantly, thanks to AMP.<\/p>\r\n\r\n\r\n\r\n

Now that’s speed.<\/p>\r\n\r\n\r\n\r\n

When was the last time a page loaded on your mobile before you even blinked twice?<\/p>\r\n\r\n\r\n\r\n

\u00a0<\/div>\r\n\r\n\r\n
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n
\n

What Makes AMP So Fast?<\/h1>\n

<\/p>\n <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n

 <\/p>\r\n\r\n

\u00a0<\/div>\r\n\r\n\r\n\r\n

While JavaScript is the magic wand that most front-end developers have to just do anything with their webpages, it can also slow down the rendering of a page.<\/p>\r\n\r\n\r\n\r\n

With AMP, webpages block the unnecessary JS codes (only asynchronous JS is allowed) to speed up the loading. While custom JS is allowed in amp-script<\/em>, and third-party JS is allowed in iframes<\/em>, it cannot block rendering.<\/p>\r\n\r\n\r\n\r\n

All resources are sized statically<\/strong><\/p>\r\n\r\n\r\n\r\n

AMP takes the size of all the resources – such as images, ads, and iframes – to position them before downloading. It starts with loading the layout without waiting for resources to download.<\/p>\r\n\r\n\r\n\r\n

Doesn\u2019t allow extensions to slow downloading<\/strong><\/p>\r\n\r\n\r\n\r\n

AMP supports extensions like lightboxes, embeds, tweets, etc. These require additional HTTP requests, however, do not block page loading. Pages using custom scripts must tell the AMP system that there will be an amp-iframe tag, example:<\/p>\r\n\r\n\r\n\r\n

<script async custom-element=\"amp-iframe\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-iframe-0.1.js\"><\/script><\/code><\/pre>\r\n\r\n\r\n\r\n
CSS must be in-line and size-bound<\/strong><\/p>\r\n\r\n\r\n\r\n
CSS blocks all rendering and tends to get bloated. In AMP HTML pages, only inline styles are allowed. This removes a lot of HTTP requests from the critical rendering path compared to most web pages.<\/p>\r\n\r\n\r\n\r\n
Also, the inline style sheet has a maximum size of 50 kilobytes. While this size is big enough for very sophisticated pages, it still requires the page author to practice good CSS hygiene.<\/p>\r\n\r\n\r\n\r\n
Prioritize image loading accordingly<\/strong><\/p>\r\n\r\n\r\n\r\n
AMP focuses on things that are required as\/when users appear on that part of the page. Meaning, it uses lazy loading technology<\/a> to download and load resources that are in the viewport or about to be in the viewport while users scroll through the page.<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n  
\n    
How does AMP Impact Search Results?<\/h1>\n    
<\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
Google search is the largest search engine and AMP is designed by Google, so using these together will definitely help with search rankings, right?<\/p>\r\n\r\n\r\n\r\n
WRONG!<\/p>\r\n\r\n\r\n\r\n
AMP is not a ranking factor for any search engine – including Google – to rank a page. This is the reason you might see a lot of non-AMP pages appear on top of AMP pages on mobile devices.<\/p>\r\n\r\n\r\n\r\n
While AMP itself isn’t a ranking factor, speed is a ranking factor for Google Search. Google Search applies the same standard to all pages, regardless of the technology used to build the page.<\/p>\r\n\r\n\r\n\r\n
Apart from that, having AMP enabled can let your webpage feature on mobile search as part of rich results and carousels. These can be:<\/p>\r\n\r\n\r\n\r\n
\r\n
\r\n
Basic search result:<\/strong> This category describes regular web results, the link of the page is often followed by AMP\u2019s thunderbolt sign (or logo).<\/p>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\"AMP<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
 <\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\"AMP<\/figure>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
Top stories carousel:<\/strong> Some articles, live blogs, and videos appear in a rectangular container. This can also be achieved by structuring your page for Google to better understand the schema types (news articles, discussion forums, video objects, etc.).<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
Rich result:<\/strong> <\/strong>This includes styling, images, and other features and is used to rate\/review restaurants, recipes, and other such products.<\/p>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\"AMP<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
 <\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\"AMP<\/figure>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
Web Stories:<\/strong> A visual storytelling format in Google Search results that immerses the user in a tap-through full-screen experience. Web Stories can also appear in Google Images, Discover, and the Google app.<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n  
\n    
Benefits of Accelerated Mobile Pages<\/h1>\n    
<\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
Reduced load time:<\/strong> The name speaks for itself, AMP is primarily designed to reduce loading speed for mobile devices and it rightly does the same by bringing the loading time to as low as 2-3 seconds.<\/p>\r\n\r\n\r\n\r\n
Low bounce rates:<\/strong> Slow page is the number one reason for users to bounce off<\/a>. Given a sharp decrease in loading time, publishers should experience a low bounce rate.<\/p>\r\n\r\n\r\n\r\n
Better SEO: <\/strong>Already stated that loading time is a ranking factor for most search engines and with the reduced page loading speed, you should see an improvement in your page ranks. Not to forget that AMP pages also increase the chances to be featured on Google carousel and other SERP features.<\/p>\r\n\r\n\r\n\r\n
Increase in web traffic:<\/strong> With better SEO, you should expect better site traffic. Given that AMP can improve your SEO and low loading speed would help you reduce bounce rate if your content is exceptional too, you can get good session numbers from users appearing on the site.<\/p>\r\n\r\n\r\n\r\n
Supported by all browsers:<\/strong> Since AMP strips down all unnecessary JS and CSS, browsers get a clean HTML code to interpret and show on the screen.<\/p>\r\n\r\n\r\n\r\n
Optimized data consumption:<\/strong> Removing unnecessary JS and CSS also means that pages will be using fewer browser and computing resources. For example, AMP reduces the image size to just the right size for the browser to quickly load, this also means the browser will be downloading a reduced file size – a clear reduction in data usage.<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n  
\n    
So, What’s the Catch?<\/h1>\n    
<\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
I’m sure this all sounds too good to be true so far\u2014so what’s the tradeoff? What is all this extra stuff that’s being “stripped away” to make the page load faster anyway?<\/p>\r\n\r\n\r\n\r\n
Well, here’s what AMP strips away: Social media plugins, pop-ups, image carousels, videos, analytics software, tracking scripts, and many other things that are requested in the background when a page is being loaded.<\/strong><\/p>\r\n\r\n\r\n\r\n
It also does not support third party Javascript. That’s the secret to its speed. So obviously, implementing it for your content means losing out on the functionality linked to the things mentioned above.<\/p>\r\n\r\n\r\n\r\n
Some say that AMP works out well only for larger publishers who already have a ready audience. Smaller publishers won’t be able to do basic things such as collecting emails because forms might not be supported by AMP. Concerns like these may very well turn out to be a deal-breaker for some publishers.<\/p>\r\n\r\n\r\n\r\n
However, these concerns can be taken care up-to some extent if you work with a developer who\u2019s hands on with AMP. For AMP monetization, we recommend you to think of a partner who specializes in the tech (like AdPushup).<\/p>\r\n\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n
\n\t\n\t\n\t\n\t
\n\t\t\n\t\t
\n  
\n    
How Do I Get Started With AMP?<\/h1>\n    
<\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
\u00a0<\/div>\r\n\r\n\r\n\r\n
You’ll need to be familiar with markup to be able to set up an AMP page. We recommend that you take some time out and go through the official AMP tutorial and related guides<\/a> once\u2014if you’ve never worked with HTML before\u2014this is where you hire a developer OR ask your tech-savvy friend or coworker to help you out a bit in understanding how this works.<\/p>\r\n\r\n\r\n\r\n
With a little bit of effort, you’ll be able to:<\/p>\r\n\r\n\r\n\r\n
    \r\n
  1. Create an AMP page using the boilerplate code.<\/li>\r\n
  2. Stage it.<\/li>\r\n
  3. Ensure AMP compliance by using Google’s validator.<\/li>\r\n
  4. Publish and distribute.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    In case you happen to be published on WordPress\u2014you’re in luck. You can use WordPress plugin for AMP<\/a> that dynamically converts all your post pages into AMP-compliant versions. This is immensely helpful as it saves you all the legwork. All you have to do is activate the plugin once and all your posts are instantly AMP-ified.<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n
    \n\t\n\t\n\t\n\t
    \n\t\t\n\t\t
    \n  
    \n    
    Does AMP Support Ads?<\/h1>\n    
    <\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    This is a big question for publishers. You’d be happy to know that AMP does indeed support advertising<\/a>; at least for Google, that’s kind of like the whole point of this exercise anyway.<\/p>\r\n\r\n\r\n\r\n
    \r\n
    Ads help fund free services and content on the web. With Accelerated Mobile Pages, we want to support a comprehensive range of ad formats, ad networks, and technologies. Any sites using AMP HTML will retain their choice of ad networks, as well as any formats that don\u2019t detract from the user experience. It\u2019s also a core goal of the project to support subscriptions and paywalls. We\u2019ll work with publishers and those in the industry to help define the parameters of an ad experience that still provides the speed we\u2019re striving for with AMP.<\/p>\r\nGoogle Official Blog<\/a><\/cite><\/blockquote>\r\n\r\n\r\n\r\n
    In fact, not only does AdSense support AMP but the following ad networks are supported as well: Criteo, OpenX, Smart Ad Server, TripleLift, Teads, and more.<\/p>\r\n\r\n\r\n\r\n
    Publishers should see an improvement in ad performance and consequently ad revenue because those 40% or so users who were earlier bouncing off the page will stick around now to see the ads.<\/p>\r\n\r\n\r\n\r\n
    Here\u2019s how AMP evolved to help web publishers with their ad revenue goals:<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    AMPHTML Ads For All Pages<\/h3>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    AMPHTML ads are faster, lighter, and more secure than standard ads. They are built using AMP-HTML and use many of the smart components that make AMP pages fast.<\/p>\r\n\r\n\r\n\r\n
    AMPHTML ads are designed to work on both AMP and non-AMP web pages, across any device, in a variety of standard and creative formats (like carousel, parallax, lightbox).<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    Built-in Consent Element<\/h3>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    In April and early May 2018, AMP Project released two updates<\/a> that let publishers build user controls and manage the choices via a new AMP component called <amp-consent>.<\/p>\r\n\r\n\r\n\r\n
    This allows publishers to capture the user\u2019s consent decision and makes the user\u2019s setting available to elements on the AMP page to modify the page\u2019s behavior.<\/p>\r\n\r\n\r\n\r\n
    Additionally, elements can be further customized by vendors to have more sophisticated behaviors that depend on the user\u2019s setting.<\/p>\r\n\r\n\r\n\r\n
    DFP\/AdX and AdSense support <amp-consent> publishers may choose to serve non-personalized ads to users, or they may choose to serve ads selectively based on consent.<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    Video Ads on AMP Pages<\/h3>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    Videos are known to take some time to load on the browser, thanks to the heavy file size. Using video ads with AMP seemed impossible at first.<\/p>\r\n\r\n\r\n\r\n
    However, with the rise of video advertising<\/a>, AMP came out with the solution to run video ads on AMP pages.<\/p>\r\n\r\n\r\n\r\n
    AMP allows both in-stream and outstream video ads<\/a>. In-stream video ads can be rendered using <amp-ima-video> extension. It has all the basic features including auto-play, docking on a scroll, and analytics.<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n
    \n\t\n\t\n\t\n\t
    \n\t\t\n\t\t
    \n  
    \n    
    How Can I Monetize AMP Inventory?<\/h1>\n    
    <\/p>\n  <\/div>\n<\/div>\n\t<\/div>\n<\/section>\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    AMP is fast. It is the best thing that happened to the publisher\u2019s mobile sites. However, if you handle your AMP inventory the same you handle the rest of your inventory, the results might be underwhelming.\u00a0<\/p>\r\n\r\n\r\n\r\n
    Given the high viewability score of AMP pages, eCPMs are subjected to rise. But those benefits are diluted under the technological shortcomings of publishers.<\/p>\r\n\r\n\r\n\r\n
    On the other hand, if you treat AMP like a premium inventory, then you need to understand that it only works for mobile devices. Meaning, you have to find advertisers specifically looking for AMP mobile inventory.<\/p>\r\n\r\n\r\n\r\n
    Here how you can make the most out of your AMP inventory<\/a>:<\/p>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    Auction AMP Inventory Via Header Bidding<\/a><\/h3>\r\n\r\n\r\n\r\n
    \u00a0<\/div>\r\n\r\n\r\n\r\n
    Yes, you read it right – AMP inventory can be sold via header bidding<\/a>. In fact, there are two ways of doing that:<\/p>\r\n\r\n\r\n\r\n