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

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?

The Metrics

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

via GTMetrix

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

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

LCP FID CLS

Step 1

Benchmark

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

Manually

GT Metrix TOOL Save audits ✔

GT Metrix TOOL ✔ Save audits Compare against competitors ✔

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

Google Lighthouse

Run via Chrome Lighthouse

WATCH OUT! for

Browser extensions

At Scale

Record Metrics

Add screenshots to a slide

Add details to spreadsheet

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/

WATCH OUT! for

Missing FID metric

???

✔ ✔ ? ???

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/

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

✔ Benchmarking

Step 2

Investigate

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? @sophiegibson #BrightonSEO How
to Conduct a Core Web Vitals Audit

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

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

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

TRACK ALL THE THINGS!!

Remove the removable

3 Questions

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

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

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

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 ↠ ↠ @sophiegibson
#BrightonSEO How to Conduct a Core Web Vitals Audit 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 @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

✔ Investigate

Step 3

Test, Test, Test

VALUE VALUE

Google Lighthouse

Before After

✔ Test, Test, Test

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

Prioritise

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

Doesn’t move the needle

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

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

Think about scale 🍅

Impact across site Small % of pages Whole site impact @sophiegibson #BrightonSEO How to Conduct a Core Web Vitals Audit

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

✔ Prioritise

CELEBRATE GIF

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

CONTACT: _ @sophiegibson #BrightonSEO How to Conduct a Core Web
Vitals Audit Sophie Gibson StudioHawk [email protected] 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/

How to Conduct a Core Web Vitals Audit - Bright...

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

More Decks by Sophie Gibson

Other Decks in Marketing & SEO

Featured

Transcript