AI時代のWebパフォーマンス・エンジニアリング

序文

第Ⅰ部　パフォーマンスはユーザー体験である

1章　パフォーマンス＝ユーザー体験である理由
    1.1　遅さの代償：第一印象とユーザー満足度
        1.1.1　待ち時間の心理
        1.1.2　UXパフォーマンス評価：主要メトリクス
    1.2　すべてのユーザーのためのパフォーマンス：デバイスとネットワーク環境を問わないUXの確保
    1.3　パフォーマンスファースト設計
        1.3.1　RAILモデル：ユーザー中心のパフォーマンスフレームワーク
        1.3.2　最初からパフォーマンスを考慮した設計
        1.3.3　ユーザーがほしい情報を真っ先に表示すること

2章　重要なものを測る：ユーザー中心のパフォーマンスに不可欠なメトリクス
    2.1　ラボテストと実測データ
    2.2　CWV：主要メトリクス
        2.2.1　Largest Contentful Paint（LCP）：コンテンツの高速表示
        2.2.2　First Input Delay（FID）とInteraction to Next Paint（INP）：反応の準備
        2.2.3　Cumulative Layout Shift（CLS）：視覚的安定性
        2.2.4　その他の重要なメトリクス
    2.3　レポートの解釈と対応
    2.4　ラボツール
        2.4.1　Lighthouse：パフォーマンス監査ツール
        2.4.2　Chrome DevTools パフォーマンスパネル：AI支援による詳細診断
        2.4.3　WebPageTest：現実的なテストと高度な分析
    2.5　フィールドツール
        2.5.1　web-vitals.jsによる実環境でのCWV計測
        2.5.2　CrUXと外部データの活用
        2.5.3　Web Vitalsを超えたRUM
        2.5.4　RUMデータを活用した改善推進
    2.6　パフォーマンス予算とアラートの設定
    2.7　ケーススタディ：実践における継続的監視
    2.8　まとめ

3章　AI生成のコードとパフォーマンスの逆説
    3.1　AIの出力：正しいけれど最適化されていない
    3.2　AI生成のコードの隠れたコスト
        3.2.1　品質とパフォーマンスに対する責任の所在
        3.2.2　AI支援による最適化：これは未来の姿か？
        3.2.3　全体的なパフォーマンス環境への影響
        3.2.4　AI時代における人間の役割
    3.3　AIとパフォーマンスに関するまとめ

第Ⅱ部　AI時代のWebパフォーマンス最適化

4章　AI生成フロントエンドの最適化
    4.1　CWVとAI生成のコード
    4.2　AI生成 React コンポーネントにおける一般的なパフォーマンス上の落とし穴
        4.2.1　レイアウト不安定性（CLSの悪化）
        4.2.2　肥大化したバンドルと遅い読み込み（悪いLCP）
        4.2.3　メインスレッドのボトルネックとカクつく操作（低いINP）
        4.2.4　見過ごされがちなアクセシビリティとUX フィードバックループ
    4.3　AI生成のコンポーネントの改善
    4.4　パフォーマンスプロファイリングと新たなAI支援開発ツール
    4.5　実機でのテスト：究極のバリデーション手段
    4.6　品質を維持しつつAIの処理速度を取り入れる

5章　ブラウザ内部：ページの読み込みとレンダリングの仕組み
    5.1　ブラウザの基本
        5.1.1　マルチプロセスアーキテクチャとメインスレッド
        5.1.2　レンダリングパイプライン
        5.1.3　プリロードスキャナーとリソースの優先順位付け
        5.1.4　スクリプトとイベントループ
        5.1.5　RAILモデル
        5.1.6　レンダリングパフォーマンスのボトルネック
    5.2　高度なブラウザ内部構造
        5.2.1　Chromeのメインスレッドタスクスケジューラとタスク優先度
        5.2.2　サーバーサイドレンダリング（SSR）とハイドレーション
        5.2.3　ネットワークスタックとリソースの読み込み
        5.2.4　まとめ：最適化されたロードのタイムライン
    5.3　まとめ

