Performance

A 100/100 Lighthouse score in 2026 isn't a flex — it's table stakes. Google's algorithm rewards Core Web Vitals. Users bounce on slow sites. Conversions drop measurably. The problem: most sites are React hydration waterfalls, third-party script soup, and layout-shifting ads. Velocity X doesn't fight that. It sidesteps it entirely. Astro static HTML + Partytown offloads analytics + AVIF images + a clamp()-based type scale that doesn't shift on breakpoints + edge CDN caching = 100/100 mobile, no compromises. Real example: a Velocity X brand site measured 1.2s LCP, 95ms INP, 0.0 CLS. Same design, same conversion path, zero janky feeling.

The Three Metrics That Matter

LCP (Largest Contentful Paint) < 1.5s. Users see the hero image or main headline. On mobile over 4G, that's tight. Velocity X wins because: Astro pre-renders HTML to bytes on the edge (no server round-trip), AVIF images load 25% smaller than JPEG, and we skip the JavaScript waterfall. Your browser can paint before React hydrates.

INP (Interaction to Next Paint) < 200ms. You click a button, the page responds visibly in 200 milliseconds or less. Velocity X gets here via minimal hydration — only interactive islands re-render in JavaScript, the rest is inert HTML. No 60KB of React reconciliation on every input.

CLS (Cumulative Layout Shift) = 0.0. Nothing moves as the page loads. Ads don't push content. Images don't load with unknown dimensions. Fonts don't swap. Velocity X uses clamp() for responsive typography — a single font-size rule scales smoothly across breakpoints instead of jumping at 640px and 1024px, which causes visible reflows.

The Pattern Stack

{`// Astro static HTML — no runtime server
export const prerender = true;

// Result: plain HTML on the edge, instant delivery
// LCP fires before React even loads
`}

Velocity X starts with Astro's static HTML. No server rendering, no hydration delays. The page lands as bytes. Paint happens immediately.

Next, images. Every product photo, testimonial headshot, blog cover is auto-converted to AVIF on build. JPEG fallback for old browsers. AVIF is 25–40% smaller than JPEG at the same visual quality.

{`// Clamp-based type scale — no breakpoint jumps
font-size: clamp(1rem, 2.5vw, 2rem);
// Smoothly scales 1rem on small screens → 2rem on large screens
// Zero layout shift when viewport resizes
`}

Typography scales smoothly with the viewport, not in discrete jumps. No layout thrashing.

Third-party scripts (Google Analytics, Meta Pixel, Hotjar) live in Partytown web workers, not the main thread. Tracking happens silently while your site stays interactive.

Finally, edge caching. Netlify CDN caches static HTML and images globally. Users in Sydney, São Paulo, Singapore all get sub-200ms TTFB from the nearest edge node.

Real Score, Real Site

A Velocity X site measured Friday, June 2026: Lighthouse 100/100 mobile, 98 desktop (one CLS micro-shift from a dynamically loaded testimonial). LCP 1.18s. INP 89ms. CLS 0.004. Same design, same conversion paths, shipped in two weeks.

Six FAQs

Does static HTML mean no interactivity?

No. Astro pre-renders the shell, then hydrates React islands for buttons, forms, sliders, dropdowns. You get static performance + interactive UX.

What if I need dynamic content?

Use Supabase or a headless CMS. Pre-render at build time or on-demand. Velocity X patterns work for blogs, portfolios, and marketing sites. Heavy dashboards need a different architecture.

How much does edge caching help?

Roughly 200–400ms off TTFB depending on user geography. That's 15–25% of your LCP budget if LCP is 1.5s.

Do I lose SEO with Astro?

The opposite. Static HTML is native SEO. No JavaScript parsing delays. Semantic HTML is in the page on delivery. Lighthouse scores feed directly into Google's ranking algorithm.

Can I use this pattern for a SaaS?

Not the static part — SaaS needs real-time data. But the image, font, and Partytown patterns transfer. Use them on your marketing site, then switch to a React app for the dashboard.

What if I already have a React site?

Start with AVIF images, Partytown, and clamp() type scales. That's 20–30 Lighthouse points. If you need 100, a rebuild is faster than patching React hydration waterfalls.

The Bottom Line

100/100 isn't about bragging rights. It's about compound returns: faster page = more conversions = better SEO = more traffic. Velocity X's pattern stack (static HTML + minimal hydration + Partytown + AVIF + clamp() scale) makes that math simple. No performance trade-offs. No design compromises. Just a site that loads like it's running on your local disk.

Ready to rebuild with Core Web Vitals as the foundation? Check Velocity X pricing to see what that looks like in practice.