Astro Framework: Building Ultra-Fast Websites That Score 100 on Lighthouse

Why Website Speed Still Matters More Than Most Teams Realize

Google has been measuring website speed since 2010 and using it as a ranking factor. Core Web Vitals became an official ranking signal in 2021. Every 100 milliseconds of added load time reduces conversion rates by an average of 7%, according to Akamai research. Mobile users on 3G connections in Switzerland still account for a meaningful share of traffic outside urban areas like Lugano and Zurich.

Despite this, most business websites ship hundreds of kilobytes of JavaScript that the browser must download, parse, and execute before the page becomes interactive. A typical Next.js or Gatsby site, even a simple marketing page, sends 200-500 KB of JavaScript to the browser. Most of that JavaScript handles framework hydration, not actual user interactions.

Astro was built to fix this problem. It is a content-first web framework that ships zero JavaScript by default. You only add JavaScript where you need interactivity. The result: sites that consistently score 100/100 on Google Lighthouse, load in under 1 second, and rank better because of it.

What Astro Is

Astro is an open-source web framework designed for content-rich websites. It was created by Fred Schott and the team behind Snowpack (a build tool). The first stable version (Astro 1.0) launched in August 2022.

The core principle is simple: render everything to static HTML at build time. If a component does not need to be interactive, it becomes plain HTML with zero JavaScript. If a component does need interactivity (a form, a carousel, a shopping cart), it loads its JavaScript only when needed.

This approach is called "islands architecture," and it is the defining feature that separates Astro from other frameworks.

Islands Architecture Explained

In a traditional single-page application (SPA), the entire page is controlled by JavaScript. The browser downloads a JavaScript bundle, and that bundle renders the entire page, handles routing, manages state, and responds to user interactions. Even a completely static section like a header or footer is managed by the framework.

In Astro, the page is static HTML by default. Interactive components are "islands" of JavaScript embedded in a sea of static HTML. Each island loads independently, hydrates independently, and can use a different UI framework from its neighbors.

How It Works in Practice

Consider a typical marketing page with a hero section, feature descriptions, a testimonial carousel, and a contact form. In Next.js, the entire page hydrates as a React application. In Astro:

• The hero section renders as static HTML. No JavaScript needed.
• Feature descriptions render as static HTML. No JavaScript needed.
• The testimonial carousel is an interactive island. It loads its JavaScript when the component scrolls into view (using client:visible).
• The contact form is an interactive island. It loads its JavaScript when the page loads (using client:load).

The result: instead of shipping 200 KB of JavaScript for the whole page, you ship maybe 15 KB total, only for the components that need it. The page loads instantly, the Lighthouse score is 100, and search engines see fully rendered HTML on the first request.

Hydration Directives

Astro provides several client directives to control when islands hydrate:

• client:load - Hydrate the component immediately on page load. Use for components that need to be interactive right away (above-the-fold interactive elements).
• client:idle - Hydrate when the browser is idle. Use for lower-priority components that should be interactive but are not needed immediately.
• client:visible - Hydrate when the component scrolls into the viewport. Use for below-the-fold components like carousels, maps, or comment sections.
• client:media - Hydrate when a media query matches. Use for components that are only interactive on certain screen sizes.
• client:only - Skip server-side rendering entirely and only render on the client. Use for components that cannot be server-rendered (e.g., they depend on browser APIs).

No directive means no JavaScript. The component renders as static HTML and stays that way.

Zero JavaScript by Default

This is worth emphasizing because it is counterintuitive for developers coming from React or Vue backgrounds. In Astro, if you write a component and do not add a client: directive, it ships zero JavaScript to the browser. The component runs at build time, generates HTML, and that HTML is what the browser receives.

You can write components using JSX syntax (similar to React), use props, import data, call APIs at build time, and use template logic. All of this runs during the build process. The output is plain HTML and CSS.

For a content website (blog, marketing site, documentation, e-commerce catalog), the vast majority of content is static. Navigation menus, headers, footers, article content, product descriptions, image galleries - none of these need JavaScript. They are content, and content should be HTML.

Astro vs Next.js vs Gatsby vs Hugo

Choosing the right framework depends on what you are building. Here is an honest comparison:

Feature	Astro	Next.js	Gatsby	Hugo
Default JS shipped	0 KB	80-200+ KB	100-300+ KB	0 KB
UI framework	Any (React, Vue, Svelte, etc.)	React only	React only	Go templates only
SSG (static)	Yes	Yes	Yes	Yes
SSR (server)	Yes	Yes	No (static only)	No (static only)
Build speed	Fast	Medium	Slow for large sites	Very fast
Lighthouse score (content site)	95-100	60-90	50-85	95-100
Learning curve	Low	Medium	High (GraphQL data layer)	Medium (Go templates)
Content collections	Built-in (type-safe)	Manual	Plugin-based	Built-in
Component ecosystem	Uses any framework	React ecosystem	React ecosystem	Limited
Best for	Content sites, blogs, docs, marketing	Web apps, dashboards, e-commerce with dynamic features	Content sites (but Astro does it better now)	Simple blogs, docs

