If your webpage doesn’t load in two seconds, your readers will start bouncing off.
Seems unrealistic? Fine, give it three seconds, but now you’re taking a risk—about 40% of users will leave, and then it’ll only get worse from there.
The abandonment of a page is a terribly disruptive incident for publishers: Increasing the bounce rate, decreasing advertising revenue, and generally making all their hard work seem in vain.
Google has launched AMP in order to improve the situation for advertisements.
What does it mean for you though? How can you implement it on your website? And more importantly, should you? To learn more about Google AMP, read our guide.
What is an Accelerated Mobile
Page (AMP)?
The AMP project is an open-source effort to create a lightweight web framework based on existing web technologies. The project allows websites to create pages that are very light in weight.
The main objective of the project is to make content delivery on mobile devices faster by removing anything that is unnecessary.
Today, after discussions with publishers and technology companies around the world, we’re announcing a new open-source initiative called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web. We want webpages to load instantaneously, with rich content like video, animations, and graphics working alongside smart ads. We want content to be accessible from any type of phone, tablet, or mobile device.
Google Official Blog
Mobile traffic now accounts for more than desktop traffic, so publishers, advertisers, and developers can no longer afford to ignore the fact that users get frustrated when they have to click from one page to another. Google believes that speed is more important than features.
Some big news publications, such as Time, The Atlantic, Vox, BBC, and The Huffington Post, have already joined AMP. In addition, several technology companies, like WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn, and Pinterest, have also joined AMP.
The main advantage of Google AMP is that it is open source, which means that any publisher can use it, unlike other projects that are more controlled, such as Facebook’s Instant Articles and Apple News.
Is AMP Really That Fast?
Yes, it is.
According to Jon Parise from Pinterest, Accelerated Mobile Pages load four times faster and use eight times fewer data than traditional mobile-optimized pages.
Hey, why don’t you try it for yourself? You can find out what’s making news right now by opening Google on your mobile device. As an example, if we type in “Cardi B”, this is because she is cool and always in the news.
You will see a stack of scroll-able cards called “AMP” just above the search results. Clicking on a card will load that article.
When you open an AMP article, you’ll immediately notice the difference–there’s no lag, no waiting for individual elements to load, and no jittery movements on the page. The entire content of the page is delivered in one smooth motion, which is a big contrast to regular webpages on the mobile web.
Copyblogger’s post on AMP explains this in numbers:
The remaining time until “fully rendered” is spent loading resources like images, ads and iframes. The AMP version of the webpage loaded the HTML in 0.857 seconds and then spent the rest of the time until it was “fully rendered” loading resources like images, ads, and iframes.
A blink of an eye takes around 0.33 seconds.
This means that you can start reading the useful part of the content on the subway almost immediately after blinking your eyes twice, thanks to AMP.
Now that’s speed.
When was the last time you waited for a page to load on your mobile before you blinked twice?
What Makes AMP So Fast?
JavaScript can make pages more dynamic, but it can also slow them down.
AMP pages only allow asynchronous JS to load, which speeds up the page. While you are allowed to use custom JavaScript in amp-script, and third-party JavaScript is allowed in iframes, it cannot delay or block the page from rendering.
All resources are sized statically
AMP loads all resources in a prioritized order, based on the size of each resource. The layout is loaded without waiting for resources to download.
Doesn’t allow extensions to slow downloading
While AMP supports extensions that require additional HTTP requests, these requests will not block page loading. Pages using custom scripts must tell the AMP system that there will be an amp-iframe tag, example:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>CSS must be in-line and size-bound
CSS blocks all rendering and tends to get bloated. In AMP HTML pages, only inline styles are allowed. This means that fewer HTTP requests are needed to load the page, which makes the page load faster.
The maximum size for an inline style sheet is 50 kilobytes. Even though this size can accommodate advanced pages, the person creating the page still needs to follow CSS guidelines.
Prioritize image loading accordingly
AMP focuses on items that are needed when users are present on that part of the page. This means that it uses lazy loading to download and load resources that are in the viewport or about to be in the viewport while users scroll through the page.
Implementing AMP: Three Things You Need to Know
AMP has some serious ramifications for content marketers. Though there are advantages to the fresh program, it will take some effort to execute.
Here’s what you need to know:
1. You’ll Need Two Versions of Each Article You Publish
AMP pages are designed to load faster by removing any unnecessary elements. You should keep two copies of each page; one regular version and one AMP version. AMP pages do not include things like JavaScript and embeds, so comments and lead forms will not be present.
2. You’ll Need to Update Your Images and Videos
Multimedia is affected directly by the implementation of AMP. Images on AMP pages will need to use custom amp-ing elements and be a certain width and height. GIFs need to be using the amp-anim feature.
You will now need to put a custom tag on your videos so that they can be embedded using HTML5. This tag is known as amp-video. The only exception is for YouTube videos which use the amp-youtube tag instead of amp-video . Images embedded from social media sites like Facebook, Pinterest, and Vine will need special tags. You can find those tags here.
3. Original Page Versions Must be Modified
You will need to change the original version of your content in order to help Google know that you have AMP versions of your content. This is done by using something akin to a canonical tag:
If your pages are classified as articles, reviews, recipes, or videos, you will need to include Schema.org metadata to help search engines understand the content of the page. If you want your content to appear in the new AMP content carousel feature, make sure your Schema is correct from the beginning.
Ads and AMP
The exponential rise in AdBlocker usage in recent years is one thing that is interesting about Google AMP as a whole. AMP is working to help marketers monetize their sites with advertising without driving users to install ad-blocking software.
This means that ad networks such as AdSense, AdTech, Flite, Taboola, Adform, Yieldmo, and Amazon A9 are compatible with AMP pages, so most content marketers should be able to transition their ads to AMP without any difficulty. If you have a complex ad strategy that involves subscriptions, you will need to put in more effort to make it work with AMP.
AMP and Analytics
AMP understands that it would not be well-received to remove your analytics, so it does not. This program uses a two-pronged approach to analytics in order to provide accurate analytics without slowing down your site. These approaches are as follows:
- Amp-Pixels: The Amp-Pixel element is an easy-to-install tag that helps users track page views.
- Amp-Analytics: Slightly more grown-up than the pixel option, this allows users to view implement more analytics on their sites when Google Analytics won’t work.
So, What’s the Catch?
I’m sure what I’ve said sounds too good to be true, but what’s the catch? What is all this additional information that is removed in order to make the page load faster?
AMP removes things like social media plugins, pop-ups, image carousels, videos, analytics software, and tracking scripts that are requested when a page is loading.
It also does not support third party Javascript. That’s the secret to its speed. If you want to use this feature for your content, you will have to give up being able to use the linked functions for the things mentioned above.
According to some people, AMP is most effective for larger publishers who already have a built-in audience. Email collection will become more difficult for small publishers who won’t have access to forms through AMP. Worries like these could make some publishers not want to continue working with her.
Some of the concerns about AMP can be alleviated by working with a developer who is experienced with the technology. We recommend you partner with a company that specializes in AMP monetization technology, like AdPushup.
Using AMP in WordPress: Getting Started
Although you may not be the ultimate webmaster, it is still easy to get started with AMP in WordPress. Here’s what you need to do:
1. Install the AMP Plugin
The first step to creating an AMP is to install the WordPress plugin. From the GitHub page, click the “Download ZIP” button.
This will install the plugin on your site in the same way as any other plugin. After installing the plugin, go to your article pages and add “/amp/” to the end of the permalinks.
2. Wait for Google
It will take Google a few days to catch on to your new AMP articles. Matt Southern of Search Engine Journal suggests using the Chrome validation process to speed up your work. To do this, follow these steps:
- Use the Chrome browser to find one of your AMP pages.
- Add “#development=1” to your page’s URL
- Open the Chrome Developer Tools toolbar (Control+Shift) and navigate to Console
- Here, you’ll either see a note that indicates a successful AMP validation or you’ll be confronted with a list of problems to fix.
You’ll need to validate each page you want recognized as being up to Google AMP standards.
3. Check your schema
The Google data testing tool can be used to test the markup on your pages. Ideal schema markup is essential for a successful AMP page.
4. Integrate Google Analytics
In your WordPress dashboard, go to Plugins and then select “Editor.” From there, choose AMP and add this text, changing UA-XXXXX-Y to match your personal Analytics ID. This process is completed by validating all AMP pages, which then allows analytics to resume functioning properly.
AMP is powerful – makes your site truly mobile-friendly.
The new advancements mentioned – AMP ads, Real-time config, and features to take user consent – suggest that the digital publishing business has a bright future. The speed of adoption is increasing, especially among news organizations.
Are you using AMP for your site? How’s your ad revenue looking? Not that good? We offer free 30-minute consultations to help you in any way possible.
Related posts:
