リクエスト段階

• HTTP/2の有効化
• マルチプレクス化によりTCP接続数の制限を回避。
• ヘッダー圧縮で通信帯域を節約。
• バイナリフレーミングにより通信効率を向上。
• HTTPキャッシュの活用
• ExpiresとCache-Controlによる強制キャッシュの設定。
• Last-Modified/If-Modified-Sinceによる条件付きキャッシュの利用。
• Gzip圧縮の適用
• 重要なリソースの転送データ量を削減。
• リクエストヘッダーのサイズ縮小
• 不要なCookie情報を最小限に抑える。
• CNDの導入
• RTT時間を短縮し、リソース取得を高速化。
• ドメイン分割
• 複数のドメインにリソースを分散し、TCP接続数を拡張。
• HTTPリクエスト数の削減
• CSSやJavaScriptは必要に応じて内包または結合する。
• 画像はスプライト化、小さな画像はBase64エンコードする。
• CSSの@importは避ける。
• リダイレクトの回避
• HTML文書全体の送信遅延を防ぐ。
• DNSプリフェッチ

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="http://example.com">

• ドメイン事前接続

<link rel="preconnect" href="http://example.com">

読み込み段階

• リソースの圧縮
• フロントエンドリソースを圧縮する。
• 読み込みタイミングの調整
• JavaScriptは非同期読み込み（defer/async）で実行。
• 読み込み戦略
• SPAアプリではルートごとの遅延ロードを採用。
• CSSはメディアクエリで状況に応じて読み込み。
• 画像は遅延読み込みを実施。
• プリフェッチ

<link rel="prefetch" href="image.png">

• プリロード

<link rel="preload" href="image.png">

描画段階

• プリレンダリング

<link rel="prerender" href="image.png">

• iframeの使用を避ける
• iframeは別プロセスを起動し、リソースを消費する。
• HTMLの最適化
• HTMLタグのネストを控えめにし、パース負荷を軽減。
• 初期表示用HTMLは小さく、本体は動的に挿入。
• CSSの最適化
• CSSファイルはhead要素内に配置し、CSSOMを先に構築。
• CSSセレクタの階層を浅くし、マッチングコストを削減。
• IDとクラスセレクタを積極的に使用。
• ワイルドカードセレクタは避け、マッチ速度を向上。
• JavaScriptの最適化
• JavaScriptはbody末尾に配置し、DOM構築を妨げない。
• bodyの中間にscriptタグを挿入しない。
• 非同期ロードを設定し、defer/asyncを使用。

実行段階

• CSS側での対策
• 画像に明示的なサイズを指定し、再レイアウトを防ぐ。
• 絶対配置を活用し、文書フローから除外して再描画を抑制。
• 合成プロパティ（will-change / 3D変換）を活用し、別レイヤーに分離。
• 合成レイヤーはメインスレッドを占有せず、効率的。
• 可能であればCSSで実装し、JSの使用を控える。
• will-changeを使用時はz-indexを設定し、不要なレイヤー作成を防ぐ。
• JavaScript側での対策
• 非同期処理によりメインスレッドの占有を削減（タイマー/Web Worker）。
• thisが影響されない場合、頻繁にアクセスされるオブジェクトを変数に格納。
• 深層オブジェクトへのアクセスを避けて、読み取り速度を向上。
• ローカル変数の使用を適切に行い、スコープの越えを抑える。
• for...inループを避けて、プロトタイプチェーンの走査を防ぐ。
• イベント委譲により、メモリ使用量を低減。
• クロージャの使用には注意し、withやevalは避ける。
• 型変換を避けることで条件判定の処理を軽減。
• 条件分岐が多い場合はswitch文に置き換え。
• ステートメント数を最小限に抑え、宣言の重複を避ける。
• ループ条件を簡略化し、処理を効率化。
• 文字列連結は避け、一時文字列の生成を抑制。
• 文字列結合時に変数を左側に配置。
• 配列のjoinメソッドは他の文字列結合より遅い。
• 文字列のconcatメソッドは単純な+や+=より遅い。
• DOM操作に関する最適化
• 新しいAPIを旧APIよりも優先的に使用。
• IDやクラスセレクタでDOMを取得。
• styleプロパティによるレイアウト変更を避けて再レイアウトを防ぐ。
• 強制的な同期レイアウト（DOM変更後即座に読み出し）を避ける。
• DOMコレクション操作はコストが高いため、配列に変換して処理。
• DOM情報のキャッシュを行い、一括更新を行う。
• 頻繁に変更されるDOMはposition:absoluteを活用。
• 操作が集中的なDOMはdisplay:none → 操作 → display:blockの順序。
• 大量のDOM操作にはdocumentFragmentを活用。
• Web APIの最適化
• アニメーション実装にはrequestAnimationFrameを使用。
• StorageやIndexDBを適切に活用し、不要なAjaxリクエストを削減。
• Web Workerを用いてDOMに関係しない処理を分離。
• サーバ状態を変更しないAjaxリクエストはGETメソッドを使用。