Business Success With Core Web Vitals | Izzi Smith

BUSINESS SUCCESS
WITH
CORE WEB VITALS

Hey, I’m Izzi Smith!
Technical SEO Lead @ Ryte
Previously worked in-house &
consulting side
Loves giving community talks
Loves cheesy jokes
@izzionﬁre

HELLO HAVE
YOU HEARD
ABOUT CORE
WEB VITALS

Core Web Vitals
each represent a distinct facet of the User Experience

Largest
Contentful Paint
(LCP)
The LCP metric reports the render
time of the largest image or text
block visible within the viewport.
LCP

First Input Delay (FID) helps
estimate and measure when a user
can ﬁrst interact with a page’s core
elements.
First Input Delay
(FID)

User Interaction
100 ms 200 ms 300 ms 400 ms 500 ms
Response
First Input Delay

Cumulative
Layout Shift
(CLS)
CLS helps quantify unexpected
layout shifts and helps determine
how visually stable a page is.
free shipping

Copyright © 2021, Ryte GmbH, All rights reserved
@izzionﬁre

@izzionﬁre
good!

@izzionﬁre
1. Evaluation
Assess the current damage across
all major page templates using
appropriate speed tooling.
2. Prioritization
Figure out the most critical issues
depending on conversion/user
engagement risk and impact.
3. Recommendation
Reach out to developers/ POs and
provide your advice and evidence
without forcing solutions.
5. Implementation
Measure the impact on your user
engagement to prove beneﬁts. Use these
in future iterations.
4. Expectation
Try to best communicate the impact of
your suggestions, but grasp existing
priorities and workload.
05
01
02 03
04
The Process of Website Iterations

Effective
measurement of
Core Web Vitals

@izzionﬁre
Chrome Lighthouse

@izzionﬁre
What makes up the Performance Score?

@izzionﬁre
PageSpeed Insights

@izzionfire
Real User Monitoring (RUM) data captured from
actual users experiencing your pages with their
unique network and device.
Strengths:
● Captures the real-world experience
● Easier to correlate with business KPIs
Weaknesses:
● Restricted set of metrics
● Limited capabilities for debugging
● Requires you to have existing significant
visits to the site
Used by: CrUX Report Page Speed Insights
Data collected within a controlled environment
with predefined network settings and devices.
Strengths:
● Reproducible results are more helpful for
debugging
● Easier to identify and isolate issues
Weaknesses:
● Might not capture “real-world” problems
that users face
● Might not be completely representative
Used by: Lighthouse Page Speed Insights
Lab data Field data
Chrome Dev Tools Ryte Google Search Console

@izzionﬁre
Ryte Web Vitals Report

@izzionﬁre
Filter and narrow down the
results by directory (or any
criteria)

@izzionﬁre
Locate the most affected
directories to prioritize

@izzionﬁre
Uncover any culprits like
heavy assets to optimize

@izzionﬁre
☑ Evaluation
Assess the current damage across
all major page templates using
appropriate speed tooling.
☑ Prioritization
Figure out the most critical issues
depending on conversion/user
engagement risk and impact.
3. Recommendation
Reach out to developers/ POs and
provide your advice and evidence
without forcing solutions.
5. Implementation
Measure the impact on your user
engagement to prove beneﬁts. Use these
in future iterations.
4. Expectation
Try to best communicate the impact of
your suggestions, but grasp existing
priorities and workload.
05
01
02 03
04
The Process of Website Iterations

@izzionﬁre
web.dev/learn-web-vitals/
Swot up on CWV recommendations

@izzionﬁre
Swot up on CWV recommendations
ryte.com/product/webinars

@izzionﬁre
Have a test domain like a private blog

@izzionﬁre
Start the conversation with Web teams
Fancy a
natter?

Find the LCP culprit: Chrome DevTools -> Lighthouse

Find the LCP culprit: Chrome DevTools -> Performance Tab -> Timings

