How to Speed Up Drupal Websites with Google AMP

Profile picture of blog post author
Written by:
Ana
Posted on:
09 Aug 2018
Development Drupal

Google’s AMP is an open source project that stands for Accelerated Mobile Pages. As the name implies, this project aims to serve mobile pages instantly without long load times. You can get a feel for AMP by searching for anything on your mobile on Google and clicking on links with a lightning sign beside them. Speed is an important factor for any website as it has a number of benefits including making a massive impact on a site’s SEO. In this post, let’s take a look at AMP for Drupal 8 and a brief overview of its implementation on the CMS.

 

There’s a module for that!

As always, there’s a module for integrating AMP on both Drupal 7 and Drupal 8. However, we will only be focusing on Drupal 8 in this post. Do keep in mind though that the steps for both versions aren’t that different. Simply download the module named AMP module and install it on your site.

 

AMP configuration

Navigate to admin/config/content/amp to access the AMP configuration page. Here, the type of contents for which AMP will be enabled can be configured as the fields that will be displayed using AMP. Note that AMP is best suited to web pages that are content heavy, so in the context of Drupal, that would translate over to nodes like blog posts and articles. 
To enable AMP for the content type you want, click ‘Enable AMP in Custom Display Settings’ link beside the content type you wish to enable AMP for. Now click ‘Custom Display Settings’, click the AMP checkbox and press save.
To select which fields should be shown and what field formatters should be used, click the ‘Configure AMP view mode’ link. Some recommended fields which you should format to AMP field formatters are:

  • Body
  • Images
  • iFrames
  • Videos

That rounds off the main settings and configuration of AMP for our Drupal site. Now, we need a way to display the AMP pages in a way suited to our needs, which brings us to the AMP themes.

 

AMP Theme

You may remember from the first step in this article that while downloading the amp module, we also downloaded an amp theme. This is a sub-theme for AMP named exAMPle theme. Having a dedicated subtheme for AMP pages is important as it changes markup necessary for AMP to run. This is all handled by the AMP base theme, which is again based on the Drupal core’s BASE theme to keep it as simple as possible.
Note that in most cases it is recommended to use a custom theme for your site’s AMP pages in order to match the look of a website. While the exAMPle theme allows for quick and easy testing of your AMP pages, it is a very basic and barebones theme. To get an idea of how to create a custom AMP theme, take a look at the exAMPle theme.

 

Conclusion

That’s all there is to AMP for Drupal. The modules make implementation of AMP on Drupal a pretty straight-forward process. Again, make sure you know what types of pages AMP is suited for and you’ll be golden.

 

Having difficulty with implementing a particular piece of functionality to your Drupal site? We can help you with that! Contact us and let’s talk!
 

Related blog posts