Business Success with Core Web Vitals

#SMX
BUSINESS SUCCESS
WITH
CORE WEB VITALS

#SMX
ABOUT ME
➔ Technical SEO Analyst @ Ryte
◆ Sparring partner
◆ Marketeer
➔ Previously worked in-house &
consulting side
➔ Loves giving community talks
➔ Loves cheesy jokes
➔ @izzionﬁre

#SMX
AGENDA
1. Core Web Vitals in a nutshell
2. Page Experience as a ranking factor
3. How to correctly measure the CWV scores
4. Optimizing Core Web Vitals
5. Becoming a Page Experience advocate!
6. Quick case studies
7. Q&A

#SMX
Core Web Vitals
(CWV) in a nutshell

#SMXCopyright © 2020, Ryte GmbH, All rights reserved
For now, we have:

#SMX
Largest Contentful Paint
(LCP)

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

Largest Contentful Paint > First Contentful Paint
¯_(ツ)_/¯

1. Pages load in stages, the largest element is subject to change
2. The browser dispatches a PerformanceEntry of type largest-contentful-paint that will identify the
element as soon as the browser has painted the ﬁrst frame.
3. It will dispatch another PerformanceEntry as soon as this changes!
Largest Elements for a page can change as it loads
Here is my H1 Here is my H1
Here is my H1 Here is my H1 Here is my H1
I am a paragraph! I am a
paragraph! I am a fun
paragraph! I am a cool
paragraph! paragraph! I am
a section of text about cool
things like paragraphs!
PerformanceEntry
PerformanceEntry
PerformanceEntry

Find the culprit in DevTools -> Performance

Largest Elements don’t have to be images, or
rendered last

Elements considered for LCP (for now)
<img> or <image>
elements inside an
<svg> element
The poster image of
<video> elements
Block-level elements
containing text
(a typical webpage text
element)

First Input Delay (FID) helps estimate and measure when a user can ﬁrst interact with a
page’s core elements. If the main thread is busy loading other elements, this can impact FID.
First Input Delay (interactivity)
Polite Cat #1
Politest cats from all over the world. Who are
they? Let’s ﬁnd out. Here is the most polite cat
of 2020. He’s a very polite lil guy. He is smol.
Polite Cats
read more

What impacts First Input Delay?

What impacts First Input Delay?
First Input
Delay

A great FID guide from Onely!

#SMX
Cumulative Layout Shift
(CLS)

Cumulative Layout Shift (visual stability)
Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can
determine how visually stable a page is!

Cumulative Layout Shift (visual stability)
Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can
determine how visually stable a page is!
1

Unexpected movement of page elements can take place when resources are loaded asynchronously of DOM
elements get injected above existing content. This results in frustrations and bad user experiences.
The common culprits that affect CLS
Polite Cat
sticker
The most politest cat sticker
you’ve ever seen.
free shipping
read more
$2
Polite Cat
sticker
you’ve ever seen.
$2
read more
buy now
Polite Cat
sticker
Polite Cat
sticker
you’ve ever seen.
Polite Cat
sticker
you’ve ever seen.
$2

Thanks @defaced!
https://defaced.dev/tools/layout-shift-gif-generator/

Introducing: the Page Experience Update

CWV will contribute to a Page Experience metric

Of course, Page Experience is not everything!

Don’t just forget other important signals

But Page Experience scorings can give you a ﬁrm edge
No Excuses
in 2021

Recent news: Page Experience Update is
coming in May 2021

News: Google will test visual indicators on the SERPs!

How could this look and behave? Who knows!

A SERP test from 2015 showed slow pages

Something like this? 🤔
Secure Safe Fast Mobile Friendly
Secure Safe Slow Not Mobile Friendly

Secure Slow performanceSafe browsing Not mobile friendly
Secure Fast performanceSafe browsing Mobile friendly

45
90

Indicator being tested found on 4th December

Are you ready for the Page Experience Update?

#SMX
Effective
measurement of
CWV

Google Lighthouse

What makes up the Lighthouse Performance score?

Lighthouse weights are frequently updated
-5%
-12%
-18%
NEW
NEW
NEW

Page Speed Insights

#SMX
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 signiﬁcant
visits to the site
Used by: CrUX Report Page Speed Insights
Data collected within a controlled
environment with predeﬁned network
settings and device.
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

Check the Onely Map for Chrome usage stats

Ryte Website Success: New Web Vitals Report

Related to FID: Total Blocking Time
TBT measures the total amount of time that a page is blocked from responding to user input,
such as mouse clicks, screen taps, or keyboard presses.

Related to FID: Total Blocking Time

#SMX
What are the main
causes of poor CWV
scores?

The main causes of poor CWV scores:
● Slow server response
times
● Render-blocking
JavaScript & CSS
● Slow resource load
times
● Client-side rendering
● Long tasks on the main
thread
● Long JS execution time
● Render-blocking JS
● Images without
dimensions
● Dynamically injected
content
● Actions waiting for a
network response
● Ads & iframes without
dimensions

