パフォーマンスを測定する：Lighthouse と Core Web Vitals

Lighthouse は Web パフォーマンスの測定に標準的に使われるツールです。Chrome DevTools の Lighthouse タブ、または CLI（npx lighthouse https://yoursite.com）で実行します。Islands Architecture を評価するときは、移行前後に代表的なページで Lighthouse を実行し、改善効果を客観的に数値化します。

LCP は、画面上で最も大きいコンテンツ要素の描画が完了する時点を測定します。Islands Architecture では、サーバーが完全に描画済みの HTML をすぐに送信するため、LCP が改善します。ブラウザーは JavaScript がコンテンツを描画するまで待つ必要がありません。LCP になるヒーロー画像や見出しは、最初の HTML レスポンスから描画されます。

React SPA では、React が LCP 要素を描画する前にブラウザーが JavaScript をダウンロードして実行する必要があるため、LCP が遅れることがよくあります。Islands Architecture では、LCP のコンテンツが最初の HTML に含まれるため、JavaScript の実行が LCP をブロックしません。これは、測定可能なメリットの中でも特に大きなものの 1 つです。

Total Blocking Timeは、50msを超えるJavaScriptタスクによってメインスレッドがブロックされている時間を測定します。大規模なReact SPAのハイドレーションでは、TBTが数百ミリ秒に達することがあります。Islands Architectureでは、実行されるJavaScriptの量がページサイズではなくアイランドの数に比例するため、TBTが大幅に減少します。

Cumulative Layout Shiftは、ページの読み込み中に要素が移動するなど、視覚的な安定性を測定します。JavaScriptでコンテンツを描画すると、Reactがレンダリングして寸法を変更する際にレイアウトシフトが発生することがあります。Islands ArchitectureのサーバーでレンダリングされたHTMLでは、初期レイアウトがハイドレーションで変化しない静的HTMLから生成されるため、ハイドレーションに関連するレイアウトシフトを回避できます。

First Input Delay（現在はInteraction to Next Paint、INPに置き換えられています）は、ページがユーザー操作にどれだけ速く応答するかを測定します。Islands Architectureでは、各アイランドのJavaScriptバンドルが小さく、処理対象が絞られているため、INPが改善します。アイランド内のインタラクションは、作業をスケジュールする対象となる大規模なReactツリーがないため、高速に実行されます。

ブログページでの典型的な比較を見てみましょう。完全なReact SPAは、モバイル版Lighthouseで45～65（TBT：800ms、LCP：3.2s）になる可能性があります。同じコンテンツを、Reactアイランドを1つだけ使用するAstroサイトとして構築すると、90～98（TBT：80ms、LCP：1.1s）になる可能性があります。コンテンツが多く、インタラクティビティが限られているページほど、改善効果は顕著です。

Islands Architectureは、ダッシュボード、コードエディター、コラボレーションツールなど、高度にインタラクティブなアプリケーションには適していません。これらのアプリでは、コンポーネントが常に状態を共有し、一緒に再レンダリングされます。そのため、アイランド間の通信によるオーバーヘッドでパフォーマンス上の利点がなくなり、アーキテクチャも複雑になります。

Islands Architectureは、インタラクティビティが分散しているコンテンツ中心のサイトで力を発揮します。たとえば、ブログ（コンテンツを読むほか、時々「いいね」やコメントをする）、ドキュメント（ドキュメントを読むほか、時々検索やコードコピーのボタンを使う）、ランディングページ（ほぼ静的で、ニュースレターのフォームだけをアイランド化する）、ECの商品ページ（画像と説明は静的で、カート追加だけをアイランド化する）などです。

Googleは、Core Web Vitals（LCP、INP、CLS）を検索順位のシグナルとして使用しています。Islands Architectureによってこれらの指標を改善すると、検索順位にも直接的な効果があります。Islands Architectureを採用してLighthouseのモバイルスコアを55から92に改善したサイトは、ユーザー体験とSEOのメリットを同時に得られます。

マーケティングサイトやドキュメントサイトをNext.jsのReact SPAからAstroに移行したチームでは、一貫した傾向が報告されています。JavaScriptのペイロードは70～90%減少し、モバイルのパフォーマンススコアは20～40ポイント向上します。また、リクエストごとのサーバーサイドレンダリングのオーバーヘッドなしに静的ファイルをCDNから配信できるため、サーバーのホスティングコストも低下します。

Islands Architectureでは、なぜTotal Blocking Time（TBT）が大幅に減少するのでしょうか

Islands Architectureは、すべてのCore Web Vitalsを改善します。LCPはサーバーでレンダリングされたHTMLによって改善され、TBTはJavaScriptの量がインタラクティビティに比例するため低下します。CLSはサーバーでレンダリングされた安定したレイアウトによって減少し、INPは小さく処理対象が絞られたアイランドバンドルによって改善します。コンテンツ中心のページではLighthouseのスコアが大幅に向上します。このパターンは高度にインタラクティブなアプリには適していませんが、ブログ、ドキュメント、ランディングページ、ECサイトで力を発揮します。