How to conduct a Core
Web Vitals audit
slideshare.net/sophiegibson3
@sophiegibson
Sophie Gibson
StudioHawk
Slide 2
Slide 2 text
1
2
3
Benchmark
Investigate
Test
4 Prioritise
Slide 3
Slide 3 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
What does it measure?
Slide 4
Slide 4 text
The Metrics
Slide 5
Slide 5 text
LCP
largest contentful paint
How long it takes
the main content
to become visible
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 6
Slide 6 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
via GTMetrix
Slide 7
Slide 7 text
FID
first input delay
How fast the page
responds to an
initial interaction
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 8
Slide 8 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 9
Slide 9 text
CLS
content layout shift
How stable the
page is during the
loading process
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 10
Slide 10 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 11
Slide 11 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
LCP FID CLS
Slide 12
Slide 12 text
Step 1
Slide 13
Slide 13 text
Benchmark
Slide 14
Slide 14 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Split site into
page templates
Slide 15
Slide 15 text
→
→
→
Homepage
Product
Page
Category
Page
Blog post
Blog hub page
Landing
pages
→
→
→
Slide 16
Slide 16 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Grab URLs for
each template
Slide 17
Slide 17 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Page Group Example URL
Product Page https://example.com/products/sparkle-skirt
Category Page https://example.com/category/womens-skirts
Homepage https://example.com/
Slide 18
Slide 18 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Get the data
Slide 19
Slide 19 text
Manually
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
GT Metrix
TOOL
Save audits
✔
Slide 22
Slide 22 text
GT Metrix
TOOL
✔
Save audits
Compare against
competitors
✔
Slide 23
Slide 23 text
GT Metrix
TOOL
✔
✔
Save audits
Compare against
competitors
Clear CWV metrics
✔
Slide 24
Slide 24 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 25
Slide 25 text
Google Lighthouse
Slide 26
Slide 26 text
Run via
Chrome
Lighthouse
Slide 27
Slide 27 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 28
Slide 28 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 29
Slide 29 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 30
Slide 30 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 31
Slide 31 text
WATCH OUT!
for
Slide 32
Slide 32 text
Browser
extensions
Slide 33
Slide 33 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 34
Slide 34 text
At Scale
Slide 35
Slide 35 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 36
Slide 36 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 37
Slide 37 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 38
Slide 38 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Record Metrics
Slide 39
Slide 39 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Add screenshots
to a slide
Slide 40
Slide 40 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 41
Slide 41 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Add details to
spreadsheet
Slide 42
Slide 42 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Page Group Example URL
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/
Slide 43
Slide 43 text
WATCH OUT!
for
Slide 44
Slide 44 text
Missing FID
metric
Slide 45
Slide 45 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
???
Slide 46
Slide 46 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
✔ ✔
?
???
Slide 47
Slide 47 text
FID requires a real
user and cannot be
measured in lab data
web.dev/fid/
Slide 48
Slide 48 text
Calculates simulated
performance metrics
Lab Data
Slide 49
Slide 49 text
Total Blocking Time
(TBT) metric is
lab-measurable,
correlates well with FID
web.dev/fid/
Slide 50
Slide 50 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Page Group Example URL
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
Slide 51
Slide 51 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 52
Slide 52 text
✔
Benchmarking
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Step 2
Slide 55
Slide 55 text
Investigate
Slide 56
Slide 56 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
What is happening?
Slide 57
Slide 57 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Tool: Web Page Test
Why do we use it?
*what’s your purpose, tell me whats your purpose*
(is whats your flavour too niche a reference?)
Slide 58
Slide 58 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Speed
Slide 59
Slide 59 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Dig into
opportunities
Slide 60
Slide 60 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 61
Slide 61 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 62
Slide 62 text
Critical
requests?
Render
blocking?
Network
payloads?
Main
thread
tasks?
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
3 Questions
Slide 65
Slide 65 text
Questions
? How many resources
are loading?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 66
Slide 66 text
Questions
?
What resources on the
site are large in size?
?
How many resources
are loading?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 67
Slide 67 text
Questions
?
What resources on the
site are large in size?
?
What is stopping the
page from loading?
?
How many resources
are loading?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 68
Slide 68 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 71
Slide 71 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 72
Slide 72 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 73
Slide 73 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 74
Slide 74 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 75
Slide 75 text
The is the
biggest single
render-blocking part
of a page
Harry Roberts
Slide 76
Slide 76 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 77
Slide 77 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 78
Slide 78 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 79
Slide 79 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
TRACK ALL THE THINGS!!
Slide 80
Slide 80 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Remove the
removable
Slide 81
Slide 81 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
3 Questions
Slide 82
Slide 82 text
Questions
? Is it essential?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 83
Slide 83 text
Questions
? Is it essential?
Does it need to be on
this page?
?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 84
Slide 84 text
Questions
?
Do we need to track this
right now?
Is it essential?
Does it need to be on
this page?
?
?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 85
Slide 85 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 86
Slide 86 text
Chat
Bots
Google
Maps
Social
Feeds
Heat
Maps
Slide 87
Slide 87 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Delay the
delayable
Slide 88
Slide 88 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Scripts
Slide 89
Slide 89 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Images
Slide 90
Slide 90 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Restructure the
restructable
Slide 91
Slide 91 text
1.
2.
3.
4. preconnect
5.
6. CSS that includes @import
7. Synchronous JS
8. Synchronous CSS
9. preload
10.
11. prefetch / prerender
12. Everything else (icons, Open Graph, etc.)
13.
Harry Roberts @csswizardry
Slide 92
Slide 92 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Compress the
compressible
Slide 93
Slide 93 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 94
Slide 94 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Cloudinary - https://webspeedtest.cloudinary.com/
Slide 95
Slide 95 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Cloudinary - https://webspeedtest.cloudinary.com/
Slide 96
Slide 96 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
CLS
Slide 97
Slide 97 text
CLS
Common Culprits
↠ Images without dimensions
↠
↠
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Ads, video, embeds, and
iframes without dimensions
Dynamically
injected content
Slide 98
Slide 98 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 99
Slide 99 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Barry Pollard Smashing Magazine
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
Slide 100
Slide 100 text
CLS Gif Generator
TOOL
↠
https:/
/defaced.dev/
tools/layout-shift-gif-generator/
Chris Johnson
↠
↠
twitter.com/defaced
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 101
Slide 101 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 102
Slide 102 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 103
Slide 103 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 104
Slide 104 text
✔
Investigate
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
Step 3
Slide 107
Slide 107 text
Test, Test, Test
Slide 108
Slide 108 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
VALUE
VALUE
Slide 109
Slide 109 text
Google Lighthouse
Slide 110
Slide 110 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 111
Slide 111 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 112
Slide 112 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 113
Slide 113 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 114
Slide 114 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 115
Slide 115 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Before After
Slide 116
Slide 116 text
✔
Test, Test, Test
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Step 4
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 119
Slide 119 text
Prioritise
Slide 120
Slide 120 text
WATCH OUT!
for
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 121
Slide 121 text
Doesn’t move
the needle
Slide 122
Slide 122 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 123
Slide 123 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 124
Slide 124 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Difficulty Matrix
Time / Resource
Task Complexity
Low Time High Time
Low Complexity
High Complexity
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 125
Slide 125 text
Direct Control
→
→
Images
Marketing scripts
Code in GTM
→
Lower Resource
Slide 126
Slide 126 text
Dev Support
→
→
HTML changes
Hardcoded scripts
Removing dependencies
→
Higher Resource
Slide 127
Slide 127 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Difficulty 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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 128
Slide 128 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Difficulty 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
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
✖
Slide 129
Slide 129 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Think about
scale 🍅
Slide 130
Slide 130 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Impact across site
Small %
of pages
Whole site
impact
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 131
Slide 131 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 132
Slide 132 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Prioritise via Page Template
Slide 133
Slide 133 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Potential Impact Ease
PIE
Score
How big of a
improvement does
this change make
when fixed?
Use the test results
How big will the
impact of this
change have across
the template / page
group
How complex is this
fix to do?
What resource will be
needed to action the
change?
X/30
PIE Framework
Slide 134
Slide 134 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
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
Slide 135
Slide 135 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
T-Shirt Sizes
Slide 136
Slide 136 text
✔
Prioritise
Slide 137
Slide 137 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
CELEBRATE GIF
Slide 138
Slide 138 text
WATCH OUT!
for
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 139
Slide 139 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 140
Slide 140 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 141
Slide 141 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 142
Slide 142 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Slide 146
Slide 146 text
CONTACT:
_
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Sophie Gibson
StudioHawk
[email protected]
Twitter @SophieGibson
Thanks!
Slide 147
Slide 147 text
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/
Slide 148
Slide 148 text
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/