A perfect 100/100 on mobile PageSpeed isn’t luck — it’s the product of an architecture that ships almost no JavaScript by default. Astro is built for exactly this. Here’s how we do it on every site.
Why Astro starts ahead
Astro renders to static HTML and ships zero JavaScript by default. Most frameworks send a full JS bundle to the browser whether the page needs it or not. Astro sends only what’s required, only where it’s required. That alone clears the biggest hurdle to a perfect score.
1. Use islands, not full hydration
When you do need interactivity, Astro’s island architecture lets you hydrate a single component instead of the whole page. Use client:visible so a component only loads its JavaScript when it scrolls into view, and client:idle for non-urgent interactivity. Reach for client:load only when something must be interactive immediately.
2. Optimize images with the built-in component
Astro’s <Image /> component handles modern formats, responsive sizing, and lazy loading automatically. Serve WebP or AVIF, size images to their display dimensions, and never ship a giant file to render a thumbnail.
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="" width={1200} height={630} />
3. Inline critical CSS and self-host fonts
Astro scopes and bundles CSS efficiently. Self-host your fonts with font-display: swap and preload the critical weights so text renders instantly without a layout shift. Avoid loading fonts from third-party domains where you can.
4. Kill render-blocking resources
Defer non-critical scripts. Don’t load analytics or chat widgets in a way that blocks first paint. Every third-party script is a tax on your score — only keep the ones that earn it.
5. Deploy to a fast static host
We deploy to Netlify, which serves the pre-built static files from a global CDN. No server rendering on each request, no cold starts — just instant delivery. This locks in the speed your build earned.
The result
Following this, our sites consistently hit:
- FCP around 1.2s
- LCP around 1.4s
- TBT of 0ms
- CLS of 0
That’s a real 100/100 on mobile — which protects you from losing rankings to slow load times.
Want a site built this way? Start a project →