0
0
Astroframework~5 mins

Why Islands architecture optimizes performance in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Islands architecture helps web pages load faster by only activating small interactive parts instead of the whole page at once.

When building a website with mostly static content but some interactive widgets.
When you want faster page loads and better user experience on slow networks.
When you want to reduce the amount of JavaScript running on the page.
When you want to improve SEO by serving mostly static HTML.
When you want to keep your site simple but still add dynamic features.
Syntax
Astro
---
import Counter from '../components/Counter.jsx';
---
<html>
  <body>
    <h1>Welcome</h1>
    <Counter client:load />
  </body>
</html>

The client:load directive tells Astro to hydrate only the Counter component on the client.

This means only the interactive part loads JavaScript, not the whole page.

Examples
Hydrates the component when the page loads.
Astro
<Counter client:load />
Hydrates the component when the browser is idle, saving resources.
Astro
<Counter client:idle />
Hydrates the component only when it scrolls into view.
Astro
<Counter client:visible />
Sample Program

This page shows static content and a counter component that only loads JavaScript when needed, making the page faster.

Astro
---
import Counter from '../components/Counter.jsx';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Islands Example</title>
  </head>
  <body>
    <h1>My Page</h1>
    <p>This part is static and loads fast.</p>
    <Counter client:load />
  </body>
</html>
OutputSuccess
Important Notes

Islands architecture reduces JavaScript size by hydrating only small parts.

This improves load speed and responsiveness.

It works well for mostly static pages with some interactive features.

Summary

Islands architecture loads only interactive parts with JavaScript.

This makes pages faster and lighter.

It is great for static sites with small dynamic widgets.