We’ll need developers, but let’s cover that later!

#SMX
How to improve
Largest Contentful
Paint

#SMX
Combat problems that
contribute to slow server
responses

Optimize your server to improve response times
client server

Polite Cat #1
Politest cats from all over the world.
Who are they? Let’s ﬁnd out. Here is
the most polite cat of 2020. He’s a very
polite lil guy. He is smol.
Polite Cats
read more
client server
request
response
500kb
cat.js
300kb
sticker.css
200kb
login.js

Polite Cat #1
Polite Cats
read more
client server
request
response

Cache static assets that don’t update frequently
Polite Cat #1
Polite Cats
read more
client server
request
response
sticker.css
cat.js
login.js

Leverage Cache-Control

Some useful example directives.

30 days

Preconnect to establish 3rd party connections early
Inform the browser
that the page
intends to establish
a connection ASAP

Use a CDN (Content Delivery Network)

#SMX
Deal with render-blocking
assets and scripts

Render-blocking CSS and JavaScript

Optimizing Critical CSS
Polite Cat #1
Polite Cats
read more
Who is polite cat?
Height: 183cm
Birthday: 18.08.1993
Favourite food: Takoyaki
Favourite colour: Green
quick facts
Above-the-fold CSS is
extracted ﬁrst in order to
ensure a faster page load.
Below-the-fold CSS is deferred.

Simple ways of generating critical CSS (sitelocity)

Simple ways of generating Critical CSS (WP)

#SMX
Speed up resource
load times

1. Run a crawl to test if
compression is already in place
2. Choose a compression
algorithm (Brotli / GZIP)
3. Compress assets ahead of time
during the build process to
prevent delays and minimize
server overhead
Compress resources to improve
slow resource load times!
Compress Text Files

Compress Image Files
1. Compress images with existing
services or plugins (Smush,
TinyPNG)
2. Convert images into next gen
formats like WebP or JPEG
2000
3. Consider using an image CDN
to speed up delivery
Compress resources to improve
slow resource load times!

Preload important resources (like fonts)
Preload critical
assets like fonts,
above-the-fold
images, and critical
CSS & JS

Tip: Preload the content of linked pages on hover

#SMX
How to improve
First Input Delay

Serve what the user needs when they need it!
First Input
Delay

Chrome DevTools > Performance
Discover any
unnecessary long tasks

View “Bottom Up” to see a detailed breakdown

Find, assess, and clean up unused JS & CSS

Head to “Coverage” under “more tools” or run
command

Reload the page and see which scripts are not used
for ﬁrst load

Be careful! It’s always hard to see the full story.

● Downloads in the background at a
low priority
● Will not interrupt page rendering to
be executed
● Executes in a sequence before the
DOMContentLoaded event
● Use for JS resources that aren’t too
critical to the initial rendering, and
can be run later in the process
● Downloads in the background at a
low priority
● Can interrupt page rendering to be
executed
● Executes ASAP and in no particular
order
● Best for high priority resources that
should run as early as possible in the
loading process
Always use defer or async for scripts that are not
necessary for the critical path
defer async

Code-Splitting bundles into necessary chunks
Code splitting is a technique where, rather than loading your scripts as one big ﬁle, you break
it up into smaller parts and only load what's needed on that page. For projects with large
amounts of JavaScript, this can have a big improvement on performance.

#SMX
How to improve
Cumulative Layout
Shift

Web.dev live talk from Addy Osmani

DevTools > Performance > Experience

Include width and height size attributes on image and
video elements

Include width and height size attributes on image and
video elements - FIXED

● 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.
Handy tips for providing image dimensions
Polite Cat #1
Politest cats from all over the world. Who are they? Let’s ﬁnd 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 ﬁnd
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

Srcset helps deﬁne the best image for the viewport

Reserve sufﬁcient space for
Ads, Embeds & Dynamic Content

Reserve sufﬁcient space for
Ads, Embeds & Dynamic Content
Statically style slot DOM elements with the same sizes passed to your tag library. This can help ensure the
library doesn't introduce annoying layout shifts when it loads.
Polite Cat
sticker
you’ve ever seen.
read more
$2
Polite Cat
sticker
you’ve ever seen.
read more
$2
Polite Cat
sticker
$2
Polite Cat
sticker
Free shipping today

Web Font Flickers aka. FOUT / FOIT
(Flash of Unstyled / Invisible Text)

Web Font Flickers (FOUT / FOIT)

Ideally, preload key web fonts to try avoid the issue
Preload critical
assets like fonts,
above-the-fold
images, and critical
CSS & JS

#SMX
Become a Page Experience
advocate in your team!

#SMX
Let’s have a coffee and
chat about our CWV
optimization

You know you’ve achieved SEO greatness when:
I provide technical
recommendations that
are prioritized and clear
My client / boss
understands the
importance of SEO
My developers know who
I am and are happy
working with me
My opinions are trusted
by all stakeholders
My opinions are valued
by my client / boss.

