ステータス:DTCブランド設計・CRO・グロース顧問を受付中
N
NAIFDTC
アーキテクチャ・ホワイトペーパー•Naif•

コアウェブバイタル100/100を目指すゼロJS Webアプリケーションの設計

Islandsアーキテクチャと選択的ハイドレーションを深掘り。Webアプリケーションにおける最終的な最適化とは、JavaScriptを少なく出荷することこそ最良の最適化になる理由。

コアウェブバイタル100/100を目指すゼロJS Webアプリケーションの設計

シングルページアプリ(SPA)が現代の性能を裏切っている理由

過去10年、WebエンジニアリングはクライアントサイドのJavaScriptフレームワークに強く依存してきました。開発者体験は良好ですが、そのかわりに重いハイドレーション税、膨らんだバンドルサイズ、そしてTime-to-First-Byte(TTFB)の悪化を持ち込みます。

Islandsアーキテクチャのパラダイム

Astroは現代の Islandsアーキテクチャ を切り拓きました。

  1. デフォルトで、ページはビルド時に100%純セマンティックなHTMLとCSSとしてプリレンダリングされます。
  2. JavaScriptはビルド出力から完全に除去されます。
  3. 特定の動的なウィジェット(例:インタラクティブなフィルタバー、検索のオートコンプリート、問い合わせフォーム)だけを client:idle や client:visible で宣言します。

測定可能な結果

  • ペイロード90%減:初期HTMLペイロードが480KBから24KBへ。
  • ハイドレーション遅延ゼロ:メインスレッドのCPUアイドル時間が300ms以上改善し、実環境で4Gモバイルを使う端末でもINPが30ms未満に収まります。
N
Naif
フルスタックソフトウェアエンジニア & サーバーレスアーキテクト

サブ100msのJamstackプラットフォーム、ゼロJSのIslandsアーキテクチャ、Cloudflare Edgeでのクラウドコスト最適化を専門としています。

私と仕事する →