When to Choose Astro Over Next.js

Choose Astro when your site is primarily content: blogs, marketing pages, documentation, product catalogs, portfolios, agency websites, landing pages. Astro will give you better performance, lower hosting costs (static files are cheaper to serve), and better SEO out of the box.

When to Choose Next.js Over Astro

Choose Next.js when your site is primarily an application: dashboards, SaaS products, social platforms, real-time collaboration tools. If most of your pages require JavaScript-heavy interactivity, the overhead of hydrating everything is justified because you actually need it.

Why Not Gatsby Anymore

Gatsby was the leading static site generator for React from 2017 to 2020. It pioneered the image optimization and GraphQL data layer approach. But Gatsby's build times for large sites became painful, its plugin ecosystem became fragile, and the company behind it (Gatsby Inc.) was acquired by Netlify. Development has slowed significantly. For new projects, Astro or Next.js are better choices.

When Hugo Makes Sense

Hugo is still the fastest static site generator in terms of raw build speed. If you have a simple blog or documentation site and you do not need component-based architecture, Hugo is excellent. But if you want to use React, Vue, or Svelte components, or if you need selective interactivity, Astro is the better option.

Working with React, Vue, and Svelte in Astro

One of Astro's most powerful features is that it is framework-agnostic. You can use components from React, Vue, Svelte, Solid, Preact, Alpine.js, and Lit. You can even mix them on the same page.

Adding React to an Astro Project

Install the React integration:

npx astro add react

Now you can import and use React components in your Astro pages. Without a client: directive, the React component renders at build time and ships as static HTML. With a client: directive, it hydrates in the browser.

Mixing Frameworks

You can have a React carousel, a Vue contact form, and a Svelte notification banner on the same page. Each component hydrates independently using its own framework runtime. This sounds wasteful, but because each island is small, the total JavaScript is still far less than a full SPA.

This feature is also useful for teams migrating from one framework to another. You can gradually replace Vue components with React components (or vice versa) without rewriting everything at once.

Static Site Generation and Server-Side Rendering

Astro supports both SSG (static site generation) and SSR (server-side rendering), and you can mix them in the same project.

SSG (Default Mode)

In SSG mode, Astro builds your entire site to static HTML at build time. Every page becomes an HTML file. These files can be served from any static hosting provider (Cloudflare Pages, Netlify, Vercel, GitHub Pages, Amazon S3). This is the fastest and cheapest deployment option.

SSR Mode

In SSR mode, pages are rendered on the server for each request. This is useful for pages that need dynamic data (user-specific content, real-time pricing, search results). Astro supports SSR on multiple runtimes: Node.js, Deno, Cloudflare Workers, Netlify Functions, Vercel Edge Functions.

Hybrid Mode

The most practical approach for most business websites: use SSG for the majority of pages (which are static content) and SSR for the few pages that need dynamic data. Astro makes this easy by letting you set the rendering mode per page.

Deployment on Cloudflare Pages, Vercel, and Netlify

Cloudflare Pages

Cloudflare Pages is our recommended deployment platform for Astro sites, and we use it for most of the sites we build at Envestis in Lugano. Reasons:

• Free tier: 500 builds per month, unlimited bandwidth, unlimited requests. This covers the vast majority of business websites.
• Global CDN: Cloudflare has data centers in over 300 cities worldwide, including Zurich and Milan (close to Ticino). Your site loads fast everywhere.
• Workers integration: If you need SSR, Cloudflare Workers run at the edge, close to the user. Response times are typically under 50 ms.
• Built-in analytics: Free, privacy-respecting analytics without additional JavaScript.

Vercel

Vercel is the company behind Next.js, but they support Astro well. The free tier is generous for personal projects. For business use, pricing starts at $20/month per team member, which adds up quickly for agencies and development teams.

Netlify

Netlify pioneered the JAMstack hosting model. Their free tier includes 100 GB bandwidth per month and 300 build minutes. Good for smaller sites, but bandwidth limits can be a concern for high-traffic business sites.

Perfect for Blogs, Marketing Sites, and E-Commerce Storefronts

Blogs and Content Sites

Astro's content collections feature makes it the best framework for content-heavy sites. You define your content schema in TypeScript, and Astro validates every content entry at build time. Markdown and MDX are first-class citizens. RSS feeds, sitemaps, and Open Graph images can be generated automatically.

