saurabh rajpal - meet magento · joomla! wordpress fast first contentful paint (

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

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 Stack PacksTailored advice for your tech stack

@imsaurabhrajpal

Without Stack Pack

Audit title

Recommendedaction

@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

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%


@imsaurabhrajpal

7.1s

Median web sites

First contentful paint

8.5s


@imsaurabhrajpal

74.9%

Median web sites

Fast first input delay

80.0%


@imsaurabhrajpal

@imsaurabhrajpal

is an ecosystem!

@imsaurabhrajpal

BUT

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

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

saurabh rajpal - meet magento · joomla! wordpress fast first contentful paint (

Documents