Speed up Drupal Websites with Google AMP

by Hamza Zia  July 31, 2017

In the past few years, the number of users who access the internet through mobile devices has increased rapidly. In fact, statistics now show that these users have outnumbered all other users, particularly the desktop users.

AMP on Drupal banner

Drupal is now responsive out of the box. However, if you are wondering how to further improve Drupal’s performance for mobile devices, Google has got the perfect answer in the form of Accelerated Mobile Pages (AMP) that allows instant delivery of web pages.

In this tutorial, I will show you how to implement AMP on your Drupal powered website.

Pre-requisites

First of all, make sure that you have Composer and Drush installed on your server before proceeding. Fortunately, Cloudways provides Drush and Composer preinstalled on its servers.

Next up is the installation of AMP. Follow these steps to install it on your Drupal site:

Download Modules, Theme and Composer Manager

Go to the CLI and enter the following commands to download the required modules, theme and composer manager for AMP.

Next start enabling the downloaded items. Keep in mind that you will need to enable Composer Manager before enabling the AMP module. Use the following command:

Download AMP Module Dependencies with Composer

Next, download the PHP AMP library and set dependencies before you can enable AMP modules itself (remember that this library is required by the module). This can be easily accomplished by using the following Composer command:

Download AMP Theme Library with Composer

You will be required to download and set dependencies for the AMP theme via Composer:

Configure AMP module

Given that you’ve downloaded and set the dependencies for the AMP module and AMP theme, you can now go ahead and enable the module via this command:

Now navigate to admin/config/content/amp. Here you can see all the content types on your Drupal site. It would look something like this:

amp module configuration

It’s up to you to select the types of content for which you wish to enable AMP. Generally, blog posts and articles benefit the most from AMP, since they are the fastest and thus help your website in SERP rankings.

You can click the ‘Enable AMP in Custom Display Settings’ to enable AMP for the type of content you desire. Doing so will bring you to the following screen:

amp field formatter

Here, you can set which fields will be formatted to AMP. It’s usually best to change the format of all the field types on this screen to AMP.

Setting AMP Theme

Setting the AMP theme is very simple because an example sub theme is already provided (which I enabled earlier). You can set this theme in admin/config/content/amp:

select amp theme

If you want to further style your theme, keep in mind that AMP only accepts styling via CSS and not via JS. Also, make sure that the CSS file size doesn’t exceed 50K.

Conclusion

And that’s it, you have successfully enabled AMP on your Drupal site. Hope you found this tutorial useful if you are looking to make your Drupal website lightning fast here are 10 Tips To Speed Up Your Drupal Website. For any help in setting up AMP for your Drupal site, do leave a comment and I will get back to you.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Stay Connected:

You Might Also Like...