For blogs that need a CMS, Astro works with any headless CMS: Strapi, Contentful, Sanity, Ghost, Directus. You fetch content at build time (SSG) or at request time (SSR) and render it with Astro components. For more on headless CMS options, see our headless CMS comparison guide.

Marketing and Agency Sites

Marketing sites need to load fast, rank well on Google, and look polished. Astro delivers all three. The zero-JavaScript default means your Core Web Vitals are excellent without any optimization work. The component-based architecture means designers and developers can work with modern tools (React, Tailwind CSS) while still delivering static HTML to the browser.

E-Commerce Storefronts

For e-commerce, Astro handles the product catalog (static pages for product listings, category pages, product detail pages) while interactive elements (add to cart, shopping cart, checkout) are islands that load JavaScript only when needed. This approach is used by companies like Shopify (their Hydrogen framework takes a similar approach) and works well for storefronts with hundreds to tens of thousands of products.

Getting Started: A Practical Tutorial

Step 1: Create a New Astro Project

npm create astro@latest my-site

The CLI walks you through options: use a starter template, choose TypeScript (recommended), and select strict TypeScript checking.

Step 2: Project Structure

An Astro project has a clean, intuitive structure:

• src/pages/ - Each file becomes a route. index.astro is the home page, about.astro is /about.
• src/layouts/ - Reusable page layouts (header, footer, meta tags).
• src/components/ - Reusable UI components (Astro, React, Vue, etc.).
• src/content/ - Content collections (blog posts, products, etc.).
• public/ - Static assets (images, fonts, favicons).

Step 3: Create a Page

Astro pages use a special syntax with a frontmatter section (JavaScript that runs at build time) and a template section (HTML with expressions):

--- const title = 'My Page'; const posts = await getCollection('blog'); --- <html> <head><title>{title}</title></head> <body> <h1>{title}</h1> {posts.map(post => <article>{post.data.title}</article>)} </body> </html>

Step 4: Add Integrations

Astro's integration system makes adding features straightforward:

npx astro add tailwind # Add Tailwind CSS npx astro add react # Add React support npx astro add sitemap # Generate sitemap.xml npx astro add mdx # Add MDX support

Step 5: Deploy

For Cloudflare Pages, push your code to a Git repository and connect it in the Cloudflare dashboard. Set the build command to npm run build and the output directory to dist. Every push to your main branch triggers a new deployment.

Why Envestis Chose Astro

We build and maintain websites for businesses across Ticino and throughout Switzerland. When we evaluated frameworks for our own site and for client projects, the decision came down to what actually matters for business websites:

• Performance: Our sites consistently score 95-100 on Lighthouse without performance optimization gymnastics. This translates directly to better Google rankings and higher conversion rates.
• Developer experience: Astro components feel natural to write. The frontmatter + template pattern is intuitive. TypeScript support is first-class. Hot module replacement during development is fast.
• Flexibility: We can use React components where we need interactivity and static HTML everywhere else. We are not locked into a single UI framework.
• Hosting costs: Static sites on Cloudflare Pages cost nothing for most business websites. No server to maintain, no scaling concerns, no infrastructure costs.
• SEO: Server-rendered HTML with proper meta tags, structured data, and fast load times. Search engines see complete, optimized HTML on every request.
• Maintenance: Static sites have a smaller attack surface (no server-side code to exploit on static pages), fewer dependencies to update, and simpler deployments. For more on why static sites are more secure, see our article on website security for businesses.

For the type of websites we build (business sites, marketing pages, blogs, e-commerce storefronts), Astro is the right tool. It delivers the performance, developer experience, and cost efficiency that make sense for business clients.

When Astro Is Not the Right Choice

Astro is not a silver bullet. It is not the right framework for:

• Highly interactive web applications: If your entire application is a dashboard, a project management tool, or a real-time collaboration platform, frameworks like Next.js (React) or Nuxt (Vue) are better suited because the entire UI needs JavaScript anyway.
• Real-time features: WebSocket-based features, live collaboration, and real-time data visualization are better handled by frameworks designed for dynamic applications.
• Complex state management: If your application has deeply interconnected state that flows across many components, the islands architecture can add complexity rather than reducing it.

For everything else (and that covers the vast majority of business websites), Astro delivers better results with less effort.

Next Steps

If you are planning a new website or rebuilding an existing one, consider Astro. The performance gains are real, the developer experience is excellent, and the framework is mature enough for production use.

At Envestis in Lugano, we build websites with Astro for businesses across Switzerland. Whether you need a marketing site, a blog, an e-commerce storefront, or a corporate web presence, we can help you build something that loads fast, ranks well, and is straightforward to maintain. Get in touch to discuss your project.