Introducing the AMP for AEM Core Components Extension

Adobe officially released it’s long-awaited AMP extension to the Adobe Core Components Library. This is welcome news to all Adobe Experience Manager (AEM) core components consumers—by enabling this extension, the AEM core components receive access to high-speed and valid AMP rendering components that won’t sacrifice any of the functionality or aesthetics users have come to associate with the Core Components Library.

The Benefits of AMP
Backed by Google, AMP (Accelerated Mobile Pages) is the preeminent way to render the most efficient and optimised web pages on mobile devices. With more and more site users browsing on mobile devices over laptop or desktop computers, the need for faster and more accessible web pages on mobile is more apparent now than ever.

AMP solves the problems of slow and non-optimized page rendering that have long been associated with the mobile browsing experience through methods like inlining CSS, caching pages, pulling JavaScript assets from a CDN, and more. With AMP, mobile pages render faster and pages are built with a mobile-first mindset—mobile users have a web experience catered just for them.

In no small part due to these mobile optimisations, AMP pages offer increased discoverability in search results, and AMP visitors tend to stay on sites longer.

Adobe’s Integration with AMP
With the support of Adobe and Google, Bounteous set out in 2019 to develop an AMP extension to the Core Components Library. The goal was to create a parallel experience for all users between the AMP variation and non-AMP variation of the library. This means that, aesthetically, users would not be able to see any visual or functional differences between AMP components and their non-AMP rendering component counterparts.

While the AMP and non-AMP components offer a visual one-to-one match, the components utilising the AMP extension return valid AMP rendering mark-up and access to all the benefits of AMP noted above. To learn more about how we achieved this, see An Open Source Dynamic Duo: AMP for AEM Core Components.

[amp, left / non-amp, right]

From an authoring perspective, sites utilising the AMP extension receive a parallel authoring experience. Sites using the core components can be updated at any time to enable the AMP extension without losing content created in the non-AMP component variation. Sites can also gradually roll out the AMP feature on a page by page basis as more components gain AMP support.

AMP and Adobe are both open source initiatives. Because of this, the features implemented are routinely growing based upon user needs. Much like the AEM Core Components Library, AMP also offers a vast list of components that are built with common web features and patterns in mind. To contribute to either open source initiative, you can follow the contribution guidelines for Adobe and AMP below:

for Adobe
for AMPWhy you Should Enable AMP on Your AEM Site

For static web pages, AMP offers the best possible browsing experience for your mobile users. For AEM sites, enabling AMP is a seamless experience and offers faster loading, more accessible, and higher-ranked mobile pages. With the release of the AMP for AEM extension, you can get started creating AMP sites in AEM today.