Contact us anytime to know more — Kuldeep K., Founder & CEO CISIN
What is AMP? let’s first come to know about AMP and its components.
What is AMP?
AMP stands for Accelerated Mobile Pages. It is an open-source library initiated by the Google which provides a solution to create web pages to render smoothly and instantaneously.
AMP pages are just like the simple web pages builds on the existing web page skill sets and frameworks to create web pages.
Following are the core components of AMP:
-
AMP HTML : AMP HTML is just like the Normal HTML with some restrictions and some AMP properties for reliable performance. AMP HTML extends normal HTML by replacing the tags like < img/> tab is replaced with < amp-img>,
< video>tag with < amp-video>,< iframe>tag with < amp-iframe> similarly many other tag has been extended from normal HTML.
-
AMP JS: JS library ensures the fast rendering of AMP HTML pages. It is a standard JS library which needs to be added to the AMP page and also it doesn’t allow any external js on a page. AMP JS is loaded asynchronously so as not to block the rendering of the page. Following are the AMP JS Features:
- Pre-calculate page layout before resources load
- Disable slow CSS selectors
- Setting any other JS requests to asynchronous
- Sandboxing iframes
-
AMP Cache: Cache used to serve cached AMP HTML pages.
It is a proxy-based content delivery network
Why use AMP with Drupal?
Drupal has a different level of caching which makes page rendering fast and now Drupal themes are also responsive and mobile friendly but the integration of AMP gives additional advantages for the Drupal web development which includes
- Improve mobile web experience with clean and instant content loading.
- AMP pages can be found when users search via Google on a mobile device.
- AMP helps to improve the ranking of web pages.
- Improve server performance
Implement AMP in Drupal8 :
To implement AMP in the Drupal 8, following are the requirements
- Drupal 8
- AMP PHP Library
- AMP Module
- AMP Theme
Command line AMP implementation using composer and drush:
- First download and setup Drupal8, we assume that Drupal 8 is installed, now go to the document root directory where Drupal 8 is installed.
Also, composer and dush should be installed.
- Run composer command to install amp php library, as this is essential to install amp module without library amp module will not install and will display error.
composer require lullabot/amp
The library will be installed in the vendor directory inside the Document root dir.
- Run the following command to download Drupal "amp" and "composer_manager" module and contributed theme "amptheme"
drush dl amp, amptheme, composer_manager
- Now run the command to enable composer_manage module and amp theme
drush en composer_manager, amptheme, ampsubtheme_example
Before installing the AMP Module, amptheme and ampsubtheme need to be install which is packaged with amptheme in the theme directory.
- Now enable amp module
drush en amp
- Once amp module is installed go to the configuration menu for amp configuration
Menu Option: Configuration » Content Authoring » AMP configuration
URL Path : admin/config/content/amp
There will be setting to enable AMP Display mode for each of the content type like Article, Basic page, page intro with there status (Enabled or Disabled).
- Once after enabling the AMP setting for content types there will display new sub-menu for AMP in Manage Display for each content type.
Menu Option : Structure » Content Types » Article/Basic Pages etc » Operations » Manage Display
URL Path : admin/structure/types/manage/article/display,
admin/structure/types/manage/page/display
- Once Setting enabled for each content type, from AMP Sub-menu fields need to be update as per the requirement.
- Enable AMP subtheme as the AMP default theme from the configuration.
Its all done with AMP integration in Drupal, Now sits is ready to display with AMP HTML in mobile devices.
AMP Sub-theme can be extended as per the requirement by creating a template and hook implementation.
