Astro.js & Islands Architecture: A Web Performance ‘Diet’ for a Perfect 100 Lighthouse Score – ITFROMZERO

Table of Contents

The Nightmare of JavaScript Bloat

Two years ago, I built a news site using Next.js. I was quite confident because I was using the most popular framework at the time. However, when measuring with Google PageSpeed Insights, the mobile Performance score struggled at a mere 55.

The browser had to download and execute over 200KB of JavaScript just to display a dropdown menu and a sign-up form at the bottom of the page. Forcing users to download a heavy framework just to read a few lines of text is a terrible experience. This is exactly the problem most modern web projects face.

Hydration: The Silent Performance Thief

Why is the site still slow despite using a high-end framework? The main culprit is Hydration. In React or Vue, even though the server has already rendered the HTML, the browser still needs to download the entire JS file to re-run the code and attach event listeners.

This process consumes CPU cycles and increases Total Blocking Time (TBT). In reality, about 80% of the content on a blog or landing page is static. Forcing the browser to process JS for non-interactive parts is a massive waste of resources.

Islands Architecture: A “Divide and Conquer” Mindset

To escape this swamp, Islands Architecture emerged. Instead of turning the entire website into one giant JavaScript blob, this architecture treats the site as an ocean of static HTML.

In that ocean, interactive components like a shopping cart or a search bar act as small “islands” containing JS. Only these islands need to load their source code; the rest remains pure HTML. This approach significantly reduces the page’s response time.

Astro.js – The Pioneer Framework for the Zero-JS Era

Astro.js is currently the most effective framework implementing Islands Architecture. It allows you to mix React, Vue, Svelte, or Solid within the same project. By default, Astro outputs Zero JavaScript unless you specify otherwise.

Step 1: Quick Project Initialization

Type this command into your terminal to get started:

npm create astro@latest

After choosing the default options, navigate to the directory and start the development environment:

cd my-project
npm run dev

Step 2: Multi-framework Integration

Astro is highly flexible. Whether your team has React experts or Vue enthusiasts, you can integrate both with a single command:

npx astro add react vue

The system will automatically configure the astro.config.mjs file. Now, using components from different libraries side-by-side is incredibly simple.

Step 3: Building Interactive “Islands”

Let’s try creating a Counter component with React and a notification with Vue to see the difference.

src/components/ReactCounter.jsx

import { useState } from 'react';

export default function ReactCounter() {
  const [count, setCount] = useState(0);
  return (
    <div className="p-4 border rounded">
      <p>React Counter: {count}</p>
      <button onClick={() => setCount(count + 1)} className="bg-blue-500 text-white px-2">
        Increment
      </button>
    </div>
  );
}

Step 4: Controlling JavaScript with Directives

In the src/pages/index.astro file, if you call components normally, Astro renders them as static HTML. The buttons won’t work because there’s no accompanying JS. To enable interactivity, we use client:* directives:

---
import ReactCounter from '../components/ReactCounter';
import VueNotification from '../components/VueNotification.vue';
---

<html lang="en">
  <body>
    <h1>Astro Islands</h1>
    
    <!-- Island 1: Load JS immediately on page load -->
    <ReactCounter client:load />

    <div style="height: 100vh;"></div>

    <!-- Island 2: Only load JS when the user scrolls to it -->
    <VueNotification client:visible />
  </body>
</html>

These directives give you granular control:

client:visible: Only load JS when the component enters the user’s viewport. This is a great way to optimize footer components.
client:idle: Load JS when the browser is idle.
client:only: Skip the server-side rendering step and run only on the client.

Real-world Results: From 200KB down to 10KB

I once refactored a landing page containing 50 components. Using Next.js, the main JS file weighed nearly 200KB, and the LCP (Largest Contentful Paint) took 2.5 seconds.

After switching to Astro and using client:visible for the necessary parts, the total initial JS payload dropped to under 10KB. The Lighthouse score soared to a perfect 100, and Time to Interactive (TTI) became nearly instantaneous.

When Should You Choose Astro?

Astro isn’t a silver bullet for every problem. If you’re building a complex Dashboard like Jira or Facebook, stick with Next.js or a React SPA. However, Astro is the top choice for:

News sites, Blogs, or Personal Portfolios.
Business websites and Sales Landing Pages.
Technical documentation pages.
E-commerce sites that prioritize SEO and initial load speed.

Leveraging Islands Architecture allows you to maintain a modern development experience while delivering maximum speed to your end users.