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 module installation:
$ composer require drupal/amp $ drush en amp
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.
$ composer require drupal/amptheme $ drush en amptheme
Steps to configure AMP :
- Go to “/admin/config/content/amp” and configure the options as shown below:
- To enable AMP for the content types, go to “/admin/structure/types/manage/display” and check AMP in the custom display settings.
- 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.
- Create some content and “Save and view AMP” or one can save the page and append ‘ ?amp ‘ in the URL.
The page which is saved using the above steps is very minimal as shown below:
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.
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.