CWV Workshop 1 Slides

Core Web Vitals
Publishers
Workshop
Part I
Feb 23rd 2022
Confidential + Proprietary
A few reminders
Ask questions Share feedback Core Web Vitals exercise
Use the blue “Ask a At the end of the event, At the end of the event,
question” button to you’ll see a feedback there will be provided an
submit questions. form appear and you’ll exercise on CWV that will
also receive an email, be reviewed and
share your feedback with discussed during the
us. second workshop.
Speakers
Dikla Cohen Tony Conway

Web Ecosystems Consultant Web Ecosystems Consultant
Agenda
Core Web Vitals Overview
Best Practices
Case Studies
Measuring CWV
Homework :D
Q&A
Core Web Vitals overview
Core Web Vitals
User-centric performance metrics
LCP CLS FID

Largest Contentful Paint Cumulative Layout Shift First Input Delay
NEEDS NEEDS NEEDS
GOOD POOR GOOD POOR GOOD POOR
IMPROVEMENT IMPROVEMENT IMPROVEMENT
2.5 sec 4.0 sec 0.1 0.25 100 ms 300 ms
To ensure you're hitting this target for most of your users, a good
threshold to measure is the 75th percentile of page loads,
segmented across mobile and desktop devices.
Quiz time
In which scenario will LCP stop being measured?
A. After 10 seconds
B. When the user interacts with the page
C. Once the main thread is free for 2 seconds
D. When the first image is loaded
Quiz time
In which scenario will LCP stop being measured?
A. After 10 seconds
B. When the user interacts with the page
C. Once the main thread is free for 2 seconds
D. When the first image is loaded
LCP
Largest Contentful Paint
NEEDS
GOOD POOR
IMPROVEMENT
2.5 sec 4 sec
Measures the render time of

the largest content element
(image or block of text) visible
within the viewport.
web.dev/lcp
Quiz time
When do layout shifts usually impact CLS more?
A. At the top of the page
B. In the middle of the page
C. At the bottom of the page
D. It doesn’t matter
Quiz time
When do layout shifts usually impact CLS more?
A. At the top of the page
B. In the middle of the page
C. At the bottom of the page
D. It doesn’t matter
CLS
Cumulative Layout Shift
NEEDS
GOOD POOR
IMPROVEMENT
0.1 0.25
Sum of the biggest cluster

of shifts
max 5 second session

window
web.dev/evolving-cls
FID
First Input Delay
NEEDS
GOOD POOR
IMPROVEMENT
100 ms 300 ms
Measures the time from when a

user first interacts with the page
until the time when the browser
is actually able to respond to
that interaction.
web.dev/fid
Quiz time
Google is working on new web vitals metrics
A. True
B. False
Quiz time
Google is working on new web vitals metrics
A. True
B. False
Possible new metrics:
Responsiveness and Smoothness
User perception of responsiveness
All users have experienced the frustration
trying to interact with a web page, whether
Is it responsive? through swipe, scroll, or tap, but nothing
happens for a while
contentbazaar.co/20160314/pi-way
In a study of user perception of mobile
touchscreen interactions, users'
Lorem ipsum dolor sit amet, consectetur perception of simultaneity between input
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut and response drops off steeply with delays
enim ad minim veniam, quis nostrud
exercitation ullamco
over 85ms
Similarly, users reported a steep drop in

interaction quality with visual delays
greater than 100ms
Towards a better responsiveness metric
● Captures Full Event Duration from

input event, through resultant calls up
to next frame paint
●
●
Measures interactions rather than
events, i.e. keydown > keyup > paint
Considers and aggregates all
BRM?
interactions on a page, not just the first
interaction Learn more and give feedback at:
web.dev/responsiveness
Accounting for smoothness
● Animations - including scrolling - can be

computationally expensive and slowed down by
other high-resource tasks.
● Dropped frames are an indicator of the browser Learn more and give feedback at:
being unable to display a smooth animation. web.dev/smoothness
● The Web Vitals team are seeking feedback on
tools and methodologies for measuring
percentage dropped frames.
Best Practices
What causes poor LCP?
Slow Server Render-blocking Slow Resource Load Client-side

Response Times JavaScript and CSS Times Rendering
web.dev/optimize-lcp Confidential + Proprietary

What causes poor CLS?
Images Without Ads, Embeds, Dynamically Injected Web Fonts Causing

