· Digital Estate Media · SEO · 6 min read
Core Web Vitals Checklist for Canadian Businesses (2026)
A pragmatic Core Web Vitals checklist for Canadian business websites — LCP, INP, CLS thresholds, the fixes that matter, and the diagnostic workflow we run on every audit.
Core Web Vitals became ranking factors in 2021 and the metrics have kept evolving since. In March 2024 INP replaced First Input Delay, and in 2025 Google started weighting CrUX field data more heavily than lab scores. Here’s the pragmatic checklist we run on every performance engagement — thresholds, fixes, and the diagnostic workflow.
If you’re a Canadian business with most of your traffic on Canadian networks and devices, your baseline is usually better than a global average — but the thresholds are identical. Here’s what “good” actually looks like and how to ship it.
The three metrics and their thresholds
| Metric | Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | When the largest above-the-fold element finishes rendering | ≤ 2.5s | 2.5s – 4s | > 4s |
| INP (Interaction to Next Paint) | Longest delay between an interaction and visual update | ≤ 200ms | 200–500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Unexpected visual shift during load | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Pass thresholds are based on p75 field data from real Chrome users over 28 days — not a single Lighthouse run. This is the detail most teams miss: a perfect Lighthouse lab score doesn’t matter if your CrUX p75 is poor.
For definitions and why these metrics replaced older ones, see the glossary entries for LCP, INP, and CLS.
LCP: the fixes that matter
1. Identify the LCP element
Run Lighthouse on the page. In the report, find “Largest Contentful Paint element.” Usually it’s the hero image, main headline, or the hero product card.
2. Serve the LCP image at the right size
Hero images should be served as AVIF or WebP with proper srcset and sizes attributes. Don’t ship a 2MB JPEG when a 180KB WebP renders identically.
3. Preload the LCP image
Add <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> in the <head>. This single line can shave 300–800ms off LCP on mobile.
4. Fix render-blocking resources
Render-blocking CSS and scripts in the <head> delay LCP. Inline critical CSS if the page isn’t using a CMS; defer non-critical JavaScript with defer or async.
5. Use a CDN close to your users
If your hosting is in us-west-2 and your users are in Toronto, you’re eating 80–120ms of latency per request. Any modern CDN (Fastly, Cloudflare, Vercel Edge) mitigates this.
6. Preload fonts
Self-hosted fonts (via @fontsource or next/font or similar) should be preloaded for the weights used in the LCP element. Otherwise the browser discovers them late, causing FOUT and potentially moving LCP detection.
INP: the fixes that matter
INP measures responsiveness to taps/clicks/keystrokes. Most sites pass LCP but fail INP.
1. Audit long tasks
In Chrome DevTools Performance tab, record an interaction (button click, form submit, menu open) and look for tasks longer than 50ms on the main thread. These are your culprits.
2. Break up long synchronous work
The #1 INP killer is heavy JavaScript running on interaction. Break long functions into smaller chunks with scheduler.yield() or setTimeout(..., 0) so the browser can paint between chunks.
3. Defer third-party scripts
Analytics, chat widgets, heatmap tools, ad pixels — all contribute to INP. Load them after page interaction rather than at parse time. Use <script async>, dynamic imports on first interaction, or Partytown for third parties that must run.
4. Minimize React / Vue re-renders
On SPA sites, INP is often caused by component re-renders cascading through the tree. Use memo, useMemo, and virtualize long lists.
5. Use CSS content-visibility: auto
Offscreen sections that render eagerly cost INP on interactions above them. content-visibility: auto tells the browser to skip rendering offscreen content until it’s near viewport.
CLS: the fixes that matter
CLS is the easiest metric to nail perfectly (get to 0.000) and the easiest to break inadvertently.
1. Always set width and height on images
Without explicit dimensions, the browser reserves no space, loads the image, and then pushes everything below down. Always include both:
<img src="hero.jpg" width="1200" height="675" alt="..." />2. Reserve layout space for late-loading elements
Banner ads, Instagram feeds, video embeds, dynamically loaded content — all need explicit min-height or aspect-ratio CSS to prevent shift on arrival.
3. Preload or font-display: optional your web fonts
Font swap (FOUT) causes text reflow, pushing everything below the heading down. Either preload the woff2 file or use font-display: optional to let fallback fonts stick if the web font doesn’t arrive in time.
4. Avoid animations on layout-affecting properties
height, top, left, margin — all trigger layout shift. Use transform (translateX, translateY, scale) and opacity for animations instead; these don’t cause CLS.
5. Test on throttled mobile
CLS behaviour differs dramatically between desktop and throttled mobile (which is what CrUX p75 measures). If you test on your laptop you’ll miss 80% of real-world CLS issues.
The diagnostic workflow
We run this workflow on every performance audit:
- Measure in the lab:
npx lighthouse <url> --form-factor=mobile --view. Gives you a detailed snapshot. - Measure in the field: PageSpeed Insights (includes CrUX field data) for the last 28 days.
- Compare lab vs field. If lab is good and field is poor, the issue is with real devices/networks — the lab results aren’t representative.
- Identify the bottleneck metric. LCP is almost always about images, fonts, or server response. INP is almost always JavaScript. CLS is almost always fonts, images, or animated elements.
- Ship one fix at a time. Measure before and after. Don’t batch — if three fixes ship together and LCP gets worse, you won’t know which one caused it.
Common failure modes we see on Canadian business sites
- Massive hero videos on the homepage. A 10MB autoplay video is the LCP killer of a generation. If you need a video hero, use a compressed poster image for initial render and stream the video in lazy.
- Third-party chat widgets loaded at page parse. Intercom, Drift, Tidio all add 200–800ms to INP when loaded at parse time. Defer until user interaction.
- Google Fonts via
<link>tags without preconnect. Self-host with@fontsource(or equivalent) instead. Google Fonts CDN adds two round trips per font load. - Shopify apps with heavy JavaScript. Every installed app runs on every page load unless explicitly excluded. Review quarterly; remove anything unused.
- Animations on
.intersect-oncescroll reveals. If the animation usestransform, fine. If it usesheight,margin, oropacitywith position shifts, CLS suffers.
Checklist
Before declaring a page “performant”:
- LCP ≤ 2.5s on mobile (CrUX p75, not just lab)
- INP ≤ 200ms on mobile
- CLS ≤ 0.1 on both mobile and desktop
- LCP image preloaded with
fetchpriority="high" - Fonts preloaded or
font-display: optional - All
<img>havewidthandheightattributes - Third-party scripts deferred or loaded on interaction
- CDN serving cached assets
- Measured in production, not just local dev
The payoff
Passing Core Web Vitals matters in two ways: Google uses them as a light ranking signal (more important than people realize in competitive markets), and users who experience a fast site convert 7–18% better than users on a slow one. The SEO lift compounds; the conversion lift is immediate.
For broader SEO context, Core Web Vitals are one leg of three — performance, content, and authority. The other two are covered in SEO vs AEO vs GEO: What Your Business Actually Needs in 2026 and SEO in the Age of AI: What Changed and What Still Works.
If you want us to run a full CWV audit on your site (lab + field data, fix recommendations, implementation support), that’s part of our AI SEO service.
