部品40個・655.0KBのページで、操作を受け付けるのは9個・147.5KBでした。
全部動かすと700.0KBを配ります。動く9個だけにすると157.6KBで、22.5%です。
動かない部品は、組み上げた結果を文字として送れば済みます。減るのはその分です。
Astroが置く単位は島です。出典はこれを次のように定めています。
Astroでいう島とは、それ以外は静的なHTMLのページ上にある、機能を強化された画面部品であるという言い方です。
「それ以外は静的」の部分が効きます。島でない部品は配らなくてよいということです。
部品40個・合わせて655.0KBのページを用意しました。そのうち操作を受け付けるのは9個・147.5KBです。
1ページの部品 40個、合わせて 655.0KB うち操作を受け付ける部品は 9個・147.5KB。仕組み自体は 45KB 配り方 配る量 全体に対する割合 全部を動かす 700.0KB 100.0% 動く部品だけ動かす 192.5KB 27.5% 動く部品だけ・仕組みも分割 157.6KB 22.5% どれも動かさない 0.0KB 0.0%
全部動かすと700.0KBです。部品655.0KBに、動かす仕組み45KBが乗ります。
動く9個だけにすると192.5KB、仕組みも分割すると157.6KBになります。全体の22.5%です。
157.6KBのうち147.5KBは動く部品そのものです。ここは削れません。
つまり下限は動く部品の合計で決まります。動く部品が多いページでは、この作りにしても効きません。
効くのは、表示だけの部品が量の大半を占めるページです。記事や一覧が該当します。
減るのは、動かない部品と仕組みの分だけ。
In Astro, an island is an enhanced UI component on an otherwise static page of HTML.原文Astro 公式ドキュメント「Islands architecture」（Concepts） この内容の有効期限2027-02-18
何も指定しなければHTMLとCSSだけになります。動かしたい部品を1つずつ選ぶ形です。
Astroの既定は動かさないです。出典もそう定めています。
既定では、Astroはすべての画面部品を自動的にHTMLとCSSだけに描き出し、利用者側で動く記述をすべて自動的に取り除くという記述です。
既定の向きが逆になっています。減らす作業ではなく、足す作業になります。
1番目が要点です。指定を忘れた結果は「動かない」で、配る量は増えません。
その代わり、動かない不具合は本番で気づきにくいものになります。見た目は正しく出るためです。
この作りでは、操作を試す検査が要ります。表示だけを見る検査では、動かない部品を見つけられません。
画面を操作する検査の費用はE2Eテストの記事で測っています。全部を通す必要はなく、島の数だけあれば足ります。
By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically.原文Astro 公式ドキュメント「Islands architecture」（Concepts） この内容の有効期限2027-02-18
独立して動くため、1つが遅くても他が止まりません。その代わり共有も自動では起きません。
Astroの島は、読み込みの上で互いを待ちません。出典は軽い部品と重い部品が並ぶ例をこう説明しています。
2つは並行して読み込まれ、隔離された状態で動き出す。つまり見出しは、ページ下方にあるより重い回転表示を待つことなく、ただちに操作できるようになるという記述です。
順番の依存がありません。上の軽い部品が、下の重い部品を待つことはないということです。
独立している以上、島ごとに違う枠組みの部品を置けます。同じページに別々の作りが同居できます。
ただし配る量では不利になります。枠組みが2つあれば、仕組みも2つぶん載ります。
この計測の45KBが2つになると、157.6KBは190KB前後まで戻ります。混ぜられることと、混ぜるべきことは別です。
島をまたいだ値の共有はできます。ただし出典によれば、それぞれが別々の部品の文脈で動いているという前提の上での共有です。
枠組みが用意する共有の仕組みは、この境界を越えません。島の外に置いた入れ物を通してやりとりする形になります。
静的なHTMLの上に、独立した島が並ぶ。
部品の大きさと、操作を受け付ける割合は式で作った値です。実際のページでは大きい部品ほど操作を受け付けやすいなどの偏りがあり、その場合は減り方が小さくなります。仕組みを分割したときの45KBの按分も概算です。ここで見せているのは、下限が動く部品の合計で決まるという関係で、その下限は自分のページで数えれば分かります。
The two load in parallel and hydrate in isolation, meaning that the header becomes interactive immediately without having to wait for the heavier carousel lower down the page.原文Astro 公式ドキュメント「Islands architecture」（Concepts） この内容の有効期限2027-02-18
同じ課題を持つ会社にとって、動いている設定は「作る時間」を買えるということです。ServiceDockは自作のワークフローやテンプレートを出品できるマーケットプレイスです。手数料や出品の流れは出品者向けページにまとまっています。
出品の仕組みを見る