The implementation of AMP standard for Drupal 8

Feb
02

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.

AMP standard does not allow you to add a custom JavaScript code. This limitation is due to the delay in displaying the web pages, which may be caused by the execution of the code. However, it doesn’t apply to asynchronous JavaScript.

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.

AMP enables JavaScript loading from the third-party resources, but this is done only by the iframe, which also allows you to avoid load page delays, as the page layout doesn’t change and, because of this, there is no need for style recalculation.

Regarding styles, only inline CSS styles are allowed. Their size shouldn’t exceed 50 KB.

Another obstacle to improving performance is web fonts. They are usually very large, and they always need to be downloaded, regardless of the device from which the site is visited. AMP standard solves this problem by putting font loading in first place. After this, there are HTTP requests for JavaScript and CSS styles. This makes the font download delays disappear.

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.

Instalation

To configure site pages in AMP format, you need to install:

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).

Content types setting

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.

set special AMP formatters

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.

AMP theme

In AMP module settings, choose one available AMP theme (ExAMPle Subtheme or add your own). When creating your own AMP theme, remember that you can add only styles. It’s impossible to add custom javascript. You can use sass or less to create styles, but in the 8th version of Drupal the styles are only being added to the twig template. You should also be aware that some styles are limited in use, and some are prohibited completely.

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.

Integration with services

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.

amp library setting

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.

amp library setting

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.

check whether the AMP library is running

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

To test whether web pages meet AMP standards, you can use AMP Validator for Google Chrome, or AMP Validator for Opera.

amp validator

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.

We create a node of a type Article and test the page with its views without the embedded AMP standard. We use GTmetrix and think with Google services for this.

Site performance comparing

Site performance comparing

Site performance comparing

Site performance comparing

Site performance comparing

After setting:

Site performance comparing

Site performance comparing

Site performance comparing

Site performance comparing

Site performance comparing

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.

Recent Posts

31
Jan
E-commerce website migration tips

So your online store is preparing for a migration! Congrats on a decision that is going to give it a fresh start.

26
Jan
Using the power of Bootstrap for your Drupal website

This modern, sleek, intuitively understandable mobile-first front-end framework for creating responsive websites and apps has won the hearts of many.

About us and this blog

 
Request a free quote
Our friendly Help Team can be reached Monday through Friday, from 9am to 6pm, Eastern European Time Zone.

Contact now

Get new blog posts by email: