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.
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
- Download amp module dependencies with composer
- Download amp theme with composer
- Configure AMP module
- Configure AMP theme
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.
drush dl amp, amptheme, composer_manager
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:
drush en composer_manager, amptheme, ampsubtheme_example
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:
composer require drupal/amp
Download AMP Theme Library with Composer
You will be required to download and set dependencies for the AMP theme via Composer:
composer require drupal/amptheme
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:
drush en amp
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:
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:
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.
Get Ready for Core Web Vitals Update
Ebook to Speed Up Your Website Before You Start Losing Traffic.
Thank You
Your list is on it’s Way to Your Inbox.
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:
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. You can also check out Cloudways performance with 99% uptime.
Shahzeb Ahmed
Shahzeb is a Digital Marketer with a Software Engineering background, works as a Community Manager — PHP Community at Cloudways. He is growth ambitious and aims to learn & share information about PHP & Laravel Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]
