AMPifying your Drupal 8 Site

This blog post will help you make your customer's mobile experience remarkably unforgettable (in a good way!)

Let’s start with the basics.

What is AMP?

AMP (Accelerated Mobile Page) is an open source initiative between publisher and technology to improve mobile content ecosystems. Along with being a stripped-down form of HTML, its chief objective is to improve the web on mobile devices.

AMP

Why AMP?

Mobile technologies are driving trillions of dollar impact on the market. With every small business going mobile, how are the current mobile experiences, frustrating, dissatisfying, or disappointing? The root cause of this trouble is time taken to load even the simplest of pages on a mobile device. There are a lot of unnecessary resources loaded on the mobile browser, for example:

•    Global CSS containing code that is irrelevant for mobile devices

•    Ill written JS Library or custom JS code

•    Unoptimized images

Thus to avoid these and many other challenges AMP was launched. Here are a few reasons why you should add AMP technology to your website:

•    Reduced bounce rate

•    Helps monetize your site

•    Essential for good mobile SEO

•    Offers analytics

Core components for AMP

amp 2

Before we dive into the attributes of these core AMP components, let’s briefly brush through how Google and other search engines target AMP pages.

Web crawler visits all the publicly available URLs; it then examines the HTML, if the HTML contains “AMPhtml”, the crawler then chronicles it as an AMP version of the page

 

Here is a sample AMP HTML

AMP CODE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

•    The thunderbolt symbol denotes that it is an AMP page

•    Canonical, points the actual web URL for the article

•    Viewport, tells the browser to use the full width of the mobile device

•    AMP-boilerplate, is compulsory and initially hides the content until AMP JS is loaded.

 

  • AMP CSS

AMP HTML also contains an AMP standard of writing CSS

 

<style AMP-custom>

 AMP-img {

   margin: 0.5em;

 }

 body {

   max-width: 900px;

 }

</style>

Some of the things you need to follow while designing are:

•   CSS should be written within the style tag in the head with AMP-custom attribute.

•  Not all properties are allowed in AMP. Many CSS properties slow down the rendering of a page. The following tags are forbidden in AMP pages:

  1. !important
  2. Universal selector (*)
  3. Overflow styles
  4. @import
  5. Inline style in tags
  6. External stylesheet.

 

  • AMP JS

The AMP JS library implements AMP's best performance practices. AMP doesn’t allow any custom JavaScript. In case you still want to use custom JS then you may use AMP-iframe, since it won’t affect the normal loading of your website.

 

  • AMP CACHE

The Google AMP cache can be used to serve cached AMP HTML pages. It is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance instantaneously.

Documents, all JS files, and all images are loaded from the same origin that is using HTTP 2.0 for maximum efficiency.

The cache also comes with a built-in validation system which confirms that the page is guaranteed to work and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification.

Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

 

AMP Tags

Layout Specific (might affect the page size)

•    AMP-image (size of the image is compulsory)

•    AMP-video

•    AMP-iframe

•    AMP-audio

Content Specific

•    AMP-twitter

•    AMP-youtube

•    AMP-ad

•    AMP-carousel

Tools for AMPing  Drupal 8 website

•    Modules:

–    AMP (https://www.drupal.org/project/AMP)

–    Token (https://www.drupal.org/project/token)

  • AMP theme (https://www.drupal.org/project/AMPtheme)
  • AMP PHP Library (https://github.com/Lullabot/AMP-library)

AMP Supports Ads

Ads on mobile web pages are annoying while browsing content; nevertheless, in most cases, Ads generate a huge chunk of revenue. Thus AMP supports Ads with pre-defined Ad Formats, networks and technologies which do not affect site performance.

Analytics with AMP

Analytics is an integral part of measuring your website's performance. AMP supports analytics along with enhancing user experience and site performance. AMP also prevents multiple analytics tracking which slows down your website.

Two ways to enable Analytics with AMP are:

•    AMP Pixel Element

•    AMP Analytics allows you to track user interactions with AMP pages and it has built-in support for Google Analytics. 

 

Thinking of implementing Accelerated Mobile Pages (AMP) to your website? Then you just one step away! Drop us a word at inform@faichi.com and our experts shall get back to you!

Get in Touch

Get Aggregated Monthly Industry News