Bajaj Finserv

AMP support in Magento 2.0 store

Published at May 17th 18, 20:33

Introduction

The Bajaj Finserv EMI Network has more than 43,000 sellers across India offering more than 1 million products on No Cost EMI having an online shopping store to sell products online, which was developed using Magento 2.x running on nginx/1.12.1. 

It has approx 40 categories of products, multiple Magento Extensions have installed on the portal to display Products, Offers, EMI, Deals etc. 

The requirement for this postal is to create AMP pages for the portal so that it can gain the highest rank on SEO and make it easy to load the website on Mobile Devices.  


Background

The website of Bajaj Finserv multiple Magento extensions installed so the website homepage size is approx 5 to 10 MB in size. That is taking very long time to load on the browser. It varies panic to load this website into mobile device browser where internet speed and phone memory vary matter. 

To provide AMP Pages for the website in Magento we need to create amp HTML for all component on the website. It was hard to develop the AMP HTML in Magento where multiple parts of HTML is generated from different Magento modules.  After that, if any new module installs then it may fail AMP validation due to Non-AMP Html generated by other modules. So it was challenging to provide the best solution to avail the AMP pages for the website.


Alternatives

After a search on google for AMP Extension for Magento, we found only one extension is available i. E. “Accelerated Mobile Pages (AMP) Extension for Magento 2” with Price of $149. But we faced issue is there that we need to add all products to this extension one by one and it creates then amp page for that. That is a very hard work to do when we have already lots of product listing on the website. So this was not a good solution to provide them where a large time involved to create amp pages for an individual product.


Proposed Solution

 To provide a better solution for AMP Pages in Magento we started a study on Magento workflow to generate normal HTML for browsers. It generates HTML by combining all module’s HTML head and contents together. After prepare HTML it passes it to Template to render. So Template is the best place where we can modify HTML according to our need. We started to develop a converter which can take normal Html Contents and convert it to amp format HTML and add validate AMP Hml. 

The workflow of Conversion system is as below:


AMP Converter apply one by one all the logic related to AMP pages. For eg. Add AMP Script, Add inline CSS for the page,  Convert Sidebar to AMP-Sidebar, IMG tag to amp-image tag, Remove all inline CSS and attributes, Remove External CSS and Scripts etc. 

After conversion process completes the converted Html transfer to the browser and due to no external link, script and IMG tag page render on mobile immediately on mobile devices.


Implementation

To apply the proposed solution we need to get the place where Magento combines all modules and produces the final HTML output. The portal is developed on Magento 2.x where the final Html render using the root.phtml which exist inside the directory


/vendor/magento/module-theme/view/base/templates/

 We put there a condition to check whether the request is for APM page or for the regular page. If the request is for APM page then we applied the logic to convert the HTML into APM validated HTML format.

To implement the logic we used different Regular Expressions to remove addition attributes, inline styles, links and scripts that fail the AMP validation test. Now I get clean HTML with AMP validation successful. Now the challenge is how to create dynamic elements like accordion, sidebar, carousel without using javascript.

AMP have library for different dynamic components like carousel, sidebar, accordion, web push etc. These have its own tags to work accordingly. After cleaning the HTML we converted the HTML to HTML DOM object and put these dynamic components inside the amp provided tags such as sidebar div now inside the amp-sidebar tag. 

After applying above logic the HTML was ready for AMP, next step was to write on page CSS within 50 KB size.  We have used CSS minification tool after writing the full CSS from scratch.

We also added the APM core CSS in the head section to view APM elements properly like loader, sidebar etc. In the head section of regular section added the link of amp HTML so that browser can know that AMP page is available for current request and load the AMP page accordingly.

For AMP page request we add a query string in amp=1 to know the request is for AMP page. We have completed the conversion of the HTML into APM and the portal is ready to serve AMP pages to the mobile browser.