AEM + AMP: AEM Multisite Manager + Accelerated Mobile Pages

Hi everyone! I’m currently working on a very fun task related to a project I’m assigned to and thought it’s a good one to share.

The client wants to have AMP pages, so they decided to create a PoC with a possible implementation. Interestingly, when I started reading about AMP I found two facts that were really shocking to me:
Slow loading sites frustrate users and negatively impact publishers: 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load!
77% of mobile sites take longer than 10 seconds to load on 3G networks, making it a whole lot of abandoned websites.

Ref: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

In addition, AMP has lots of restrictions including:
Not allowed to use any JavaScript on the page that isn’t provided by AMP
Trimming CSS to 50KB
Substituting HTML media tags for AMP equivalence

More info https://www.ampproject.org/

So naturally, my first thoughts regarding these restrictions were:
I need to create a new template just for AMP??
How can I relate AMP components with the already developed ones??
I have lots of custom JavaScript, so do I need to create a new code for these components??

And the answer to all these questions is: yes! I ended up creating a new template for AMP, creating a new header/footer component (because the ones that were already developed used Bootstrap), etc.

Next, I had to figure out how could I associate the desktop version with the AMP version, not only to be linked (AMP canonical rel) but also to avoid duplicating content.

After evaluating different approaches, I ended up using MSM with a couple of Rollout configurations (the same way as the OOB Geometrixx Mobile Site)

Below you will find a diagram of how MSM ended up configured:



http://localhost:4502/miscadmin#/etc/msm/rolloutconfigs

I created a specific rollout config that replaced each resource type with the AMP value on the rollout operation.

(e.g. /conexio/components/structure/header to/conexio/amp/components/header)

http://localhost:4502/etc/msm/rolloutconfigs/geometrixx-outdoors-mobile.html




For the PoC I selected a set of pages and components to start (e.g. blogs pages), and also used a Chrome extension that helped validate the page as AMP very quickly.