Launching Simple AMP Version for Drupal Website

| Drupal Development | 0 seen

I might be late to the party of implementing AMP for my Drupal powered website, as AMP have been around for a while already, it was just tonight I finally managed to implement and validate AMP for this blog.

In this article I'll share some of my notes on how to implement AMP for Drupal, compare load times before and after and of course will touch a topic of about possible SEO gains (though, seems that AMP is not a ranking factor yet)

Here is the short version about what's AMP:

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. Learn more: https://www.ampproject.org/

I should admit, that implementing AMP for Drupal was kind of challenging and in total took me more than8 months to get first validated results. I started working on Drupal AMP version at the end of 2016, spent some good time learning how to use composer and even started using Drush

There is a great module for Drupal - Accelerated Mobile Pages (AMP), if you are looking to build AMP for Drupal, that's the module you are looking for and start with.

Unfortunately I faced a lot of errors at start and was not able to validate my site, as AMP valid, for a pretty long time. I faced issues with making to work AMP and CDN modules together. Google Webmasters central screamed I've just way of too much errors. And I abandoned my efforts building an AMP friendly Drupal website.

Google Webmasters reporting AMP Errors

Google Webmasters reporting AMP Errors

It was until yesterday's night, when I decided I should get AMP up and running. And I succeeded. 

I won't go much in technical details on how to setup AMP for Drupal (if you need any help with that, contact me or drop a comment bellow), but here are two major obstacles I wasn't able to validate AMP:

Issue with AMP and CDN module  - from AMP configuration page (admin/config/content/amp) tick box next to Power User: Run the whole HTML page through the AMP library. This simple checkbox saved me a lot of time and solved most of the problems.

<amp-ad> - I faced another problem when tried to enable AdSense for AMP, turned out I had to update lullabot/amp library to the latest, for that I spent a good time of configuring composer, if you have composer installed and you are looking to update dependencies (lullabot/amp) to the latest run:

php composer.phar update

from folder composer PATH_TO_YOUR_PUBLIC_HTML/sites/default/files/composer

Now, huge was my joy after seeing my blog AMP friendly. Of course I spent some time on building custom blocks and views for AMP theme, but in short yes - it's simple AMP version - bare minimum:

Drupal AMP enabled

Drupal AMP enabled

Now I should mention, for AMP validating and testing I'm using Google Chrome extension AMP Validator

​If comparing page speed for non-AMP and AMP page, results are really nice:

Page load time and performance without AMP

Page load time and performance without AMP

I cannot complain much about load times and page size here (well there are still room to grow), but now let's see what are results for AMP enabled for the same webpage:

Page load time and performance with AMP

Page load time and performance with AMP

Truly amazing - load time is 2.5 times faster, page size compression by 4.39 times. Awesome. 

As stated in the intro of this article - possible SEO boost from Google. Right now there is not yet decent amount of data to report, but I hope to come out with an article after 30 days. Right now this blog gets about 80,000 users monthly, less than 50% comes from mobile devices. Now, let' s see how many of them will land at ?amp version.