Astro vs. Next.js: Scoring 100 on Lighthouse
Next.js ships too much JavaScript. For marketing sites, Astro's zero-JS architecture and React islands guarantee 95-100 Lighthouse scores.
The JavaScript Bloat Epidemic
There is a direct, unforgiving correlation between page load speed and lead conversion rates. Every extra second of load time bleeds ad spend. Yet, developers consistently choose frameworks designed for complex web applications—like Next.js—to build straightforward marketing sites and landing pages.
Next.js is a phenomenal tool for building dashboards, portals, and highly interactive applications. But when you use it for a lead generation site, you are shipping massive amounts of React JavaScript to the browser just to render static text and images. The browser has to download the HTML, download the JS bundle, and execute a process called "hydration" before the page becomes fully interactive.
The result? Sluggish First Input Delay (FID), poor Core Web Vitals, and Lighthouse scores hovering in the 60s. For service-based businesses paying $40 per click on Google Ads, this is unacceptable architecture.
The Astro Philosophy: Zero JS by Default
I use Astro for all marketing and programmatic SEO builds. Astro is an HTML-first framework. It fundamentally changes the rendering paradigm.
When Astro builds your site, it strips out all the JavaScript. It renders your React, Vue, or Svelte components into pure HTML and CSS on the server. When the user loads the page, they receive zero kilobytes of framework overhead. The page loads instantly.
// Note
Lighthouse loves HTML. Because Astro removes the hydration step for static content, achieving a 95-100 Lighthouse score becomes the default outcome, rather than an intense optimization struggle.
The Power of Island Architecture
Of course, marketing sites aren't entirely static. You need interactive lead capture forms, dynamic pricing calculators, and complex UI elements.
Astro solves this via "Island Architecture." You can drop a React component into an Astro page and tell Astro exactly when to load its JavaScript. The static parts of the page (the ocean) remain pure HTML, while the interactive components (the islands) hydrate in isolation.
---
// Astro Component Server-Side Script
import Hero from '../components/Hero.astro';
import LeadForm from '../components/LeadForm.jsx'; // A React Component
import RoofCalculator from '../components/RoofCalculator.jsx';
---
<html>
<body>
<!-- Renders as pure HTML, zero JS sent to browser -->
<Hero title="Get a Quote" />
<!-- Hydrates immediately because it is critical for conversions -->
<LeadForm client:load />
<!-- Delays loading JS until the user scrolls down to it -->
<RoofCalculator client:visible />
</body>
</html>
The Business Impact of 100/100
Hitting perfect Core Web Vitals is not a vanity metric for developers. It is a direct lever on your CAC (Customer Acquisition Cost).
1. Google Ads Quality Score: Google factors landing page experience into your ad rank. A faster site lowers your Cost Per Click (CPC) and wins more auctions.
2. Programmatic SEO: If you are generating 10,000 location-based service pages, search engines have a crawl budget. If your pages are bloated SPAs, Google won't index them all. Astro's lightweight HTML ensures deep, rapid indexing.
3. Bounce Rates: Mobile users on 3G/4G connections will abandon a page that takes 4 seconds to become interactive. Astro guarantees sub-second interactivity.
The Final Verdict
Use the right tool for the job. If you are building a SaaS application behind a login wall, use Next.js or React. But if you are building the public-facing engine that drives traffic and captures leads, the architecture choice is Astro. Ship HTML, defer JavaScript, and watch your metrics improve.
Start Your Moat Audit ← Back to all posts// Related Posts
Zero-Downtime Migrations: Keeping the Engine Running
If updating your schema forces you to put up a "maintenance mode" banner, your deployment strategy is obsolete. Here is how to orchestrate seamless updates.
Mar 16, 2026Vector Search in Postgres: Preparing Your Data for AI
You do not need a dedicated vector database to build AI features. I use pgvector inside PostgreSQL to store embeddings right next to relational data.
Mar 16, 2026The 14-Day Blueprint: Escaping the Endless Sprint Cycle
You don't need another sprint; you need a system. Moving from discovery to production in 14 days isn't about typing faster—it's about a repeatable architecture methodology. No sprints that slip. No handoff chaos. Just a strict transition from Discovery → Design → Deploy.