AMP Support for the Core Components amp-support
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? 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 amp-in-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 getting-started
Although AMP support offers a great deal of flexibility, to get started with it quickly requires only a few simple steps:
-
- For AEM as a Cloud Service projects, the Core Components are available by default and no additional installation is necessary.
- For on-premise and AMS projects, you can download the latest content package for the Core Components from GitHub and to install it in your AEM environments.
- If your on-premise or AMS project uses a Core Components release before 2.14.0, you also must install the AMP extension available as part of the release on GitHub.
-
Point your component
resourceSuperTypes tocore/wcm/extensions/amp/components/page/v1/page.- If you used the AEM Project Archetype for your project as recommended best practice and chose the option to enable AMP support, this was done for you automatically.
-
Enable AMP support on the template level or on your individual pages.
-
Deploy inlined CSS as required.
Enabling AMP for Pages enabling-amp
To enable AMP for a page, the AMP Mode must be selected in the Page 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.
The AMP settings for a page can also be overridden in the Page Properties for an individual page.
- 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.
These options appear in the UI only if the resourceSuperType is properly set for AMP support. The default WKND sample content does not have the resourceSuperType set and the options for AMP are therefore not visible in the UI.
CSS Requirements 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.
For further requirements and technical details, please see the GitHub developer documentation.