Media, fonts & Core Web Vitals

Media and fonts often dominate user-perceived performance. A page can have clean JavaScript and still feel slow if the LCP image is discovered late, fonts reflow text, or layout shifts when media dimensions arrive.

Core details

Metric / area	What it means	Common cause
LCP	Largest above-the-fold content becomes visible	late hero image, slow TTFB, render-blocking CSS/JS
CLS	Unexpected layout movement	missing image dimensions, font swap, injected banners
INP	Interaction responsiveness	long tasks, heavy handlers, render/layout after input
Images	bytes, dimensions, decoding, priority	oversized image or lazy-loaded hero
Fonts	loading, fallback metrics, subsets	FOIT/FOUT and text reflow
SEO metadata	title, description, canonical, Open Graph, structured data	incorrect route metadata or client-only content

Image rules: provide width/height or aspect ratio, serve responsive sizes, compress correctly, avoid lazy-loading the LCP image, and use priority/fetch hints only for the true critical asset.

Font rules: subset fonts, preload only critical font files, use font-display deliberately, and choose fallback metrics close enough to avoid large text shifts.

Lazy loading: lazy-load below-the-fold images and heavy embeds. Do not lazy-load content the user must see immediately.

Measurement: use field data for real user impact and lab traces for reproducible diagnosis. A Lighthouse number alone is not the source of truth.

Understanding

Core Web Vitals are symptoms, not instructions. Poor LCP may be network, server, HTML discovery, CSS blocking, image bytes, or client hydration. Poor CLS may be a missing size attribute, a late font, an ad slot, a consent banner, or a suspense fallback. Poor INP may be JavaScript, layout, paint, or a slow state update.

Media optimization is mostly about discovery and constraints. The browser needs to know early which resource matters and how much space it will occupy. Without dimensions, the browser guesses. Without correct priority, it may download less important resources first.

SEO and social sharing also depend on server-visible content and metadata. If product-critical content is only rendered after client JavaScript, crawlers and preview bots may see an empty or incomplete page depending on their capabilities.

Practical examples

Reserve image space:

<img
  src="/hero-1280.webp"
  srcSet="/hero-640.webp 640w, /hero-1280.webp 1280w"
  sizes="(max-width: 768px) 100vw, 1280px"
  width="1280"
  height="720"
  alt="Dashboard showing campaign performance"
/>

Font strategy:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-display: swap;
}

Performance triage:

Symptom	First checks
LCP image late	HTML discovery, preload/priority, CDN, dimensions, image format
CLS after load	media dimensions, font swap, banners, streamed fallbacks
INP high	long tasks, event handlers, render size, layout after input
SEO preview wrong	server metadata, canonical URL, OG image, noindex, structured data

Senior understanding

Probe	Strong answer
“Should we preload?”	Only for proven critical resources; wrong preload steals bandwidth
“Use web fonts?”	Balance brand, subset size, fallback metrics, and privacy/performance
“Lazy-load all images?”	Not the LCP image or immediately visible content
“Metric improved in lab only?”	Compare field percentiles, device/network mix, and release cohort

Failure modes

Lazy-loading the hero image.
Omitting width/height or aspect ratio for images, ads, embeds, or suspense fallbacks.
Preloading too many fonts and blocking useful resources.
Optimizing homepage vitals while authenticated product routes regress.
Treating SEO metadata as static when routes are dynamic or canonicalized.

Diagram

Loading diagram…