Speed Up Drupal Websites With Google AMP

1
 

• Speed Up Drupal Websites With Google AMP

Blog URL https//www.cloudways.com/blog/speed-up-
drupal-with-amp/
2
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 Drupals
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 these slides I will show you
how to implement AMP on your Drupal powered
website.
3

• 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

4
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
5
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
6
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
7
Configure AMP module Given that youve
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
8
Its 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. Its usually
best to change the format of all the field types
on this screen to AMP.
9
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 doesnt exceed 50K.
10
Conclusion And thats 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.