LCP: Largest Contentful Paint
LCP measures how fast the largest visible element loads. The biggest culprits in Toronto are oversized hero images, render-blocking JavaScript, slow server response times, and unoptimized web fonts.
Quick wins: serve hero images in WebP/AVIF, use fetchpriority='high' on the LCP image, preconnect to font CDNs, and move to a fast Canadian-edge host or CDN (Cloudflare, Vercel, Fastly).
INP: Interaction to Next Paint
INP replaced FID in 2024 and measures responsiveness to every user interaction (taps, clicks, key presses). Heavy JavaScript on page load is the usual offender, especially analytics, chat widgets, and third-party scripts that block the main thread.
Quick wins: defer non-critical scripts, replace heavy chat widgets with a load-on-interaction pattern, audit Google Tag Manager for legacy tags, and split large JS bundles by route.
CLS: Cumulative Layout Shift
CLS measures unexpected layout movement during page load. Common causes: images without explicit width/height, ads loading without reserved space, web fonts swapping (FOIT/FOUT), and dynamically inserted content above existing content.
Quick wins: add width/height attributes to every image, reserve ad slot space with CSS, use font-display: optional or swap with size-adjust, and never inject content above the fold after initial render.