CMS, Uncategorized

AMP integration in Drupal 8 – Part 1

Speed is an integral part of designing web pages. If our mobile pages aren’t loading quickly, it doesn’t matter how great our website is, some people will leave the page before they see what’s there.

The solution for a faster mobile experience is AMP.

AMP(Accelerated mobile pages) is a project which enables the creation of websites and ads that are consistently fast and provides higher performance and flexibility.

AMP implementation:

To implement AMP in Drupal8, one requires  AMP module and AMP theme .  They can be installed using composer with all the dependent libraries.

AMP module installation:

 

AMP theme installation:

AMP theme is needed to convert Drupal pages into pages that comply with the AMP standards. This theme needs to be extended to create a sub-theme where one can add limited CSS along with AMP components like sidebar, carousel etc.

 

Steps to configure AMP :

  1. Go to “/admin/config/content/amp” and configure the options as shown below:
    amp_config_drupal8
  2. To enable AMP for the content types, go to “/admin/structure/types/manage/display” and check AMP in the custom display settings.Enable AMP in content types Drupal 8
  3. Now go to “Manage display” of the respective content type, click on the AMP tab and select AMP tags from the available format for each field.AMP in content types
  4. Create some content and “Save and view AMP” or one can save the page and append ‘ ?amp ‘  in the URL.
    save_as_amp

       


    The page which is saved using the above steps is very minimal as shown below:

    AMP theme

 

AMP validator:

AMP validator is a Chrome extension which checks:

  • If the current page is AMP page or not
  • By clicking the icon, it displays errors/warnings if the page doesn’t follow AMP standards.

 

amp validator

 

We have successfully installed and configured AMP in Drupal8. In the next part, we will continue with the theming and will discuss various AMP components.

About The Author

Leave a Reply

*