Astro
Astro island
Also called client:* directive.
Astro island is one interactive component on an otherwise static Astro page. A client directive tells Astro when to load its JavaScript.
How it is measured
Find components with a directive like client:visible. In the built HTML they appear inside an astro-island custom element with attributes naming the component file and the props. Each island gets its own script, so you can size them one at a time.
Count them per route and add their bytes. A page with 0 islands has 0 component JavaScript. A page with 2 small islands has two small downloads that do not block each other.
Worked example
A conference site has a schedule page with a filter by track. The filter is a Svelte component loaded with client:visible, 9 KB gzipped, and it hydrates when the visitor scrolls to it. The speaker bios and venue map above it are plain HTML.
The team adds a second island for a countdown timer with client:load. It adds 3 KB and runs on every page view, including visitors who never scroll to the schedule.
How it differs
An Astro island is a single hydrated component. Islands architecture is the pattern of building a page from static HTML with several such pieces. One island is a unit; the architecture is the rule that pages are mostly not units.
Common errors
Wrapping the whole page layout in one island. Passing huge props that get serialized into the HTML. Putting client:load on everything out of habit. Expecting two islands to share state automatically. Sending a function as a prop.
In practice
List the interactive things on your most visited page and mark each as island or plain markup. Give every island the least eager directive that still works. Share state between islands through a small store, not through props.