@izzionﬁre
Some best practices for image performance optimization
This image format is 26%
smaller in size compared
to PNGs, and becoming a
new web standard.
Convert to
WebP format
Prioritize the loading of
important hero images by
using <link rel=preload>
Preload hero
images
This provides an array of
image URLs so that
browsers can choose the
correct version per device.
Use srcset for
responsiveness
Delivers the content from
a closeby server, and can
transform depending on
the required device.
Use an
Image CDN
The page can therefore be
built with the appropriate
space reserved for the
image.
Provide image
dimensions
Many compression services
allow you to minimize the ﬁle
size while maintaining an
image’s quality.
Always
compress

above the fold has all the
need-to-know information

@izzionfire
Some best practices for image performance optimization
This image format is 26%
smaller in size compared
to PNGs, and becoming a
new web standard.
Convert to
WebP format
Prioritize the loading of
important hero images by
using <link rel=preload>
Preload hero
images
This provides an array of
image URLs so that
browsers can choose the
correct version per device.
Use srcset for
responsiveness
Delivers the content from
a closeby server, and can
transform depending on
the required device.
Use an
Image CDN
The page can therefore be
built with the appropriate
space reserved for the
image.
Provide image
dimensions
Many compression services
allow you to minimize the
file size while maintaining
an image’s quality.
Always
compress
Use the loading attribute
to defer the loading of
offscreen images that can
be reached by scrolling.
Lazy load
offscreen imgs
Do you need those 57
large stock photos for this
financial advice article? I
didn’t think so.
Evaluate the
purpose
New
New

@izzionﬁre CLS is normally <1

@izzionﬁre
Dev Tools -> Performance -> enable Web Vitals

@izzionﬁre
View layout shifts on the timeline

@izzionﬁre
Main navigation
and unstyled text
Body copy is
painted
COVID Banner
appears
Image
appears
Cookie banner
appears
Loading animation
Visualize the trace to locate problem elements

@izzionﬁre
Reserve sufﬁcient space for any incoming banners
Polite Cat
sticker
The most politest cat sticker
you’ve ever seen.
read more
$2
Polite Cat
sticker
The most politest cat sticker
you’ve ever seen.
read more
$2
Polite Cat
sticker
$2
Polite Cat
sticker
Free shipping today

@izzionﬁre
Preload key fonts to avoid ﬂickers of unstyled text

@izzionfire
Provide image height and width dimensions
● Always include the width and height size
attributes on your images and video elements.
● Reserve the required space with aspect ratio
boxes so that the browser can allocate the
correct amount of space while the image loads.
● Utilize srcset for responsive images to allow
the browser to select between the correct
image dimension, depending on viewports.
Polite Cat #1
Politest cats from all over the world. Who are they? Let’s find out.
Here is the most polite cat of 2020. He’s a very polite lil guy. He is
smol. Politest cats from all over the world. Who are they? Let’s find
out. Here is the most polite cat of 2020. He’s a very polite lil guy.
He is smol.
Polite Cats
read more buy stickers
<img src="politecat.jpg"
width="360" height="640" alt="A
very polite cat">
9:16
360
640

@izzionﬁre
Find unused JS / CSS to remove or reduce

@izzionﬁre
Quick wins to improve CWV scores today
Shared hosting plans can
reduce response times,
consider optimizing your
hosting plan when relevant.
Check your
hosting
Educate your SEO team and
UX-minded colleagues on
best practices for better
pages.
Educate
others
Provide Critical CSS and
preload elements that are
required for initial painting or
above-the-fold area.
Consider
critical paths
Provide dimensions, compress,
preload hero images, lazy
load, see previous slides!
Optimize
visual assets
Ensure unnecessary plugins
or elements are not wasting
resources. And keep used
ones up-to-date!
Remove unused
plugins
A CDN caches content and
serves assets from closeby
locations, creating a faster
loading time.
Serve content
with a CDN

THANK
YOU.
izzi@ryte.com
en.ryte.com

Business Success With Core Web Vitals | Izzi Smith

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Similar a Business Success With Core Web Vitals | Izzi Smith

Similar a Business Success With Core Web Vitals | Izzi Smith (20)

Más de Noisy Little Monkey

Más de Noisy Little Monkey (20)

Último

Último (20)

Business Success With Core Web Vitals | Izzi Smith