#SMX
My technical
recommendations are
not prioritized or clear
My client / boss does
not understand the
importance of SEO
My developers don’t
know who I am! (My
devs don’t like me.)
My SEO opinions aren’t
trusted by colleagues
and stakeholders
Improve your Project
Management
● Understand the processes of
your developers and
command chain (Agile,
Scrum)
● Learn more about existing
projects and roadmaps
● Research into your existing
tech stack
● Look into how you can
better prioritize SEO issues
(using JIRA / Trello)
● Get to know your POs and
developers
● Host SEO education
workshops or lightning talks
Address the Expectation
Management
● Provide clear explanation of
SEO belongings, challenges,
and beneﬁts (conﬂuence,
quick meetings)
● Host SEO education
workshops that report hard
KPI improvements
● Before signing a client:
understand and document
their existing expectations &
challenges
● What existing CMS / tech
stack is the client using?
Understand if you need a
miracle with your time.
My work is not valued
within my department /
company

Evaluating the highest priorities of CWV Optimization
Low Effort
High Impact
Low Impact
High Effort
�� ⭐

Red colours scare stakeholders!

But before, you panic them, get your story straight.

Prioritizing Core Web Vital optimizations with Ryte

Focus on areas with a higher conversion possibility

Try to ﬁnd common structural / site-wide issues

Narrow down the culprits that can be optimized

Run a couple of URLs in Page Speed Insights

Conduct an audit and dig into some key opportunities

Derive some potential solutions based on your
investigation, but dig into own solutions too

Discuss your ﬁndings with devs to know their opinions
on the matter
If we just ordered and
delivered the critical CSS
we’d make everyone’s lives
a bit easier. I made a
suggestion here...
Good spot! We have this
blocker in place right now
but I’m sure we can come
up with a solution

See what processes the SEO can optimize too

Prepare your strategy and action-plan, with
prioritized ﬁxes

Keep everyone up-to-date on the business impact
revenue

First thing’s ﬁrst, let’s bulk analyze the website

Local /shop/ pages are performing badly

Not too much there.

Digging into a speciﬁc URL, there are tons of
render-blocking resources!

In the Performance tab, we can uncover the LCP at 4.7s

Of course, this large hero image is the culprit!

This photo has a transfer size of 5.3MB 😭

The image should be effectively resized and

Image CDN transformations could assist here

Mixed Content for HTTP Images

Same image issue again!

No need to have giant image resources here.

Main Thread has not been optimized

Google Maps scripts should be deferred

Lets take a look at /product/ pages!

Better, but still not great!

Again, there are the same render-blocking resources

Lazy-loading should be implemented

Another product pages gives us the same issue

Fixing this would impact a lot of pages ⚡

Let’s focus on /products/ again!

Already we can see the main culprit!

Do they need so many gifs?!

Tip: Use WebM videos with “gif-like” settings

Worth it!

Is it necessary?!

● Removed parallax effect from homepage
● Created new, lightweight logo
● Properly sized images with height and width
● Set-up correct aspect ratio for images
● Compressed images (using Smush) & converted GIFs to WebM
● Configured asset caching using W3 Total Cache
● Updated used plugins, and removed all unnecessary plugins
● Updated to newest version of PHP
● Created critical CSS file for each page
● Merged and minified necessary JS and CSS
● Made sure lazy loading was working fine
● Set key fonts to be preloaded
● Made sure images utilized srcset
● I developed a new love of page experience optimization!
My quick fixes of last weekend

My poor CLS has gotten a lot better :)

Further reading:
● https://web.dev/optimize-lcp/
● https://web.dev/optimize-ﬁd/
● https://web.dev/optimize-cls/
● https://www.onely.com/blog/what-is-ﬁrst-input-delay/
● https://www.youtube.com/watch?v=AQqFZ5t8uNc&feature=emb_title
● https://developers.google.com/web/fundamentals/performance/speed-tools
● https://css-tricks.com/aspect-ratio-boxes/
● https://defaced.dev/tools/layout-shift-gif-generator/
● https://en.ryte.com/product-insights/web-vitals

❏ Do your best to get up-to-scratch on Core Web Vitals technicalities
❏ Assess your website’s pages in bulk ﬁrst to ﬁnd commonalities and affected subfolders
❏ Get involved in conversations with your website POs and developers!
❏ Provide educated hypotheses as to what is impacting the Vital, and how you can work
together with development teams to improve that
❏ See whether you need to improve Project Management skills or address the Expectation
Management.
❏ If you can, test and play around with some principles on your own websites
My key learnings for you all

Business Success with Core Web Vitals

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Business Success with Core Web Vitals

Similaire à Business Success with Core Web Vitals (20)

Plus de Izzi Smith

Plus de Izzi Smith (10)

Dernier

Dernier (20)

Business Success with Core Web Vitals