For several years now, mobile traffic on most sites has accounted for more than half of all visits. This fact forces us to reconsider the approach to optimizing the speed of loading resource pages. One of the tools to accelerate mobile pages is Google AMP technology. Let’s analyze what it is, who is suitable for it, and how to implement it on the site.
Internet marketing outside the Moscow Ring Road:
the best online promotion companies in Russia 2020
What is AMP?
AMP (Accelerated Mobile Pages) is a technology used and actively promoted by Google that allows you to create responsive pages that contain the main content. But their main feature lies in providing almost instant page loading, which is achieved thanks to the following solutions:
- When a user accesses a page on a site, it is loaded not from the server where it is located, but from the cache located on Google servers.
- Content loading occurs asynchronously, with styles being limited in size.
- If the page contains duplicate elements, then they are cached using CDN technology (content delivery network, taking into account the geography of the end user).
As a result, the pages of the site have the minimum weight and are loaded instantly on mobile devices.
Advantages and disadvantages of reactive format
Benefits of AMP technology:
- The loading speed of the optimized page increases significantly compared to the original version.
- Search engines “love” sites whose pages load quickly and, other things being equal, rank them higher than their relatively slow competitors. Users now have many alternatives to almost all sites, and if a resource takes a long time to load, the visitor is likely to close it. This will lead to an increase in the bounce rate, which is one of the key ranking factors in search engines. In other words, long page load times can lead to a loss of positions in search results.
- In some cases, loading pages with AMP markup comes from the Google cache, thus reducing the load on your server.
- AMP pages are indexed in the same way as regular pages.
Before introducing AMP technology to the site, you should also take into account its shortcomings, which, unfortunately, are many:
- There are problems with collecting statistics using Yandex.Metrica and Google Analytics. To account for it, you will need to add a special tag to all accelerated pages, which also does not guarantee the accuracy of statistical data.
- Externally optimized pages using AMP technology have an extremely simplified look and limited functionality: there is no animation, only minimal interaction with the page content is possible, there is no comment form and other elements available on the full version of the document.
- Sometimes snippets of AMP pages appear as a carousel in search results, while their main content is displayed (for example, some kind of definition). The user thus receives an answer to his request and does not go to the source site, which, accordingly, loses traffic.
- It is required to constantly monitor the health of both the main site and the AMP pages.
The main disadvantage of accelerated pages is their limited functionality and visual display.
Example AMP Pages
AMP pages in Google have a special designation that sets them apart from other snippets in the search results.
Search results and AMP pages
Going to one of these pages, we see that it is loaded not from the source site, but from Google servers.
Loading an AMP page
In this case, in this case, the content of the page, despite the fact that it is an online store with complex functionality, is displayed correctly and allows you to get acquainted with the product, buy it, etc.
This is what the AMP page of a popular news site looks like.
AMP page of a news site
The developers have provided for the possibility of switching to the full version of the site if the current page display does not satisfy the visitor.
What projects is AMP suitable for
As you can see from the examples, AMP technology can be used on completely different sites: from informational to online stores. But still, it is not suitable for everyone, for example, AMP will be difficult or impossible to implement on map sites, mailers, social networking sites and others that use special functionality.
Ideally, AMP technology should be used on sites that have pages of the same structure, such resources most often include content.
Methods for implementing AMP technology
There are two main ways to implement AMP technology on a website: using a ready-made solution for one of the popular CMS, installing AMP on self-written engines. Let’s take a look at how to do both of these options.
Ready-made solution for CMS
Everything is relatively simple here: we find the plugin, install and configure it. In most cases, if the content on the pages is simple, for example, a blog, then the setup is quite simple.
One of the most popular WordPress plugins is AMP of the same name. Its key features include:
- Almost complete automation of the process of creating AMP pages.
- If any page is incompatible with this technology, the plugin will notify the administrator about it.
- Continuous development of the plugin.
- Open source, allowing you to make changes as needed.
After activating the plugin, you will be asked to select the mode of its operation (one of three: standard – if the site theme is AMP compatible, transitional – if there are problem pages in terms of translation into AMP format and reader – a mode with simple settings, suitable for beginners). In this case, the configuration process is accompanied by all the necessary information.
There is also a ready-made solution for this CMS in the form of the wbAMD plugin.
- Using modules inside AMP pages.
- Validation of finished pages.
- Automatically prescribes metadata.
- Various settings for the visual component of AMP pages (colors, shape of buttons, etc.), with no need to edit the code.
- Ready-made themes.
- Google Analytics and Tag Manager support.
- Support for all types of ads allowed in AMP.
- The ability to force the inclusion of AMP pages for mobile users.
- Extended documentation, there are user guides on setting up the plugin, including in video format.
- The plugin monitors the correctness of page settings, otherwise it warns about errors.
At the same time, the extension can work with most popular plugins, remove various tags in them, etc.
It’s a little more complicated here than in previous CMS:
- The AMP module must be installed.
- Make sure the theme you are using supports AMP.
- Configure HTML library.
Implementing AMP on Drupal is more suitable for advanced users, but nevertheless, it is easier than installing on custom engines.
In Bitrix, you will have to purchase a paid plugin – Google AMP, which will allow you to configure AMP technology on the site.
- Implementation of technology for online stores, support for delivery description blocks, goods, payment elements, etc.
- Displaying the site logo and header with contact information.
- Using Schema.org Markup.
- Customizing the visual component of an AMP page.
- Data caching.
The Opencart AMP plugin allows you to easily and quickly set up AMP pages for online stores.
- Customizing the appearance of the page.
- Share buttons for popular social networks.
- Support for several levels of nesting of categories.
- Displaying links from the footer.
- Blocks of related and similar products to the viewed one. The user can view the product, add it to the cart and pay with AMP tools.
- Google Analytics support.
Solution for self-written CMS
This is where things get complicated to a large extent and you can’t do without a developer. Before that, it is required to draw up a detailed TK for him. What you should pay attention to:
- In the development process, use information from an official source of technology.
- At the same time, all AMP pages must comply with the HTML layout requirements.
- Because each AMP page has an individual URL, then it should be a CNC in the end.
- If the document has a canonical page, then information about this should be indicated in the header tag ().
- Any source page that has an AMP version must include a URL to it in the code (
- In this case, the URL to the source page must be placed on the AMP page. Most often it is placed in the footer, but it is needed for cases when the user has problems with the functionality of the AMP page (remember that it may be limited).
- As mentioned above, one of the drawbacks of AMP pages is the complexity of collecting data for analytics systems. If Google Analytics is installed on the site, then you should add a special code to each AMP page. This can be done using the official instructions.
- If you want to place a site logo on AMP pages, then this should be done in accordance with the requirements of Google.
- Adding a video requires a special extension, the description of which is available from the technology developer.
- If you need to place ads on AMP pages, then follow the instructions.
- To successfully index AMP pages, you need to ensure that they pass validation without errors. Be sure to check all pages.
Checking AMP pages
You can check the correctness of AMP pages using a tool from Google. It is enough to paste the URL of such a page and run a check, after which errors, if any, will be indicated.
AMP checkout result
If you need to remove an AMP page from search results, then full information can be obtained in the official help from Google. It is recommended to remove the ability to index AMP pages by Yandex crawlers. This is due to the fact that he does not always do it correctly.
Using AMP technology can significantly speed up page loading, but it is not very suitable for sites with complex technical components.