How to Conduct a Core Web

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

2. 1
2
3
Benchmark
Investigate
Test
4 Prioritise

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

4. The Metrics

5. LCP
largest contentful paint
How long it takes
the main content
to become visible
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

6. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
via GTMetrix

7. FID
first input delay
How fast the page
responds to an
initial interaction
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

8. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

9. CLS
content layout shift
How stable the
page is during the
loading process
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

10. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

11. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
LCP FID CLS

12. Step 1

13. Benchmark

14. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Split site into
page templates

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

16. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Grab URLs for
each template

17. @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/

18. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Get the data

19. Manually

21. GT Metrix
TOOL
Save audits
✔

22. GT Metrix
TOOL
✔
Save audits
Compare against
competitors
✔

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

24. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

25. Google Lighthouse

26. Run via
Chrome
Lighthouse

27. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

28. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

29. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

30. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

31. WATCH OUT!
for

32. Browser
extensions

33. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

34. At Scale

35. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

36. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

37. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

38. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Record Metrics

39. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Add screenshots
to a slide

40. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

41. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Add details to
spreadsheet

42. @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/

43. WATCH OUT!
for

44. Missing FID
metric

45. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
???

46. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
✔ ✔
?
???

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

48. Calculates simulated
performance metrics
Lab Data

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

50. @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

51. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

52. ✔
Benchmarking

54. Step 2

55. Investigate

56. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
What is happening?

57. @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?)

58. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Speed

59. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Dig into
opportunities

60. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

61. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

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

64. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
3 Questions

65. Questions
?
How many resources
are loading?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

66. 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

67. 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

68. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

70. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

71. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

72. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

73. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

74. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

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

76. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

77. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

78. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

79. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
TRACK ALL THE THINGS!!

80. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Remove the
removable

81. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
3 Questions

82. Questions
? Is it essential?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

83. Questions
? Is it essential?
Does it need to be on
this page?
?
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

84. 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

85. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

86. Chat
Bots
Google
Maps
Social
Feeds
Heat
Maps

87. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Delay the
delayable

88. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
<script src="" defer>
Scripts

89. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
<img src="" loading="lazy">
Images

90. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Restructure the
restructable

91. 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

92. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Compress the
compressible

93. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

94. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Cloudinary - https://webspeedtest.cloudinary.com/

95. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Cloudinary - https://webspeedtest.cloudinary.com/

96. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
CLS

97. 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

98. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
<img
src="hero_image.jpg"
alt="" width="500"
height="500">

99. @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/

100. 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

101. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

102. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

103. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

104. ✔
Investigate

106. Step 3

107. Test, Test, Test

108. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
VALUE
VALUE

109. Google Lighthouse

110. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

111. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

112. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

113. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

114. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

115. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Before After

116. ✔
Test, Test, Test

118. Step 4
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

119. Prioritise

120. WATCH OUT!
for
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

121. Doesn’t move
the needle

122. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

123. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

124. @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

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

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

127. @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

128. @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
✖

129. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Think about
scale 🍅

130. @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

131. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

132. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Prioritise via Page Template

133. @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

134. @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

135. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
T-Shirt Sizes

136. ✔
Prioritise

137. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
CELEBRATE GIF

138. WATCH OUT!
for
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

139. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

140. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

141. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

142. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

145. @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

146. CONTACT:
_
@sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit
Sophie Gibson
StudioHawk
sophie@studiohawk.co.uk
Twitter @SophieGibson
Thanks!

147. 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/

148. 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/