Astro for Landing Pages: Zero-JS Architecture That Converts
Astro ships zero JavaScript by default, delivering sub-second load times that improve Core Web Vitals and conversion rates. We break down the architecture, compare it to Next.js and Gatsby, and show real performance data from client migrations.
The JavaScript Problem in Landing Pages
Every kilobyte of JavaScript delays Time to Interactive (TTI). Google’s research shows that mobile users abandon pages that take longer than 3 seconds to load—and most React/Vue landing pages ship 200-400KB of JavaScript before any content renders.
This isn’t theoretical. A 1-second delay in page load time reduces conversions by 7% (Portent, 2022). For a business spending $50,000/month on Google Ads, that’s $3,500/month in wasted ad spend from slow landing pages alone.
What’s Actually Slowing Down Your Landing Pages
| Framework | Typical JS Bundle | Time to Interactive | Core Web Vitals |
|---|---|---|---|
| React SPA | 180-350KB | 3.2-5.5s | Often fails LCP |
| Next.js (default) | 90-180KB | 1.8-3.2s | Usually passes |
| Gatsby | 120-250KB | 2.1-4.0s | Mixed results |
| Astro | 0-20KB | 0.8-1.5s | Consistently passes |
Data from WebPageTest runs on equivalent landing page implementations
How Astro Solves the Performance Problem
Astro uses Islands Architecture—static HTML ships immediately, and JavaScript only loads for interactive components that actually need it. A contact form gets JS. A hero section doesn’t.
---
// This component ships ZERO JavaScript to the browser
import Hero from '../components/Hero.astro'
import Features from '../components/Features.astro'
---
<Hero title="Ship faster landing pages" />
<Features items={features} />Astro vs. Next.js vs. Gatsby: Honest Comparison
| Capability | Astro | Next.js | Gatsby |
|---|---|---|---|
| Default JS shipped | 0KB | ~80KB React runtime | ~100KB + GraphQL |
| Build time (100 pages) | ~15s | ~45s | ~90s |
| Learning curve | Low (HTML-first) | Medium (React required) | High (GraphQL + React) |
| Dynamic features | Via islands | Full SSR/SSG | Primarily static |
| Best for | Marketing sites, blogs | Apps with interactivity | Content-heavy sites |
| Hosting cost | $0-20/month (static) | $20-100/month (Vercel) | $20-50/month |
Why Marketing Teams Switch to Astro
Content velocity: Astro’s content collections (MDX, Markdown) let marketing teams update landing pages without engineering support. Change copy, push to GitHub, auto-deploy in 30 seconds.
A/B testing: Integrate with Optimizely, VWO, or Google Optimize via script tags—no framework conflicts. Static HTML means consistent baselines for statistical significance.
Analytics: Google Analytics 4, Segment, Mixpanel, Amplitude—all work out of the box. Partytown (built into Astro) offloads tracking scripts to web workers, keeping the main thread fast.
Forms: Connect to HubSpot, Mailchimp, or Zoho CRM directly. We’ve built landing pages that capture leads and sync to CRM in under 200ms.
Migration Case Study: E-commerce Landing Pages
Client: Fashion retail, 200+ SKUs (Germany) Previous stack: Next.js with heavy product configurator Challenge: Mobile Core Web Vitals failing, 4.2s average load time
What We Changed
- Rebuilt landing pages in Astro — product grids as static HTML, configurator as React island
- Moved images to Cloudflare R2 — automatic WebP conversion, edge caching
- Eliminated layout shift — reserved dimensions for all images and embeds
Measured Results (30-day average)
| Metric | Before | After | Change |
|---|---|---|---|
| Largest Contentful Paint | 4.2s | 1.1s | -74% |
| Time to Interactive | 5.8s | 1.4s | -76% |
| Mobile Bounce Rate | 58% | 41% | -29% |
| Mobile Conversion Rate | 1.8% | 2.2% | +23% |
| Cost Per Acquisition | €24.50 | €20.30 | -17% |
| Organic Traffic (monthly) | 12,400 | 16,600 | +34% |
Performance data from Google Search Console and GA4
Getting Started: Three Migration Paths
1. Greenfield Build (New Landing Pages)
Start fresh with Astro. Best for campaign-specific pages where you don’t need to preserve existing URLs.
npm create astro@latest
# Select: Empty template
# Add integrations: @astrojs/tailwind, @astrojs/image2. Incremental Migration (Replace Slow Pages First)
Keep your existing site, rebuild your highest-traffic landing pages in Astro. Deploy to a subdomain or path prefix (/lp/*).
3. Full Site Migration
Replace your entire marketing site. We’ve migrated sites from WordPress, Next.js, and Gatsby—typical timeline is 4-8 weeks depending on page count.
What we deliver in a migration project:
- Performance audit with specific bottleneck identification
- Component architecture matching your brand system
- CMS integration (Contentful, Sanity, Storyblok, or Astro’s built-in content collections)
- Form handling connected to your existing CRM (HubSpot, Salesforce, Zoho)
- Deployment pipeline to Cloudflare Pages, Vercel, or Netlify
When Astro Isn’t the Right Choice
Astro excels at content-focused sites with limited interactivity. It’s not ideal for:
- Highly interactive dashboards — Use Next.js or Remix
- Real-time collaborative apps — Use a full-stack framework with WebSocket support
- Complex state management across pages — React/Vue SPAs handle this better
For landing pages, marketing sites, blogs, and documentation? Astro consistently outperforms alternatives on the metrics that matter: load time, Core Web Vitals, and conversion rate.
Frequently Asked Questions
How long does an Astro migration take?
Single landing page: 3-5 business days. Full marketing site (20-50 pages): 4-6 weeks. E-commerce with product pages: 6-10 weeks. We run your existing site in parallel during migration—zero downtime.
Does Astro work with our existing stack?
Astro integrates with virtually any backend or service:
- CMS: Contentful, Sanity, Storyblok, WordPress (headless), Strapi
- Analytics: GA4, Segment, Mixpanel, Amplitude, Plausible
- CRM/Forms: HubSpot, Salesforce, Zoho, Mailchimp, ConvertKit
- E-commerce: Shopify (Storefront API), Swell, Medusa, Saleor
- Auth: Auth0, Clerk, Supabase Auth
What’s the actual hosting cost difference?
Static Astro sites on Cloudflare Pages: $0 for most traffic levels (100,000 requests/day free). Next.js on Vercel: $20-100+/month depending on serverless function usage. For pure landing pages, Astro hosting is essentially free.
Can we keep some React/Vue components?
Yes—that’s the island architecture advantage. You can use React, Vue, Svelte, or Solid components exactly where you need interactivity. The rest ships as pure HTML.