Dimensions iFrames Without Content FOIT/FOUT
Dimensions
web.dev/optimize-cls Confidential + Proprietary
What causes poor FID?
Long Tasks Long JavaScript Large JavaScript Render-blocking

Execution Time Bundles JavaScript
web.dev/optimize-fid Confidential + Proprietary

CLS and Ads
● Reserve space
Max size with placeholder
Most likely size historically
Minimum is better than nothing
● Try to avoid placing ads near the top of

the viewport
Optimize CLS - Ads

Google Publisher Tag - Minimize CLS Confidential + Proprietary
Tag Managers
● Image tags ("pixels") are generally the

most performant, followed by custom
templates and then custom HTML tags
● Minimise amount of tags
● Loading scripts via tag manager
○ Custom Template and the

injectScript API
○ Non-essential only
Best Practices for Tags and Tag Managers

How Google improved ads performance with stale-while-revalidate Confidential + Proprietary
Case Studies
Improving CLS at Telegraph Media Group
> 250%
● Reserved ad space by using the 75th percentile CLS improvement
most common advert size
loaded in the slot
● Adding width and height

attributes to images
● YouTube videos - displaying

thumbnail while the video loads
“The improvements we've made so far were quite easy to

implement and have had a significant impact”
web.dev/telegraph Confidential + Proprietary

Netzwelt's Commitment to Core Web Vitals
18% increase in advertising revenues | 27% increase in page views | 74% ad viewability
CLS
● “Sticky” top ad
● Ads below the fold - lazy-loading and

reserved minimum space
● Different ad positions and lazy loading

strategies depending on scroll position and
network connection quality
web.dev/netzwelt Confidential + Proprietary

FID
● Reducing ad scripts and providers
● Loading all scripts with defer or async
● Using webpack or similar technologies for treeshaking and unbundling
● Using simple BEM-like CSS rules
● Avoiding long-running tasks and using the idle-until-urgent pattern
● Working with RequestAnimationFrame wherever layout is affected

LCP
● prioritized the above the fold hero images and fonts and optimized the
critical path to take precedence over advertising scripts and adverts
● Separated CSS for critical rendering path and put it in the header
● Preloaded the most important fonts, scripts, and images
● Avoided lazy-loading images above the fold
● Used font-display="swap"

Q&A
(we will also have one at the end)
Measuring CWV
Data - lab vs field
vs
Lab data Field data
Why Lab and Field Data Can Be Different Confidential + Proprietary

Before we begin
● Try to follow along, but don’t stress, we will share the deck
afterwards
● Going to go over using some Google tools, won’t cover all of them
● Always best to also measure yourself

○ More granular data
○ Measuring all the traffic
○ Option for custom metrics
○ Can correlate to business data
CrUX dashboard
Go to g.co/chromeuxdash
First-time users may need to complete
permission or marketing preference prompts
Enter origin URL

Use whichever origin users see in the URL bar
Click “Connect”
If your origin is not included in the CrUX
dataset, you may get an error message
Click “Create Report” x2
CrUX dashboard
PageSpeed Insights
Go to pagespeed.web.dev
Enter a URL
Click “Analyze”
Starting off with field data
● Mobile vs Desktop
● URL vs Origin
On origin, should be
similar to CrUX dashboard
PageSpeed Insights
Lab data
● Mobile vs Desktop
● Specific URL only
● Network throttling and
emulated device
● Different metrics vs field
● Opportunities + diagnostics
Quick Question
How surprised are you at the results?
1. Not at all
2. A little bit
3. Quite surprised
4. This is brand new information
Chrome DevTools
Open a page in Chrome

Preferably incognito
Go to DevTools
Mac: Command+Option+I
Other: Control+Shift+I
Go to the Network tab and disable

cache
Go to the Performance tab and click

the reload button
The record button is useful for

measuring beyond the initial load
Chrome DevTools
Chrome DevTools
Chrome DevTools
Chrome DevTools
Chrome DevTools
Let’s go back to the Network tab
Lighthouse in DevTools
Great for debugging locally
What's new in Chrome DevTools and Lighthouse 6.0

web.dev/vitals-tools
Tools That Measure Core Web Vitals
Overview of Google Performance Tools
Measures CWV by simulating page load in a lab environment and using
Lighthouse
proxy metrics when necessary (e.g. TBT instead of FID).
Reports page-level CWV measurements made by running Lighthouse

