Integrating Accelerated Mobile Pages (AMP) In Drupal Websites

In the tech-savvy world today, survival of the fittest is transformed to the survival of the fastest; because time is the most valuable asset today. The performance of your website is directly proportional to the conversion of visitors to customers. Do you know 40 % of your website visitor left the website if it takes more than 2 seconds to load? And around 48 % of the visitors will not return to the site if it is slow or has poor performance.

Quick Fact: Google gives the higher ranking to the websites that meet the AMP requirement. As it provides better mobile experience to the users.

So how to make a fast and better-performing website? Or how to make my existing website faster? The Answer is: “Google AMP ”.

Now, what is Google AMP?

Google AMP is an open-source framework; created for the developers to make fast-loading pages with static content. But how does it work? The answer is “Diet” version of the content, cached by google. Whenever the pages are accessed on mobile devices; to speed up the load time diet version of the content is used.

Drupal + AMP = Complete Enterprise Website

Do you know Whitehouse has a Drupal website? Today, all the leading enterprises, businesses, and startups are opting Drupal for their business website. Drupal is gaining a strong position in the landscape of business CMS. AMP is boosting the performance of Drupal websites to another level. With the benefits like better Google ranking and faster page loading; Drupal accelerated mobile pages are generating revenue higher than ever.

Does Your Website Need Accelerated Mobile Pages (AMP)?
Still not having a Drupal website? Don’t worry!

We have dedicated Drupal developers!!

Advantages of google AMP pages:

  1. Speeds up website loading time
  2. Increases mobile ranking
  3. Improves server performance

Wondering about developing an AMP page for your business or AMP integration in your existing Drupal website? You have two choices:

  1. Do it on your own (although it might give you a headache).
  2. Give it to Drupal Web Development Company (we will bear your headache)

If you are going for OPTION 1; then here are the steps to follow:

First, Let’s dissect an AMP page:

A regular AMP page consists of three attributes. All the three core elements together improve the website speed, content delivery, and mobile experience.

HTML: AMP HTML is similar to HTML with some custom properties and tags responsible for its faster loading.

JavaScript: AMP JS takes care of asynchronous loading and handling of resources.

Content Delivery Network (CDN): AMP CDN is used to cache the AMP Pages and make some performance optimizations.

Requirements:

System Requirements

  • PHP 5.5.x

Modular Requirements

Installation of AMP and configuration with the website:

  1. Download the latest AMP version for Drupal 8, theme, and composer manager. Store them in their respective directories.

For AMP and Composer Manager

| www | sites | all | modules | contrib | amp | composer_manager

For AMP theme:

| www | sites | all | themes | amptheme

  1. Enable AMP theme, composer manager, and AMP:

For AMP theme: Go to “Appearance” (admin/appearance) and click on the “Enable” links for AMP Base and ExAMPle Subtheme themes.

For Composer Manager: Go to “Modules” (admin/modules) and enable “Composer Manager” among the list. Click Save configuration button to save the changes.

Enable AMP: Go to “Modules” (admin/modules) and tick “Accelerated Mobile Pages” (AMP) among the list. Click Save configuration button.

  1. Make sure the Configuration » System » Composer Manager (admin/config/system/composer-manager) is all green. Click on the Rebuild composer.json file button if it’s not green.
  2. You can configure the AMP settings Configuration » Content Authoring » AMP configuration (admin/config/content/amp).
  3. Enable AMP Display mode for each of the content type from Structure » Content Types (admin/structure/types) click on the manage Field and enable AMP in the custom display setting.
  4. You can see a new AMP submenu on the page after saving the above settings.
  5. Click on the “sub menu” and rearrange things as per your requirements. Finally, save all the changes and repeat it for other content types as well.

Whoa!! Your Accelerated Mobile Pages of a Drupal website are now ready for mobile devices; now no need to worry about the design, performance, and speed.

Stuck somewhere?? Don’t worry!!! You have the second option always available.

We are always ready to help. Mail us your query and requirements and our Drupal specialist will respond as quickly as possible.

Do you have a WordPress website?

No need to worry. Google has also introduced an AMP for WP which helps you to create different sorts of design and themes. With AMP for WP, you can build the AMP themes for your WordPress website. It also aids you to make your WordPress site faster on mobile.