Measuring Performance: Lighthouse and Core Web Vitals
Compare Lighthouse scores between a full React SPA and an Astro islands approach for the same content.
Measuring Before and After
Lighthouse is the standard tool for measuring web performance. Run it in Chrome DevTools (Lighthouse tab) or via the CLI (npx lighthouse https://yoursite.com). When evaluating Islands Architecture, run Lighthouse on representative pages before and after migration to quantify the gains objectively.
LCP: Largest Contentful Paint
LCP measures when the largest visible content element finishes rendering. Islands Architecture improves LCP because the server sends fully rendered HTML immediately — the browser does not wait for JavaScript to render content. A hero image or headline that would be LCP is painted from the initial HTML response.
All lessons in this course
- The Full Hydration Problem
- Islands Architecture: Selective Hydration
- Astro and React Islands Setup
- Measuring Performance: Lighthouse and Core Web Vitals