- Core Components Introduction
- Paths to Success
- Component Library
- Versions
- Get Started
- The WCM Components
- Accordion
- Breadcrumb
- Button
- Carousel
- Container
- Content Fragment
- Content Fragment List
- Download
- Embed
- Experience Fragment
- Image
- Language Navigation
- List
- Navigation
- Page
- PDF Viewer
- Progress Bar
- Quick Search
- Separator
- Social Media Sharing
- Table of Contents
- Text
- Tabs
- Teaser
- Title
- Form Components
- v1 Components
- v2 Components
- v3 Components
- Email Components
- Adaptive Forms
- Introduction
- Version History
- Adaptive Forms Components
- Adaptive Forms Accordion
- Adaptive Forms Button
- Adaptive Forms Checkbox
- Adaptive Forms Checkbox Group
- Adaptive Forms Container
- Adaptive Forms Date Picker
- Adaptive Forms Drop-down List
- Adaptive Forms Email Input
- Adaptive Forms File Attachments
- Adaptive Forms Vertical Tabs
- Adaptive Forms Horizontal Tabs
- Adaptive Forms Image
- Adaptive Forms Number Input
- Adaptive Forms Panel
- Adaptive Forms Radio Button
- Adaptive Forms Reset Button
- Adaptive Forms Submit Button
- Adaptive Forms Telephone Input
- Adaptive Forms Text
- Adaptive Forms Text Box
- Adaptive Forms Title
- Adaptive Forms Wizard Layout
- Adaptive Forms Terms and Conditions
- Header
- Footer
- Customize Adaptive Forms Core Components
- Sample themes and templates
- Developing
- Developing Core Components
- Paths to Success
- WKND Developer Tutorial
- Customizing Core Components
- Component Guidelines
- AMP Support
- Context-Aware Configurations
- Including Client Libraries
- The Adaptive Image Servlet
- Web-Optimized Image Delivery
- Next Generation Dynamic Media Support
- Adobe Client Data Layer
- AEM Project Archetype
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:
- 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.
- Once the AMP extension is installed, the component author must simply point the component supertypes to those in the extension.
- Enable AMP support on the template level or on your individual pages.
- 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.
- 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.
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.
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.
Resources
Adobe Account
