LCP Optimization
Ship a sub‑2.5s Largest Contentful Paint on every page without sacrificing the Meridian visual identity.
What is LCP?
Largest Contentful Paint measures when the largest visible element — hero image, heading block, or background video — finishes rendering. Google uses it as a Core Web Vital ranking signal.
Step 1 — Preload the hero resource
Add a link rel="preload" tag in your root layout head for the largest above‑the‑fold image or font. This kicks off the fetch before the CSSOM is ready.
Step 2 — Inline critical CSS
Extract the styles required for the first viewport height and inline them in a <style> tag. Defer the full Tailwind build with media="print" + onload swap.
Step 3 — Avoid layout shifts
Reserve space for every above‑the‑fold asset with explicit width/height or aspect-ratio. CLS and LCP share a render pipeline — a late‑loading font that shifts text will also delay the paint milestone.
Step 4 — Server‑side render the hero
Keep the LCP element inside the initial HTML payload. Do not hydrate it client‑side behind a spinner or skeleton. Meridian pages are static by default — leverage that.
Pro tip
Run npx lighthouse in CI with a "LCP < 2500ms" assertion. Regressions caught before merge never reach production.