saurabh rajpal - meet magento · joomla! wordpress fast first contentful paint (
TRANSCRIPT
Saurabh Rajpal
For Emails in eCommerce
Technical Solutions Consultant Google India
@imsaurabhrajpal
@imsaurabhrajpal
of sites are built with a CMS
Source:
w3techs.com/technologies/overview/content_management/all
@imsaurabhrajpal
CMS usage is up and to the right
40%
30%
20%
10%
0%
2011 2012 2013 2014 2015 2016 2017 2018 2019 Sept 2019
50%
60%
23.6%29%
31.8%35.2%
38.3%43.4%
46.7% 48.7%
54.7% 56.3%
Y/Y Change 5.4% 2.8% 3.4% 3.1% 5.1% 3.3% 2% 6% 1.6%
CMS Usage by Year (on Jan 1)
@imsaurabhrajpal
The webby the numbers
@imsaurabhrajpal
Is it useful? Is it usable?Is it happening?
First Paint (FP) First Contentful Paint (FCP)
First Meaningful Paint (FMP)
Time to Interactive (TTI)
User-centric performance metrics
@imsaurabhrajpal
Joomla!
WordPress
Fast First Contentful Paint (<1 second)
Drupal Contentful
Shopify Magento
Desktop is improving, slowly. Mobile is improving, faster! This is a ~consistent trend across all platforms.
Desktop Mobile
@imsaurabhrajpal
Joomla!
WordPress
Fast First Contentful Paint (<1 second)
Drupal Contentful
Shopify Magento
Desktop is improving, slowly. Mobile is improving, faster! This is a ~consistent trend across all platforms.
Desktop Mobile
@imsaurabhrajpal
Performance in the lab Performance in the real world
@imsaurabhrajpal
Lab data(Synthetic)
Lots of data, straightforward debugging
Not real world
@imsaurabhrajpal
Field data/RUM(Real user measurement)
True real-world experience. Can be correlated with business metrics
Restricted set of metrics
@imsaurabhrajpal
+Lab and field
@imsaurabhrajpal
PageSpeed InsightsLighthouse Chrome User Experience Report (CrUX)
+
Lab Lab + Field Field
@imsaurabhrajpal
Lighthouse
@imsaurabhrajpal
Lighthouse
@imsaurabhrajpal
Lighthouse
@imsaurabhrajpal
Lighthouse Stack PacksTailored advice for your tech stack
@imsaurabhrajpal
Without Stack Pack
Audit title
Recommendedaction
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
Magento Stack Pack wasbuilt withcommunity contributions ♥
@imsaurabhrajpal
github.com/↲GoogleChrome/lighthouse-stack-packs
@imsaurabhrajpal
PageSpeed Insights
@imsaurabhrajpal
PageSpeed Insights
Field data
Lab data
@imsaurabhrajpal
Real User Metrics
from Chrome users,
by country, for 6,008,004* origins
@imsaurabhrajpal
Real User Metrics
from Chrome users,
by country, for 6,008,004* origins
* SELECT COUNT(DISTINCT origin)
FROM `chrome-ux-report.all.201909`;
@imsaurabhrajpal
@imsaurabhrajpal
1. Create a Google Cloud Project
2. Enable the Big Query API
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
Chrome User Experience Report (CrUX)
@imsaurabhrajpal
httparchive.org
@imsaurabhrajpal
@imsaurabhrajpal
5,000,000 sites total
0,057,000 Magento sites
@imsaurabhrajpal
1745 KB
Median web sites
Total Kilobytes
2711 KB
Median Magento sites
@imsaurabhrajpal
80.4%
Median web sites
% of sites on HTTPS
93.6%
Median Magento sites
@imsaurabhrajpal
7.1s
Median web sites
First contentful paint
8.5s
Median Magento sites
@imsaurabhrajpal
74.9%
Median web sites
Fast first input delay
80.0%
Median Magento sites
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
is an ecosystem!
@imsaurabhrajpal
BUT
Why AMP for email?
@imsaurabhrajpal
Why AMP for email?
@imsaurabhrajpal
Promotions from businesses
Social network notifications
Making plans with friends
Work notifications
Recommendations from businesses
Customer Exp surveys
Receipts
@imsaurabhrajpal
1.5B Gmail users monthly
280B Emails SentDaily in 2018
@imsaurabhrajpal
~2000
The Evolutionof Web
@imsaurabhrajpal
2019
The Evolutionof Web
@imsaurabhrajpal
Emails have remained the same...
2019~2000
@imsaurabhrajpal
Email plays a central role in our lives
The web has evolved dramatically over the past two decades
Email has been left behind
@imsaurabhrajpal
AMP for Email
@imsaurabhrajpal
Why AMP for email?
InteractiveOffer new opportunities for readers to engage and take action directly in an email.
VersatileInclude multiple categories, links, and CTAs – which can lead to more user engagement.
SmarterReduce the number of clicks, increase adoptions, and improve down-funnel engagement.
@imsaurabhrajpal
Example Feature: Carousel
@imsaurabhrajpal
Example Feature: Accordian
@imsaurabhrajpal
Allow users to take action
Bring engaging
experiencesto emails
Fetch up-to-date
information
Advantages!
@imsaurabhrajpal
Google DocsReply to comments
@imsaurabhrajpal
PinterestBrowse Ideas
@imsaurabhrajpal
Travel Recommendations
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
@imsaurabhrajpal
1. Purpose
2. Discovery
3. Navigation
Do dynamic elements support the email’s intended purpose?
Are users aware of interactive elements, or up-to-date content?
Does the nav structure of the email complement its purpose?
Design Guidelines
@imsaurabhrajpal
4. Confirmation
5. Short & sweet
6. Accessibility
Are dynamic elements scoped to the scale of an email? Does it link out when appropriate?
Is the email accounting for accessibility best practices?
Are actions supported in the email followed by feedback on status, success, or failure?
Design Guidelines
@imsaurabhrajpal
Ecosystem Overview
Creation & Design
@imsaurabhrajpal
Ecosystem Overview
Creation & Design
Testing
@imsaurabhrajpal
Ecosystem Overview
Creation & Design
Testing
ClientsDeveloper preview
ComingSoon!
@imsaurabhrajpal
Ecosystem Overview
DELIVERY
@imsaurabhrajpal
go.amp.dev/learn-emailg.co/dev/ampemail
Gmail : g.co/dev/ampemail
Mail.ru : https://postmaster.mail.ru/amp
Outlook: docs.microsoft.com/en-gb/outlook/amphtml/
Get started today!!
@imsaurabhrajpal
Thank You
@imsaurabhrajpal