One client complained: their React app took over 5 seconds to load on mobile devices — tons of JavaScript pushed LCP to 4.2 seconds. After rebuilding with Astro and Island Architecture, we cut LCP down to 1.1 seconds and the bundle size from 2.3 MB to 180 KB. Astro is a framework that lets you build sites with minimal JavaScript, using components from React, Vue, Svelte, and other libraries. Its key feature is Island Architecture: most of the page renders as static HTML, while interactive "islands" load independently with explicit hydration control. This approach delivers great Core Web Vitals: LCP < 1.5 s, CLS < 0.1, INP < 200 ms. Astro sites load 2–3 times faster than comparable Next.js or Nuxt sites due to less JavaScript. Hosting costs drop by up to 50% thanks to static generation.
Faster Loads with Island Architecture
Hydration directives let you precisely control when and which components become interactive. Here's a typical structure:
--- import HeavyChart from '../components/Chart.tsx'; import StaticHero from '../components/Hero.astro'; --- <html> <body> <StaticHero title="Heading" /> <HeavyChart client:visible data={chartData} /> <Counter client:load /> </body> </html> In this example, StaticHero is a fully static component without JS, HeavyChart loads only when it enters the viewport, and Counter loads immediately after page load. Choosing the right directive is critical for performance. Compare the options:
| Directive | When JS loads | Recommended use |
|---|---|---|
client:load |
Immediately after page load | Critical elements (menu, search, navigation) |
client:idle |
When the browser is idle | Secondary widgets (chat, subscription) |
client:visible |
When the element enters the viewport | Heavy charts, maps, videos |
client:media |
When a media query matches | Adaptive components for different devices |
Using client:load for all islands negates the benefits of Island Architecture. We recommend starting with client:visible and escalating priority only when necessary.
How to Configure Island Architecture: Step by Step
- Identify which components truly need to be interactive. The rest should be static
.astrocomponents. - For each island, select a hydration directive based on the table above.
- Move all interactive logic into isolated components (React, Vue, Svelte).
- Test performance using Lighthouse or WebPageTest.
- Optimize images with the built-in
<Image>component that auto-generates srcset.
Example configuration for hybrid mode
// astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; import node from '@astrojs/node'; export default defineConfig({ output: 'hybrid', adapter: node(), integrations: [react()], }); Hybrid mode lets you use both static generation and server routes for dynamic data.
Content Collections and Framework Support
Astro provides typed Content Collections for Markdown and MDX content. The schema is validated with Zod, preventing metadata errors:
// src/content/config.ts import { defineCollection, z } from 'astro:content'; const blog = defineCollection({ type: 'content', schema: z.object({ title: z.string(), date: z.date(), tags: z.array(z.string()), draft: z.boolean().default(false), }), }); export const collections = { blog }; --- import { getCollection } from 'astro:content'; const posts = await getCollection('blog', ({ data }) => !data.draft); posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); --- Astro also allows you to use components from over 5 different frameworks in a single project. For example, add React and Vue support:
npx astro add react vue svelte This is handy when migrating existing code or using ecosystem components.
Common Mistakes in Astro Development
Based on our experience (over 10 projects), here are three frequent issues:
-
Overusing
client:load. Developers habitually make all islands load immediately, forgetting that Astro is optimized for minimal JS. In 80% of projects this inflates bundle size by 30%. - Ignoring Content Collection typing. Without a Zod schema, typos in fields easily slip in, causing runtime errors.
-
Skipping image optimization. Astro's
<Image>component automatically generates srcset and lazy-loads. Neglecting it can increase CLS by 0.2 and load time by 40%.
Our Process and What You Get
Developing an Astro site includes: analysis and design (structuring content, choosing island frameworks), implementation (creating components, setting up Content Collections, styling with Tailwind or CSS modules), testing (checking LCP, CLS, INP, responsiveness, cross-browser with Playwright), and deployment with optimizations (CDN, caching, incremental builds).
After completion, you receive:
- Architecture and component documentation.
- Repository access and build instructions.
- Training for content managers on Content Collections.
- One month of support (bug fixes, consultations).
Timelines depend on complexity:
| Project type | Approximate timeline |
|---|---|
| Content site (SSG, 15–50 pages) | 1–2 weeks |
| Hybrid site (server routes + islands) | 2–4 weeks |
Pricing is determined individually after requirements analysis. We guarantee transparent pricing with no hidden fees.
Why Astro Outshines Competitors for Content Projects
Astro consistently scores 100/100 on Lighthouse without extra optimizations. Compared to Next.js, the amount of JavaScript delivered is on average 3 times smaller. The Island Architecture simplifies maintenance: to add a new interactive element, just create an island and connect it with a directive — no need to rewrite the whole page.
Contact us for a free consultation — we'll audit your current solution and propose the optimal architecture. Order turnkey development and get a fast, reliable site that both users and search engines love. Get a frontend performance audit today.