AMP Support for the Core Components

As of release 2.11.0 of the Core Components, AMP - Accelerated Mobile Pages - are fully supported.

This document gives an overview of how AMP is supported as well as how to enable it for your sites. However for full technical details, please see the GitHub developer documentation.

What is AMP?

Accelerated Mobile Pages or AMP is an open-source framework originally designed by Google to optimize pages for mobile browsing. AMP pages typically load much more quickly than standard web pages, offering better mobile experiences.

AMP in the Core Components

Support for AMP in the Core Components is fully configurable. AMP versions of pages can be served exclusively, alongside the standard HTML versions, or not at all.

The Core Components use amp as a Sling selector to render an AMP page. For example example.html would render the normal page and example.amp.html would be the AMP version.

Individual projects can decide whether or not to leverage AMP. In fact, because AMP and standard HTML pages can be delivered in parallel, a project can choose to use AMP on only certain pages of the project.

Getting Started with AMP Support in Your Project

Although AMP support offers a great deal of flexibility, to get started with it quickly requires only a few simple steps:

  1. Install the AMP support extension if required.
    • For AEM as a Cloud Service projects, the extension is automatically available with the Core Components and no installation is necessary.
    • For on-premise and AMS projects, the extension must be explicitly installed when installing the Core Components.
  2. Once the AMP extension is installed, the component author must simply point the component supertypes to those in the extension.
  3. Enable AMP support on the template level or on your individual pages.
  4. Deploy inlined CSS as required.

Enabling AMP for Pages

To enable AMP for a page, the AMP Mode must be selected in the Page Policy.

AMP Page Policy options

  • No AMP - The page is delivered as standard HTML only.
  • Paired AMP - The page is delivered as AMP as well as HTML.
  • AMP Only - The page is delivered as AMP only.

The AMP settings for a page can also be overridden in the Page Properties for an individual page.

AMP Page Properties

  • Inherit from Page Template - This is the default value, which allows the setting to be taken from the page template’s policy.
  • No AMP - The page is delivered as standard HTML only.
  • Paired AMP - The page is delivered as AMP as well as HTML.
  • AMP Only - The page is delivered as AMP only.

CSS Requirements

When using AMP with the Core Components, the main difference is that AMP requires all CSS to be inlined in the <head> element as well as optimized.

To support this, a customized page component is used, which loads just the AMP-specific CSS for components present on the page.

NOTE

Due to AMP design limitations Adobe does not support the use of the Responsive Grid with the AMP version of your page.

For further requirements and technical details, please see the GitHub developer documentation.

On this page