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.
before your readers start bouncing off if your webpage doesn’t load.
Seems unrealistic? You only have three seconds to make a good impression on users, or else 40% of them will leave and it will only get worse from there.
Page abandonment is a bad thing for publishers because it increases bounce rate, decreases ad revenue, and makes all their hard work seem pointless.
Google decided to fix the situation by launching AMP.
Accelerated Mobile Page (AMP)
The AMP project is an open-source initiative that uses AMP HTML–an open framework employing existing web technologies–to enable websites to create pages that are light-weight and load quickly.
The project’s main objective is to reduce the time it takes to deliver content on mobile devices by removing anything that is unnecessary.
AMP: The Flash
Although JavaScript is a powerful tool that most front-end developers use to create webpages, it can also slow down the page rendering.
The AMP system only allows asynchronous JS to run on webpages in order to speed up the loading process by blocking unnecessary JS codes. Custom and third-party JavaScript is allowed in amp-script and iframes, respectively, however, neither can block content from rendering.
All resources are sized statically
AMP starts by loading all of the resources it will need – such as images, ads, and iframes – instead of waiting to load them as they’re needed. The layout is loaded without waiting for the resources to be downloaded.
Doesn’t allow extensions to slow downloading
AMP supports additional features that require additional HTTP requests but don’t block page loading, like lightboxes, embeds, and tweets. 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 there are fewer HTTP requests required to load the page, which improves performance.
The maximum size for an inline style sheet is 50 kilobytes. This size is large enough to accommodate very detailed pages; however, the page author still needs to be mindful of good CSS practices.
Prioritize image loading accordingly
AMP focuses on loading things that are required as/when users appear on that part of the page. This means that it uses lazy loading technology to download resources that are in the viewport or about to be in the viewport while users scroll through the page, which makes the page load faster.
If you’re looking to improve your search engine rankings, then using both Google search and AMP together is a great strategy.Getting Started With AMP
To be able to set up an AMP page, you will need to have some knowledge of markup.
It is recommended that you spend some time reviewing the official AMP tutorial and related guides if you are unfamiliar with HTML. If you need assistance, you can hire a developer or ask a tech-savvy friend or coworker for help.
With a little bit of effort, you’ll be able to:
- Create an AMP page using the boilerplate code.
- Stage it.
- Ensure AMP compliance by using Google’s validator.
- Publish and distribute.
If you are published on WordPress, you are in luck. You can convert all your post pages into AMP-compliant versions using a WordPress plugin.
This is helpful because it saves you the work of doing it yourself. The plugin will automatically apply AMP to all your posts.
Implementing AMP
AMP has some serious ramifications for content marketers. Although there are many advantages to the new program, it will take some effort to bring it into effect.
Here’s what you need to know:
1. You’ll Need Two Versions of Each Article You Publish
AMP pages are designed to load quickly by removing anything that is not essential to the page.
You will have to have two different versions of each page, an original and an AMP version. AMP strips away features like JavaScript and embeds, so things like comments and lead forms won’t be present on AMP pages.
2. You’ll Need to Update Your Images and Videos
Multimedia is affected directly by the implementation of AMP. Custom amp-img elements will be required for images and they must be a specific width and height.
Any GIFs that are present on a site must be created using the amp-anim feature.
In order to allow videos on your site to be embedded through HTML5, you will now need to use a custom tag. This tag is known as amp-video. The one exception to using the amp-video tag is for Youtube videos which use the amp-youtube tag instead.
If your website contains slideshows, lightboxes, or any embedded content from sites like Vine, Pinterest, or Facebook, you will need to use special tags. You can find those tags here.
3. Original Page Versions Must be Modified
You will need to go into the original version of the content and change it so that Google is aware that you have AMP versions of your content. This is done by using something akin to a canonical tag:
To help search engines understand the content of your page, you will need to include Schema.org meta information if your page falls into the category of article, review, recipe, or video.
Schema is important to get right from the beginning if you want your content to appear in the new AMP content carousel feature.
Ads and AMP
Google AMP may be seen as a response to the rise of AdBlockers in recent years.
Because ads that take a long time to load have often driven web users to install ad-blocking software, AMP is working to help marketers monetize their sites with advertising without sacrificing user experience.
Ad networks such as AdSense, AdTech, Flite, Taboola, Adform, Yieldmo, and Amazon A9 are all compatible with AMP pages, so most content marketers should be able to transition their ads over to AMP without any trouble.
Marketers who want to use AMP for complex ad strategies that involve subscriptions will need to put in more effort to make those strategies work with AMP.
AMP and Analytics
While AMP is designed to streamline the mobile web experience, it knows that taking away your analytics would be considered bad form.
As a result, it does not do this. Instead of using a single-approach to analytics, the program uses a two-pronged approach that helps offer more 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.
Using AMP in WordPress: Getting Started
If you’re not the most experienced webmaster, it’s 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 using AMP on WordPress is to install the AMP WordPress plugin. From the GitHub page, click the “Download ZIP” button.
Installing the plugin will work as it usually does. To use the plugin, install it then add “/amp/” to the permalinks of your article pages.
2. Wait for Google
It will take Google a while to catch on to your new AMP articles, so don’t be surprised if it takes a few days to see changes.
According to Matt Southern of Search Engine Journal, you can use the Chrome validation process to speed up the process. 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.
Google’s AMP is still quite new, so you’ll probably need to validate each page you want to be recognized as meeting Google’s AMP standards.
3. Check Your Schema
Google has a data testing tool that lets you test the markup on your pages. It is important to have ideal schema markup on your pages for AMP success.
4. Integrate Google Analytics
Here you can see a list of all the installed plugins on your website. From your WordPress dashboard, go to Plugins and then click on “Editor.” Here you will see a list of all the plugins installed on your website.
From the list, choose AMP and enter the text, making sure to change UA-XXXXX-Y to your personal Analytics ID. After you finish this step, you only need to validate your AMP pages again and your analytics will be working properly.
Benefits of Accelerated Mobile Pages
AMP is designed to reduce the amount of time it takes to load a page on a mobile device. It can load a page in as little as 2-3 seconds.
The most common reason why users bounce off of a page is because it is slow. If publishers experience a sharp decrease in loading time, they should see a corresponding decrease in their bounce rate.
If your page loads faster, you will see an improvement in your page ranks for most search engines.
AMP pages have a better chance of being featured on Google carousel and other SERP features.
If you improve your website’s search engine optimization, you will likely see an increase in the amount of traffic coming to your site.
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.
Since AMP strips down all unnecessary JS and CSS, all browsers are able to interpret and show a clean HTML code on the screen.
If you remove unnecessary JS and CSS from your pages, they will use fewer resources from the browser and computer.
AMP pages feature smaller image sizes that load quickly in the browser, using less data.
Conclusion
AMP is a new tool that could potentially change mobile search as we know it.
AMP is a project focused on delivering fast mobile pages and giving webmasters the tools they need to rank well in Google Search.
Although AMP will require some work to implement, it will be worth it for webmasters who want to use the feature on their sites. To get the process working, webmasters will need to follow a few steps.
Although it may be difficult to implement AMP at first, it is definitely worth it. Pages will load four times faster and there is potential for improved ranking.
For content marketers who have been dreaming of enhanced content, Google AMP is a dream come true: articles will now load faster than ever before on mobile devices, thus expanding your reach and broadening your reader base; AMP pages may rank more prominently in Google, and AMP caching tools will be able to enhance user experience across all user devices.
0 comments