, , ,

AEM + AMP: AEM Multisite Manager + Accelerated Mobile Pages

AEM + AMP

 

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 allowing 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 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 avoiding 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:

MSM Configuration

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

Rollout Config

Rollout Config 2

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.

Hope you find this post useful, and if you have any questions or comments please let us know (all feedback is more than welcome 🙂).

 

By: Pablo Larrosa

 

 

4 replies
  1. Antoni
    Antoni says:

    Unfortunately, this is not the POC. You have missed a lot of things to be done.
    Please note that JavaScript is allowed on AMP and there is an existing validator, that allows submitting your AMP page to google index – https://search.google.com/test/amp
    The base practice is to build accelerated page based on a full-featured page, to improve mobile user experience, but not to replace it.
    Google provides PRPL pattern for full-featured pages: https://developers.google.com/web/fundamentals/performance/prpl-pattern/

    The few changes can’t be easily done with AMP is Adobe Cloud features, such Targeting.

    Reply
    • Pablo Larrosa
      Pablo Larrosa says:

      Hi Antoni,
      First of all thanks for your comment.
      What do you mean that Javascript is allowed ?? If you take a look into the AMP project documentation it specifically says that you can’t. “AMP pages can’t include any author-written JavaScript” –> https://www.ampproject.org/learn/about-how/

      About replacing the page, we are not replacing the page. We have used MSM, so the “desktop” page is linked with the AMP one. To validate if the page have the correct AMP syntax we used a Chrome extension, you can append #development=1 to the url –> https://www.ampproject.org/docs/guides/validate-

      About Targeting/Perzonalization we are planning to use Campaign Mgr. Do you have any other working example that you can share ?? 🙂

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *