The implementation of AMP standard for Drupal 8
You’ll probably agree that mobile devices are becoming more and more significant, as they bring convenience in our lives.
Drupal 8 has many mobile improvements, and today we’ll focus your attention on one of them — AMP standard. By the way, this is a technical blog post that was written by our Drudesk developer, along with our previous dev’s post about checking and improving your Drupal website’s security.
AMP (Accelerated Mobile Pages) is a standard designed to speed up web page loading on mobile devices. It consists of the following three parts:
- AMP HTML — HTML with the limitations and additions
- AMP JS — high-performance visualization tool
- Google AMP Cache — service for the processing of cached web pages
AMP standard is implemented by creating additional AMP versions of pages, which will be loaded when viewing from a mobile device. Nowadays there are tools for AMP standard integration for Drupal sites.
More about AMP
Let’s see what helps achieving better site performance when implementing AMP standard.
According to AMP standard, the sizes of all the items uploaded from external resources must be pre-defined in the HTML page. This allows you to pre-allocate space for these items and upload the page layout without delay, due to the elements from external sources.
AMP provides the means download content for many extensions. Some HTTP requests, required to upload data, don’t cause a delay in page loading, as AMP creates the elements for this data by advance.
Regarding styles, only inline CSS styles are allowed. Their size shouldn’t exceed 50 KB.
An additional mechanism for improving performance is the priority of web resource utilization. AMP sets such priorities. The resources with the highest priority will be loaded first and the users will see them at the top of the SERP. So, as you can see, page speed has a big influence on visitors and search engines and the effectiveness of your site’s SEO and promotion.
To configure site pages in AMP format, you need to install:
- Supporting AMP PHP Library
- Token module (installed in AMP module dependencies)
- Accelerated Mobile Pages (AMP) module
- AMP Theme
Let’s install AMP PHP Library through the composer. Add the necessary repository:
composer config repositories.drupal composer https://packages.drupal.org/8
Now we update a composer.json, add the AMP library to dependencies and wait until the necessary dependencies are installed.
composer require "drupal/amp"
Then we install Token and AMP modules and set AMP subtheme as the default theme.
Content types setting. AMP view mode and fields formating
Let’s proceed to AMP module settings (admin/config/content/amp).
The module creates its own view mode (AMP) for content types on the site. Each AMP version is available separately for each content type by adding AMP view mode in its settings (admin/structure/types/manage/<content_type>/display). In the view mode settings you can set special AMP formatters for content type fields.
Currently (AMP module version 8.x-1.0) the following AMP formatters for fields are available:
- AMP Iframe (string, text, text_long, text_with_summary)
- AMP Image (image)
- AMP Summary or Trimmed (string, text_with_summary)
- AMP Text (string, text, text_long, text_with_summary)
- AMP Trimmed Text (string, text, text_long, text_with_summary)
- AMP Video (file)
There are additional settings for some AMP formatters. For example, for the AMP Image formatter you can set any AMP image style and AMP layout.
Integration with services
AMP module provides the possibility to integrate with Google Analytics if it’s implemented on the site. You can add AMP pages tracking by filling in appropriate fields in the settings.
In the AMP module settings you can add integration with Google AdSense and Google DoubleClick services. You can also implement and set the AMP-PIXEL technology.
AMP library setting
AMP php-library removes tags and attributes that are not supported by AMP standards. This can affect the html content generated by modules and installed on the site. Thus, an additional site testing is required.
To enable testing, include the following option in the module settings: "Power User: Run the whole HTML page through the AMP library." By the way, this option allows you to add a comment with the statistical data about the page load speed performance.
This comment can be found at the end of the body tag.
Currently, the following performance statistics are provided:
- page load speed
- the number of processed html tags
- the maximum values of used memory at the beginning and at the end of the simple conversion of html into AMP html
Also, for non-anonymous user requests, you can add logging to the html content processing with the AMP library.
To check whether the AMP library is running properly, you can click on the link "Test that AMP is configured properly" in the module settings. If the library is set up correctly, you'll see how the incorrect or prohibited tags, attributes and attribute values are processing.
To make AMP site page versions start working, you must add a link tag with the link to AMP version of the page.
<link href="http://mysite.org/node/1?amp=1" rel="amphtml">
Difficulties when using the AMP module
Basically, the module operates with no serious problems. The only difficulty is that when uninstalling, it leaves behind AMP image styles. So, to install this module again or to delete it completely, you should remove these styles manually.
The AMP markup testing with the help of AMP Validator
After installing the extension, you can check each page for AMP markup validation.
Site performance comparing
Let’s have a look at the results of setting the basic AMP standard.
You can see how an AMP standard reduced the number of requests and improved Inline small CSS just by using inline CSS styles. Also, the CDN usage rate was significantly improved. Think with Google tests showed the increasing of site performance on mobile devices by 8 points. This moved the performance index to a new level.
The testing was conducted on a pure version of Drupal 8 without additional functionality or options that could overload a site. So, the difference in the site performance before and after setting AMP is rather symbolic. The contrast can be much considerable if you run it on real sites.
So the solutions covered in this article provide great opportunities for extending the Drupal site for AMP standard.
Using AMP standard on your web resource is a step towards insuring your site is up to date that will improve your site performance on your users’ mobile devices. This will also become a powerful tool for ongoing search engine optimization. If you have any questions or ideas regarding this, feel free to contact us and our Drudesk team will help you to implement AMP on your website.