magento meetup new delhi- accelerated mobile pages(amp)

Hello everyoneAccelerated Mobile Page (AMP)

I’m?

Avneesh KumarSoftware Engineer

Facts about expectation and reality

➔ 47% of people expect a web page to load in 2 seconds or less

➔ 40% of visitors will abandon a website page that takes 3 seconds or more to load

➔ 79% of web shoppers who have to wait too long say they won’t come back to purchase again

➔ An ecommerce site takes 5 seconds to load on an average

Source - Strangeloop

Mobile view of Google search page

**Logos and Trademarks are owned by their respective owners

What is AMP?

➔ Advanced technology to render page faster than ever

➔ Lightweight mobile pages

➔ Lifeline to gain mobile web users

Why AMP?

➔ Future is mobile

➔ Low internet connection

➔ Instant loading

➔ Improved search engine ranking

➔ Better user experience

Why it is so fast?

➔ Pre-rendering

➔ Asynchronous loading

➔ Pre-calculation of layout

➔ Encourage brevity

➔ No external stylesheet

Pillar of AMP

➔ Amp Html (amp-img)

➔ Amp js

➔ Google Amp cache

Sample amp html page

**Logos and Trademarks are owned by their respective owners

Why should we use it for E-commerce

➔ People like fast websites

➔ Shopzilla speed up average page load time from 6 second to 1.2 seconds and experienced a 12% increase in revenue and 25% increase in page view

➔ Microsoft Bing and Google found that even small delays (under 500 milliseconds) have a negative effect

➔ For every 1 second of improvement to load time, the site experienced up to a 2% improvement in conversion rate

Source - soasta

Analysis by Walmart

**Logos and Trademarks are owned by their respective owners

AMP validation

➔ Amp validator (Google chrome extension)

➔ Console validation

➔ Command line tool

➔ Onsite validator

Make sure that your amp page is actually AMP

Amp validator (Google chrome extension)

**Logos and Trademarks are owned by their respective owners

Console validation

**Logos and Trademarks are owned by their respective owners

Command line tool

**Logos and Trademarks are owned by their respective owners

Node.js with it's package manager 'npm' on your system.

Onsite validatorhttps://validator.ampproject.org

**Logos and Trademarks are owned by their respective owners

AMP analytics

➔ Include js to enable analytics

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

➔ Using analytics

<amp-analytics type="googleanalytics" id="analytics1"></amp-analytics>

➔ Analytics vendor are adobe (adobeanalytics), afs(afsanalytics), at(atinternet) etc

Pitfalls of AMP

➔ Depends on search engine crawling

➔ Rewrite codes

➔ IT team required

➔ Decreased effects

Let’s amplify our website using AMP

Thank you