How to Conduct a Core Web Vitals Audit - BrightonSEO October 2022

Slide 1

Slide 1 text

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 ﬁrst 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/ﬁd/

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/ﬁd/

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 ﬂavour 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 Difﬁculty 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 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 @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

Slide 128

Slide 128 text

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 ﬁ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

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 sophie@studiohawk.co.uk 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/