PageSpeed Insights (lab) as well pulling data from CrUX (field).
Exposes LCP in the Performance timeline as well as CLS and TBT when
Performance Timeline running a performance trace.
Provides an origin-level report for all CWV across country, device, and
CrUX connection type dimensions. Available via BigQuery and the CrUX API.
Reports page-level page experience measurements. CWV data is pulled

Google Search Console
from CrUX (field).
This extension measures the CWV, providing instant feedback on

Web Vitals Chrome Extension
loading, interactivity and layout shift metrics.
web.dev/vitals-tools
Tools That Measure Core Web Vitals (continued)
Overview of Google Performance Tools
Fold Lighthouse lab runs into your Continuous Integration workflow to
Lighthouse CI
prevent performance regressions.
A new Lighthouse API to measure performance and best practices

Lighthouse user flows throughout a user flow using Puppeteer.
A JS library you can integrate with your RUM tools to get a more granular
web-vitals.js JS understanding of your CWV performance.
Code snippets for gauging your performance against the proposed

Measure Responsiveness Responsiveness metric.
Chrome DevTools for understanding how your animations are

Measure Smoothness
performing.
Homework :D
Home Assignment
1. Measure your site’s current CWV performance

You can use the different tools we mentioned as well as any other tracking
tool you have available.
2. Identify opportunities to improve

Let the data guide you, it is impossible to know everything beforehand.
Understand where you can improve and start with the common quick wins.
3. Estimate potential improvement

Once an opportunity is identified, try to quickly check what the outcome may
be after fixing, e.g. locally replace ad with a fixed size image and assess.
Best Company LTD
www.example.com
Current Field Data Metrics | <data source>
LCP: CLS: FID: TTFB: FCP:
Top Opportunities
1. …
2. …
3. …
Estimated Improvements in metrics and/or other KPIs

● …
● …
Q&A
Thanks for joining us!

CWV Workshop 1 Slides

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CWV Workshop 1 Slides

Uploaded by

Copyright:

Available Formats

Core Web Vitals

Ask questions Share feedback Core Web Vitals exercise

Dikla Cohen Tony Conway

Core Web Vitals Overview

LCP CLS FID

2.5 sec 4.0 sec 0.1 0.25 100 ms 300 ms

In which scenario will LCP stop being measured?

B. When the user interacts with the page

C. Once the main thread is free for 2 seconds

D. When the first image is loaded

In which scenario will LCP stop being measured?

B. When the user interacts with the page

C. Once the main thread is free for 2 seconds

D. When the first image is loaded

2.5 sec 4 sec

Measures the render time of

When do layout shifts usually impact CLS more?

A. At the top of the page

B. In the middle of the page

C. At the bottom of the page

When do layout shifts usually impact CLS more?

A. At the top of the page

B. In the middle of the page

C. At the bottom of the page

Sum of the biggest cluster

max 5 second session

Measures the time from when a

Google is working on new web vitals metrics

Google is working on new web vitals metrics

Similarly, users reported a steep drop in

● Captures Full Event Duration from

● Animations - including scrolling - can be

Slow Server Render-blocking Slow Resource Load Client-side

web.dev/optimize-lcp Conﬁdential + Proprietary

Images Without Ads, Embeds, Dynamically Injected Web Fonts Causing

Long Tasks Long JavaScript Large JavaScript Render-blocking

web.dev/optimize-fid Conﬁdential + Proprietary

Max size with placeholder

Most likely size historically

Minimum is better than nothing

● Try to avoid placing ads near the top of

Optimize CLS - Ads

● Image tags ("pixels") are generally the

● Minimise amount of tags

● Loading scripts via tag manager

○ Custom Template and the

Best Practices for Tags and Tag Managers

● Adding width and height

● YouTube videos - displaying

“The improvements we've made so far were quite easy to

web.dev/telegraph Conﬁdential + Proprietary

● Ads below the fold - lazy-loading and

● Different ad positions and lazy loading

web.dev/netzwelt Conﬁdential + Proprietary

● Reducing ad scripts and providers

● Loading all scripts with defer or async

● Using webpack or similar technologies for treeshaking and unbundling

● Using simple BEM-like CSS rules

● Avoiding long-running tasks and using the idle-until-urgent pattern

● Working with RequestAnimationFrame wherever layout is affected

web.dev/netzwelt Conﬁdential + Proprietary

● Preloaded the most important fonts, scripts, and images

● Avoided lazy-loading images above the fold