Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

How to conduct a Core
Web Vitals audit
slideshare.net/sophiegibson3
@sophiegibson
Sophie Gibson
StudioHawk

1
2
3
Benchmark
Investigate
Test
4 Prioritise

@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
What does it measure?

LCP
largest contentful paint
How long it takes
the main content
to become visible

via GTMetrix

FID
ﬁrst input delay
How fast the page
responds to an
initial interaction

CLS
content layout shift
How stable the
page is during the
loading process

LCP FID CLS

Split site into
page templates

→
→
→
Homepage
Product
Page
Category
Page
Blog post
Blog hub page
Landing
pages
→
→
→

Grab URLs for
each template

Page Group Example URL
Product Page https://example.com/products/sparkle-skirt
Category Page https://example.com/category/womens-skirts
Homepage https://example.com/

Get the data

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

GT Metrix
TOOL
Save audits
✔

GT Metrix
TOOL
✔
Save audits
Compare against
competitors
✔

GT Metrix
TOOL
✔
✔
Save audits
Compare against
competitors
Clear CWV metrics
✔

Record Metrics

Add screenshots
to a slide

Add details to
spreadsheet

LCP
Benchmark
CLS
Benchmark
FID
Benchmark
Product Page
https://example.com/prod
ucts/sparkle-skirt
Category
Page
https://example.com/categ
ory/womens-skirts
Homepage https://example.com/

???

✔ ✔
?
???

FID requires a real
user and cannot be
measured in lab data
web.dev/ﬁd/

Calculates simulated
performance metrics
Lab Data

Total Blocking Time
(TBT) metric is
lab-measurable,
correlates well with FID
web.dev/ﬁd/

LCP (s)
Benchmark
CLS
Benchmark
FID/TBT (s)
Benchmark
Product Page
https://example.com/prod
ucts/sparkle-skirt
3.2 0.5 2.3
Category
Page
https://example.com/categ
ory/womens-skirts
5.4 0.26 4.3
Homepage https://example.com/ 2.7 0.27 2.7

What is happening?

Tool: Web Page Test
Why do we use it?
*what’s your purpose, tell me whats your purpose*
(is whats your ﬂavour too niche a reference?)

Speed

Dig into
opportunities

Critical
requests?
Render
blocking?
Network
payloads?
Main
thread
tasks?

3 Questions

Questions
?
How many resources
are loading?

Questions
?
What resources on the
site are large in size?
?
How many resources
are loading?

Questions
?
What resources on the
site are large in size?
?
What is stopping the
page from loading?
?
How many resources
are loading?

The <head> is the
biggest single
render-blocking part
of a page
Harry Roberts

TRACK ALL THE THINGS!!

Remove the
removable

Questions
? Is it essential?

Questions
? Is it essential?
Does it need to be on
this page?
?

Questions
?
Do we need to track this
right now?
Is it essential?
Does it need to be on
this page?
?
?

Chat
Bots
Google
Maps
Social
Feeds
Heat
Maps

Delay the
delayable

<img src="" loading="lazy">
Images

Restructure the
restructable

1. <head>
2. <meta charset|http-equiv|viewport|robots/>
3. <title><meta desc>
4. preconnect
5. <script src="" async></script>
6. CSS that includes @import
7. Synchronous JS
8. Synchronous CSS
9. preload
10. <script src="" defer></script>
11. prefetch / prerender
12. Everything else (icons, Open Graph, etc.)
13. </head>
Harry Roberts @csswizardry

Compress the
compressible

Cloudinary - https://webspeedtest.cloudinary.com/

CLS

CLS
Common Culprits
↠ Images without dimensions
↠
↠
Ads, video, embeds, and
iframes without dimensions
Dynamically
injected content

Barry Pollard Smashing Magazine
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

CLS Gif Generator
TOOL
↠
https:/
/defaced.dev/
tools/layout-shift-gif-generator/
Chris Johnson
↠
↠
twitter.com/defaced

VALUE
VALUE

Before After

Step 4

WATCH OUT!
for

Difﬁculty Matrix
Time / Resource
Task Complexity
Low Time High Time
Low Complexity
High Complexity

Direct Control
→
→
Images
Marketing scripts
Code in GTM
→
Lower Resource

Dev Support
→
→
HTML changes
Hardcoded scripts
Removing dependencies
→
Higher Resource

Difﬁculty Matrix
Direct Control
Low Time / High Complexity
- Requires your expert
knowledge or a tool set-up
- Larger scale / sitewide impact
Dev Support
High Time / High Complexity
- Needs multiple sprints
- More complex changes
- Sitewide / large scale impact
Direct Control
Low Time / Low Complexity
- Client able to action
- Small scale / single page
impact
Dev Support
High Time / Low Complexity
- Larger in scale
- Template level tweaks
- Single line code changes

Difﬁculty Matrix
Direct Control
Low Time / High Complexity
- Requires your expert
knowledge or a tool set-up
- Larger scale / sitewide impact
Dev Support
High Time / High Complexity
- Needs multiple sprints
- More complex changes
- Sitewide / large scale impact
Direct Control
Low Time / Low Complexity
- Client able to action
- Small scale / single page
impact
Dev Support
High Time / Low Complexity
- Larger in scale
- Template level tweaks
- Single line code changes
✖

Think about
scale 🍅

Impact across site
Small %
of pages
Whole site
impact

Prioritise via Page Template

Potential Impact Ease
PIE
Score
How big of a
improvement does
this change make
when ﬁxed?
Use the test results
How big will the
impact of this
change have across
the template / page
group
How complex is this
ﬁx to do?
What resource will be
needed to action the
change?
X/30
PIE Framework

Page Group Task Potential Impact Ease PIE Score
Product Page Action to take 7 8 5 20
Category Page Action to take 4 6 7 17
PIE Framework

T-Shirt Sizes

CELEBRATE GIF

CONTACT:
_
Sophie Gibson
StudioHawk
sophie@studiohawk.co.uk
Twitter @SophieGibson
Thanks!

Tools
↠ GT Metrix https:/
/gtmetrix.com/
↠ Web Page Test https:/
/www.webpagetest.org/
↠ PageSpeed Compare https:/
/pagespeed.compare
↠ Chris Johnson - CLS Gif Generator
https:/
/defaced.dev/
tools/layout-shift-gif-generator/
↠ Cloudinary Image Analysis
https://webspeedtest.cloudinary.co
m/

Resources
↠ Harry Roberts - Get Your Head Straight
@csswizardry
https:/
/www.youtube.com/watch?
v=MHyAOZ45vnU
↠ Jess Peck - Almost Complete CLS Guide
@jessthebp
https:/
/jessbpeck.com/posts/com
pletecls/
↠ Barry Pollard - Smashing Magazine
@tunetheweb
https:/
/www.smashingmagazine.c
om/2020/03/setting-height-width
-images-important-again/
↠ Itamar Blauer - Image SEO Guide
@ItamarBlauer
https:/
/www.itamarblauer.com/im
age-seo-guide/
↠ Oliver Mason - 0 CLS, Please Improve
CLS @ohgm
https:/
/ohgm.co.uk/zero-cumulati
ve-layout-shift-please-improve-cu
mulative-layout-shift/

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf

Similar to Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf(20)

Recently uploaded

Recently uploaded(20)

Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf