What are AMP Pages and how to use them?
Modern Internet users value their time. According to Google statistics , if a web page loads in 3 seconds instead of 1, the number of bounces increases by about 32%, and if the indicator increases to 6 seconds, by 106%. AMP technology is used to reduce loading time. We tell you what it is and how to install a fast loading page .
What is AMP and why you need it
The abbreviation AMP stands for Accelerated Mobile Pages – Open Source Accelerated Mobile Pages. This is a modified HTML code with elements for fast content loading. So, instead of the <img> tag for images, <img-amp> is used. A similar replacement is provided for video.
Website performance is reduced due to the large number of graphic and animation elements, such as 3D visualizations, videos. Such files are often placed on the websites of travel companies, real estate agencies and the provision of design services to illustrate the offer. AMP technology solves the problem of user waiting – it loads an analogue of a full page in a split second.
AMP HTML file can be used both separately and in combination with the standard version of the page. The second way is preferable.
accelerated data visualization due to the AMP JS library;
using Google AMP Cache to load the page;
use CSS3 without restrictions;
ban on inline (prescribed in the code itself) styles.
Pros and cons
Implementing AMP provides a number of useful benefits. Consider the main advantages:
accelerated loading – up to 1 second on average, which is 15-85% faster than opening a regular page;
user retention (the visitor is more likely to stay on the resource);
high conversion compared to the mobile version of the site;
rating indicators are higher than those of sites with regular pages;
reducing the load on servers (including by storing data on the Google server).
Disadvantages of AMP:
in terms of functionality, AMP pages are inferior to regular ones;
navigation, sidebar, other useful blocks are not available;
fewer design options are provided;
The tracking code must be manually added to each AMP page.
Accelerated pages are designed for Internet surfers from smartphones and tablets. The technology allows you to view the content of the site without clicking on the link.
AMP pages are especially useful for content platforms such as news portals, blogs, and educational projects. The technology is recommended to be used by information resources that receive income from advertising. If you have an online store with a catalog, you can show product cards in AMP.
The technology makes it possible to reach the top positions in the search results. Pages with AMP-HTML markup are more likely to appear in the Google news block, which is useful for expanding your reach.
Increase website conversion by 30%
Callback, promotional landings, capture forms, multi-button, form auto-dial
How AMP Pages Work
The principle of operation of the technology is based on the use of special tags. Google finds AMP tags and caches the data placed in them. When entering a query in the search bar, the browser loads information from the Google CDN into an iframe, after which the page is displayed in a special window. In Yandex, AMP is not available.
Fast data loading is performed thanks to the following elements:
AMP HTML is actually modified HTML5. Contains special tags for faster content loading.
AMP JS is a library that provides access to AMP tags.
Google AMP Cache is a geographically distributed network infrastructure that uses proxy servers. Provides caching for AMP pages. Content is loaded from the nearest source.
Features of interaction with website visitors:
the content is displayed without going to the site – in the search results;
page turning is available, as in a slider (“carousel”).
The article card that appears in the search results has a special icon.
How to install AMP
The problem is solved with the help of plugins. All of them are installed in approximately the same way, the main difference lies in the extensions used.
Installation is carried out in 2 stages:
download and run the AMP Plugin ;
check the correctness of the code – for this, use the AMP validator .
Then you can improve the page design with AMP for WP , the same tool is suitable for adding additional options in the plugin’s admin panel.
The logo is edited in the General tab. The default image size is 190×36 Px. Use the Custom Logo Size feature to change it.
The front page is assigned using the Front Page option.
To play static pages, use the AMP on Pages option (“on” position).
Statistics are connected through Google Analytics . Enter the page ID in the field provided for this.
Design elements are edited using the Launch Post Builder function. It allows you to manage information blocks and choose colors – background, font, and other design elements.
Custom styles are added in the Design Selector section.
To optimize pages, install the Yoast SEO add-on.
With the AMP plugin, you can set up ads. Go to the Advertisement section and specify the location of the ad units and their characteristics.
Other useful features:
connection of buttons of social networks, Disqus, notifications.
To allow users to navigate to the full version of the page, set up Non-AMP buttons for the logo and footer.
For this CMS one plugin is indispensable. You will need a triple set:
HTML Library .
The AMP pages module works in conjunction with the Chaos Tools (content management) add-on and Token . If you want to monetize a resource, use the Google AdSense Integration to publish AdSense ads.
Choose a theme, track statistics, display content, and other settings in the AMP Configuration section. Install an AMP pixel to track views. As for sites on WP, a connection to Google Analytics is provided.
AMP pages for Joomla! created using wbAMP . The plugin is paid, the cost of the full version is 44 USD. In the free version, the functionality is limited, only basic characteristics can be configured.
Specify basic information about the resource: name, owner. There are two main options for microdata:
for news — NewsArticle;
for articles — BlogPosting.
Use the Select Pages tab to specify which pages to use AMP to display.
An alternative way to implement AMP technology on Joomla! – JAmp addition . This is a paid component, the cost is 39€.
On OpenCart, Magento, PrestaShop
To create accelerated pages on Opencart, download the Accelerated Mobile Pages add-on . The parameters for displaying information on sites are configured in much the same way as in other CMS.
For Magento, download the Accelerated Mobile Pages extension . It will provide a quick display of the contents of the main, product cards and categories.
To work with Prestashop, use PrestaShop AMP .
How to implement AMP manually
There are no AMP implementation plugins for self-written CMS – you need to add the code yourself. Sequencing:
Creation of AMP templates. Styles are specified using the style amp-custom tag (up to 50 kB). The sizes of images, including animated ones, are indicated inside the HTML document. Use CSS @font-face to load fonts. Choose options from the AMP JS library – custom scripts are not supported by the technology. Disable dynamic elements.
Template scaling. It is performed manually or automatically.
Analytics setup. Track statistics with amp-pixel or amp-analytics.
Checking the validity of the code. Use the AMP Test tool .
To display animated objects, modals, and some other traditionally scripted features, use iframes and components from AMP JS. They allow you to display sliders, forms, ad units, side menus.
Examples of using
The first to evaluate AMP technology were news portals – The New York Times, lenta.ru and others. Some publications have gone further and started using AMP pages as an alternative to the mobile version of the site.
Initially, online stores did not use AMP due to the lack of filters and a shopping cart. The pioneer was the British company ASDA Walmart, which launched more than 250,000 accelerated mobile pages. In Russia, the accelerated download technology was successfully implemented by the Citilink online store and increased conversion by 33%.
To find out how effective your company’s promotion in search engines and advertising platforms is, use Calltouch End-to-End Analytics. The service will combine the data of your marketing tools into a single convenient report. He will compile statistics on site visits, leads, deals and profits and compare them with promotion costs. You will find out which ads are profitable and which ones are losses.
End-to-end Calltouch analytics
Analyze the sales funnel from impressions to cash at the checkout
Automatic data collection, convenient reports and free integrations
AMP stands for Accelerated Mobile Pages. They make it possible to significantly reduce the loading time of content and reduce the number of bounces. Features of AMP pages :
viewing content in the search results without visiting the site;
high positions in the ranking of search engines;
a large number of views (partially due to the AMP carousel);
limited functionality, simple visual effects.
AMP pages are indispensable in the process of optimizing information sites. For e-commerce, partial implementation is preferable, for example, only for product cards. AMP pages are created using extensions (for CMS) or by adding code manually (for self-written engines).