6章　パフォーマンス最適化に伴うトレードオフ
    6.1　異なるパフォーマンスメトリクスのバランスを取る
    6.2　客観的メトリクスと主観的認識
    6.3　よくあるトレードオフ
        6.3.1　バンドルサイズとネットワークオーバーヘッドのトレードオフ
        6.3.2　フレームワーク vs Vanilla JavaScript
        6.3.3　マイクロ最適化と保守性のトレードオフ
    6.4　パフォーマンス予算と文化
    6.5　最適化を止めるタイミングを知る
    6.6　まとめ

第Ⅲ部　JavaScriptを最適化する

7章　JavaScriptの代償
    7.1　制約を理解する
        7.1.1　デバイスパフォーマンス：CPU、メモリー、そしてモバイルギャップ
        7.1.2　ネットワーク制約：帯域幅と（とくに）遅延
        7.1.3　ブラウザのアーキテクチャ：メインスレッド、解析、実行
    7.2　JavaScript エンジン
        7.2.1　インタプリタからJITコンパイルへ：エンジンの進化
        7.2.2　バックグラウンドコンパイル、パーシング、GC
        7.2.3　エンジンの限界
    7.3　バックエンド JavaScriptのパフォーマンス
        7.3.1　Node.jsとイベントループ
        7.3.2　バックエンド固有の最適化
        7.3.3　監視と可観測性
    7.4　まとめ

第Ⅳ部　依存関係を管理し、品質を維持する

8章　サードパーティスクリプトの基礎知識
    8.1　サードパーティコードは至るところに存在する
    8.2　サードパーティスクリプトがパフォーマンスに影響する理由
    8.3　サードパーティスクリプトのパフォーマンスへの影響を測定する
        8.3.1　棚卸しと特定：主要なメトリクスと指標
        8.3.2　AIベースのサードパーティスクリプトに関する特別な考慮事項
        8.3.3　Lighthouse と Chrome DevTools
        8.3.4　WebPageTest（WPT）
    8.4　サードパーティ最適化の原則
        8.4.1　削除、削減、置換
        8.4.2　パフォーマンス予算で考える
        8.4.3　シフトレフト：全員の関与
        8.4.4　目標：高速かつ機能的

9章　サードパーティスクリプトの読み込み
    9.1　順序付けと優先順位付け
        9.1.1　重要なスクリプトの特定
        9.1.2　スクリプトタグのポジション
        9.1.3　ノンブロッキングスクリプト：asyncと defer
        9.1.4　重要なサードパーティスクリプトは早期に読み込む（ただし、早過ぎない程度に）
        9.1.5　スクリプト順序の維持
        9.1.6　リソースヒントで早期接続を確立する
        9.1.7　シーケンスのベストプラクティスのまとめ
    9.2　サードパーティコンテンツの遅延読み込み
        9.2.1　iframe向けのブラウザネイティブ遅延読み込み
        9.2.2　Intersection Observerによるカスタム遅延読み込み
        9.2.3　トレードオフ
        9.2.4　例：アナリティクススクリプトの遅延読み込み
    9.3　ファサードとクリック・トゥ・ロードパターン
        9.3.1　クリック・トゥ・ロードの実装
        9.3.2　トレードオフ
    9.4　条件付き読み込み
        9.4.1　パフォーマンスのためのデバイス検出
        9.4.2　ネットワーク環境に応じた読み込み
        9.4.3　トレードオフ
    9.5　まとめ

10章　サードパーティスクリプトのスケジューリングと最適化およびAIの役割
    10.1　サードパーティスクリプトのスケジューリング
        10.1.1　requestIdle Callback API
        10.1.2　loadイベント発生後、または最初のインタラクション後
        10.1.3　Idle Until Urgent（IUU）パターン
        10.1.4　ロングタスクの分割
        10.1.5　setTimeoutをフォールバック、または簡易オプションとして使用
    10.2　サードバーティスクリプトのオフロードとサンドボックス化
        10.2.1　Web Workers と Partytown
        10.2.2　iframe内でのサンドボックス化
        10.2.3　サーバー側でのサードパーティロジックの処理
    10.3　フレームワーク固有の最適化：Next.jsをはじめとする各種ツール
        10.3.1　Next.jsにおけるスクリプトコンポーネント
        10.3.2　他のフレームワークにおける最適化
    10.4　サイトタイプ別の最適化
        10.4.1　SPAとマルチページアプリケーション（MPA）におけるサードパーティスクリプトの扱い
        10.4.2　タグマネージャーのパフォーマンス調整
        10.4.3　WordPress およびコンテンツ管理システム（CMS）プラットフォーム
        10.4.4　ECサイト
    10.5　サードバーティスクリプト最適化におけるAIの役割

第Ⅴ部　Webパフォーマンスの未来

11章　パフォーマンス文化を築く
    11.1　パフォーマンスを機能として捉える
    11.2　チームの教育と能力強化
    11.3　パフォーマンスを常に意識させる 「チャンピオン」を置く
    11.4　CI/CDパイプラインとワークフローへのパフォーマンス統合
    11.5　パフォーマンス文化におけるAIの活用
    11.6　まとめ

12章　Webパフォーマンスの成功事例とその研究
    12.1　eコマースと小売におけるパフォーマンス改善事例
        12.1.1　楽天24：CWV ROIのためのA/Bテスト
        12.1.2　ボーダフォン：ランディングページの高速化で売上向上
        12.1.3　Shopifyのマーチャントストア：Sunday Citizen
        12.1.4　Shopifyのマーチャントストア：Carpe
        12.1.5　Ray-Ban：プリレンダリング
    12.2　ニュース・メディア：速度によるエンゲージメント向上
        12.2.1　テレグラフ・メディア・グループ
        12.2.2　エコノミック・タイムズ：CWVを大規模に導入する
        12.2.3　Yahoo!ニュース：CLS修正とエンゲージメントの相関関係
    12.3　旅行・宿泊予約体験の速度向上
        12.3.1　redBus：INP改善による売上向上
        12.3.2　Bookaway：静的なコンテンツでグローバルユーザーに対応
    12.4　金融・フィンテック：速度で信頼を構築する
        12.4.1　Financer.com：コンバージョンとSEOのためのWordPress処理速度アップ
    12.5　AIとパフォーマンス：新たな成功事例
        12.5.1　Vercel：大規模なAIによる画像最適化
        12.5.2　Cloudflare：パフォーマンス予測のための機械学習
        12.5.3　Google Chrome：Al支援型Speculation Rules
        12.5.4　AIコーディングアシスタント：パフォーマンスに関する教訓
        12.5.5　Shopify：販売者向けストア最適化のためのAI
    12.6　主なポイント
    12.7　まとめ

13章　AlとWebパフォーマンスの未来
    13.1　Web開発におけるAI革命のジレンマ
    13.2　AI時代の実践的戦略
    13.3　ストリーミングファーストのAIインタフェースとユーザー体験：新たなパフォーマンスパラダイム
    13.4　ストリーミングテキスト
        13.4.1　メトリクス
        13.4.2　パフォーマンス予算
        13.4.3　レンダリング手法
        13.4.4　トランスポート層の選択
        13.4.5　体感速度のパターン
    13.5　ストリーミングUIコンポーネント
        13.5.1　ストリーミングUIのメトリクス
        13.5.2　ストリーミングコンポーネントのレンダリング手法
        13.5.3　注意すべき障害モード
    13.6　ストリーミングコンテンツとメディア
        13.6.1　動的に拡張されるリストとフィード
        13.6.2　音声・動画ジェネレータまたはテキスト読み上げ（TTS）
        13.6.3　段階的に到着する画像
    13.7　負荷下でのスケジューリングとレスポンス
    13.8　ネットワークとサーバーパイプラインの考慮点
        13.8.1　コールドスタートペナルティーの削除
        13.8.2　バックプレッシャーの実装
        13.8.3　賢くキャッシュする
        13.8.4　チャンクを慎重に分割する
    13.9　ストリーミング環境におけるCWV
    13.10　ストリーミングシステムの可観測性とデバッグ
        13.10.1　パフォーマンスマークでストリーミングバスを計測する
        13.10.2　ストリームトレースビューを構築する
        13.10.3　ストールパターンのアラート
    13.11　アクセシビリティ
    13.12　国際化
    13.13　プライバシー
    13.14　安全性
    13.15　エネルギーとコストへの配慮
    13.16　推奨されるデザインパターン
    13.17　避けるべきアンチパターン
    13.18　本番環境向けの実践チェックリスト
    13.19　まとめ

索引