How we passed Core Web Vitals — outline
This is a collection of posts about how we passed Google’s Core Web Vitals.
check out how we’re doing today
- Go to https://developers.google.com/speed/pagespeed/insights/?url=vinterior.co
- Click on Show Origin Summary
- It should say “Over the previous 28-day collection period, the aggregate experience of all pages served from this origin passes the Core Web Vitals assessment” — if not we’ve screwed it up since writing this post!
Getting started
How we passed Core Web Vitals — our favourite resources
Things that helped us pass our Core Web Vitals assessment
Fixing things
LCP
How we identify our LCP (Largest Contentful Paint) element and get quick feedback
How we passed Core Web Vitals — LCP — preloading images
How we passed Core Web Vitals — LCP — Server Side Rendering React
How we passed our Core Web Vitals — LCP — Skip Server Side rendering for bots
How we passed our Core Web Vitals — LCP — Fragment Caching our Server Side Rendered React (SSR)
CLS
How to identify your CLS (Cumulative Layout Shift) problem elements
How we passed our Core Web Vitals — CLS — show/hide cookie banner on server
Setting height on server side rendered carousel (to be written)
Fixing CLS on our PLP so many heights to add (to be written)
The curious case of the high CLS when LayoutShift has no shift?
FID
Bizarre FID case where changing CSS property reduce FID (to be written)
Data tracking
Core Web Vitals — data sources we used
Why we used field data instead of lab data to guide our Core Web Vitals improvements
How we get around data sampling issues in Google Analytics without spending 150k
How we measure Core Web Vitals ourselves with Real User Metrics (field data)
How we measure Core Web Vitals Part two — starting in the browser with web-vitals library and the
Measuring our Core Web Vitals — GTM(Google Tag Manager)
How we measure our Core Web Vitals — Google Sheets
How we measure our Core Web Vitals — adding a p75 time series chart in DataStudio
How we measure our Core Web Vitals — DataStudio making the experience breakdown pie chart
How we measure Core Web Vitals — WOW comparison in DataStudio
