What exactly is Google accelerated mobile pages (AMP)? Please, slow down a little as we will answer that question in just a moment.
When users access content from your mobile website, do the pages load instantly?
If it takes more than a couple of seconds for your mobile pages to load, it’s likely your users have already abandoned your site.
With more than half of all website traffic generated through mobile devices, a slow-loading mobile page can have an adverse impact on user experience, traffic volume and search engine rankings.
Mobile page speed has been a high priority for many webmasters since Google released a crucial update to their search algorithm in July of this year, marking the beginning of a new mobile-first search index.
The update has left many companies scrambling for an effective mobile solution that will allow them to retain their SERP rankings post-update.
Google AMP pages project was designed for just that.
What is AMP?
Developed by Google and backed by several large tech companies, such as Twitter, Google accelerated mobile pages – AMP is an open-source development framework, aimed at providing a better and faster mobile web experience.
Google AMP pages was created to apply a consistent standard among web pages and optimize content for any mobile device.
AMP accelerated mobile pages uses a simplified web page format designed specifically for mobile devices, which enables these pages to load dramatically faster than average HTML pages.
In fact, AMP pages open almost instantly.
Here is a sample screenshot of an AMP page from The Guardian.
If you were to visit this page from your browser, you will notice the page design is simple; lacking any advanced scripts, navigation or widgets.
Currently, Google, Twitter, LinkedIn, Reddit and Pinterest are among the high-profile companies using Google accelerated mobile pages (AMP).
In 2016, Google officially integrated AMP pages into its mobile search results.
By early 2018, Google began pushing for the AMP mobile pages technology framework to be added to web standards.
But the question you might want to ask is…
Is Google Accelerated Mobile Pages right for your mobile Website?
Many websites have successfully used Google accelerated mobile pages to speed up the load time of their mobile pages and vastly improve user experience.
However, it may not always be the right fit for hosting your amp mobile pages, and there are some things to consider prior to making the switch.
Websites using Google accelerated mobile pages are enjoying the following benefits:
- Faster page load time (almost instantly)
- Lower bounce rates
- Increased mobile web traffic, and
- Higher mobile search rankings.
However, there are also some challenges to consider, including:
- The inability to add certain features or widgets
- Analytic platform restrictions (although Google Analytics is accepted)
- A complicated process for inserting ads on your pages, and…
- Difficulties switching back from AMP.
*Important Note* Before implementing Google accelerated mobile pages (AMP), make sure you understand the following implications of using this framework for your mobile pages.
Considerations for implementing AMP
AMP Improves Page Speed and Search Rankings
While AMP mobile pages is not an explicit factor in search rankings, Google’s update does prioritize web pages with minimal load times.
As a result, improving mobile page speed may show an improvement for a site’s overall rankings in mobile searches.
Lighter coding enables the content to be stored within Google AMP Cache. The cache version enables content to be preloaded and instantly delivered to users.
Faster-loading websites are not only better for the user experience and SEO, speed can also impact your business’s bottom line.
Google-sponsored research shows an average 2X increase in time spent on a page, leading e-commerce sites to see an average of 20% increase in sales.
In another industry survey, the majority of users indicated they were more inclined to click on an AMP link.
Many businesses have seen positive results by using Google accelerated mobile pages.
Furniture retailer Zitmaxx Wonen reduced their typical load time to three seconds and conversion rates rose to 50.2%.
Overall revenue from the mobile site also increased by 99%.
In addition, Pinterest rebuilt pages for performance, which resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate.
Improves server performance
The Google accelerated mobile pages framework is made up of three parts:
- AMP HTML: A leaner version of regular HTML with only certain tags allowed to be used. HTML elements such as forms are not allowed and are required to use a streamlined CSS.
- AMP CDN: Also known as AMP Cache, the proxy-based content delivery network (CDN) caches AMP content for fast delivery. AMP CDN caches all valid AMP content.
Stylizing pages is limited
Accelerated mobile pages does limit certain web design elements that are available to developers, to ensure optimal performance.
The following touches on some of these established limitations.
Cascading Style Sheets (CSS) is used to style web pages written in markup language including font, color, spacing, formatting and layout.
Since the goal of AMP mobile pages is to create a uniform style for all sites, CSS is still important. However, some functionalities are removed to improve the loading speed.
These CSS limitations include:
- Inline Style Attributes: Styles must be indicated in the header of the page using a custom AMP tag.
- Important: It is important that Google AMP pages be able to enforce its sizing regulations on a webpage, and therefore usage of this is not allowed
- <link rel=“stylesheet”>: against policy but custom fonts are allowed
- * (universal selector): The universal selector is banned as it can evade other selector restrictions.
- :not(): This can be used to imitate selectors.
- Pseudo-Selectors: Tag names cannot start with amp-.
- -amp- and -i-amp- tag names: reserved for internal use only.
- Behavior, -moz- binding: Not supported by Google AMP.
HTML tags are limited to a set of tags specific to the accelerated mobile pages framework, which creates some restrictions on HTML options.
Examples of code restrictions include: frame, embed and object.
In the following examples, you can see that this Audi dealer uses a live chat box within their mobile site:
And this as well…
Use a plugin when using a CMS such as WordPress
The ease of incorporating AMP pages on your site will vary depending on your content management system (CMS) and whether or not you elect to incorporate a plugin to assist with the implementation.
Plugins are easy to install and can quickly integrate into your site design to ensure AMP compatibility.
WordPress is the most widely used CMS in the market, and there are a number of plugins available to install.
First, you need to install the base WordPress AMP plugin, which will allow your posts to be AMP-compatible.
Once you have the AMP plugin installed, you can layer on additional plugins in order to gain greater functionality.
WordPress AMP plugin can conflict with existing plugins
The base WordPress AMP plugin provides basic functionalities and ensures your posts are all AMP-compatible.
However, if your site uses other plugins for additional functionalities, conflicts between plugins can occur.
Generally, the plugin provider will work to find solutions to the conflicts, but this process can take some time.
In some cases, you may need to remove the conflicting plugin and find an alternative.
Be sure to research cross-plugin compatibility prior to installing any new plugins.
AMP can create duplicate content issues
With Google AMP pages, you need to maintain at least two versions of each page—the AMP version and the original.
The pages have the same content but the layout is different and the pages are displayed according to the device used to access the page.
The Google AMP versions are delivered to the user from the Google Accelerated Mobile Pages cache and have a different URL, which is how duplicate content issues arise.
Ideally, these two pages will have equivalent content, except the user accesses the same content faster, and with a better user experience, when accessing the AMP version.
Duplicate content is caused because the search engine is not sure which URL to show. This can lead to SEO issues and people linking to the wrong pages.
You can apply responsive page elements within AMP
Responsive web design is a method of creating web pages which are fluid, respond to user needs, and are flexible.
Responsive page elements are designed to dynamically change, based on the device being used to access the page.
You can read more about implementing responsive elements within an AMP page on the official AMP site.
While Google continues to make a push to establish the Google accelerated mobile pages framework as the standard for delivering mobile content, there is still a lot to consider prior to implementing AMP mobile pages on your site.
Remember that while AMP pages are great for serving up basic content, such as articles, videos, and images, AMP has a lot of limitations for creating more advanced and unique web content.
Before you decide to incorporate Google’s Accelerated Mobile Pages technology within your site, be sure you understand the aforementioned implications and determine whether or not AMP is the right mobile solution for you.