Performance
Core Web Vitals for Astro: practical fixes that stick
Real-world tactics to improve LCP, CLS, and INP on static-first sites without sacrificing UX.
Modular Shift Team
Performance Engineering
Measure first
Use PageSpeed Insights (field data), CrUX, and your RUM to get a baseline. Track LCP, CLS, and INP by template.
LCP: keep it predictable and fast
- Optimize hero media: compress, use next‑gen formats, and set
sizes - Inline critical CSS for above‑the‑fold content
- Preload the LCP image and the primary font files (with
display=swap) - Avoid render‑blocking third‑party scripts
CLS: prevent jumps
- Always set width/height on images and iframes
- Reserve space for dynamic components (ads, embeds, lazy sections)
- Avoid inserting content above existing content after first paint
INP: ship less JS
- Use Astro islands for only the interactive parts
- Defer or
client:idlefor non‑critical components - Keep event handlers cheap; avoid heavy work on the main thread
Tooling and verification
- Lighthouse CI in PRs; fail builds on regressions
- Field monitoring via RUM so you catch real‑world issues early
Conclusion
Astro’s static‑first model makes Core Web Vitals easier to win. Focus on predictable media, reserved layout, and minimal JS. Measure, ship, verify.
Need help prioritizing performance fixes? We’ll turn your metrics into an action plan.
Related posts
Performance
From SSR to SSG: Why Astro Makes Sites Feel Instant
How static-first builds, islands, and smart hydration improve performance and maintainability for content-heavy sites.
Performance
Routing performance budgets through your pipeline
Keep builds fast by enforcing image, script, and CSS budgets in CI for Astro sites.
