Embed Size (px)
Citation preview
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
