ウェブサイトパフォーマンス
brand-guideを読み込み（速度修正によってブランドの見た目が変わらないようにするため）、website-change-safetyの手順に従ってください。
方法
- PageSpeed Insightsモバイルでベースラインを取得します。ページごとに2～3回実行し、フィールドデータも追加します。LCP要素を記録します。
- レポートから原因を見つけます：長時間タスク、起動時間/サードパーティの概要、レンダリングブロックリクエスト、LCPの内訳（読み込み遅延とレンダリング遅延）、DOMサイズ、強制リフロー。
- 一度に1つの原因を修正し、再度測定し、効果があったものだけを維持します。
- 可能であれば、公開前にローカルでA/Bテストを行います。リクエストインターセプトを使用してライブページに対して新しいJS/HTML/CSSを提供し、両方のバージョンを同じ方法で提供します（非圧縮のローカルファイルとgzip圧縮されたライブファイルでは、シミュレーションのタイミングが歪みます）。メインスレッド時間、DOMサイズ、スタイル/レイアウト時間を比較します。
実際にスコアを改善した修正（まずはこれらを確認）
サードパーティとプラットフォームの負荷（通常これが最大）
- 削除後も読み込みを続けるアプリ。 残っているページビルダーウィジェットとスクリプトエントリを削除します。一部のプラットフォームでは、アプリが削除された後も統合機能を注入し続けます（例：50以上のファイルからなるビジュアルエディタランタイム）。チャネル/ストアフロントレベルの「無効化」スイッチを探すか、プラットフォームサポートに問い合わせてください。
- すべてのページではなく、オンデマンドで読み込む： 動画プレーヤー（ポスター画像と再生ボタンを表示し、クリック時にiframeを作成）、CAPTCHA（フォームが開いたときに読み込む）、チャットウィジェット、ロイヤルティ/リワードウィジェット（必要なページのみ）、折り畳みの下にあるレビューウィジェット。
- ページビルダーで追加された埋め込み動画ブロックは、テーマ側で遅延読み込みできません。これらの動画を、クリック読み込み用のフェサードを使用するテーマ独自の動画エリアに移動します。
- 重複： 2つのアナリティクスライブラリ、同じタグが2回、古いピクセルと新しいピクセル。
- 所有者の承諾なしに、広告/アナリティクスタグの読み込みをインタラクションまで遅延させないでください。データが変わってしまいます。
読み込み時にJavaScriptが過剰に動作している
- カルーセル/スライダー： デスクトップファーストのスライダー設定では、多くの場合、デスクトップレイアウトを構築した後、スマートフォン用に再構築します。モバイルファーストの設定に切り替えてください。「無限/ループ」モードは、すべてのスライドを2～3倍複製します（数百の余分な要素）。必要な場所以外ではループをオフにしてください。最初の画面より下に表示されるスライダーは、ビューポートに近づいた時だけ初期化します（IntersectionObserver）。CSSで初期化前の行を同じ高さで表示し、ジャンプしないようにします。
- ページビルダーとプラグイン（特にWordPress/Wix/Squarespace）：各プラグインは独自のCSS/JSをすべてのページに追加する可能性があります。使用していないものを無効にし、残りは必要な場所でのみ読み込むようにします。
- 隠れた重複マークアップ： 例：商品一覧ページでグリッドと非表示のリストビューの両方をレンダリングしている場合。1つにまとめてください。
- 残っているデバッグログや、まだ実行されているデッドコードパスを削除します。
Largest Contentful Paint（LCP）
- 実際のLCP要素を特定します。CSSの背景画像の場合、ブラウザはそれを遅く検出します。そのページにのみ、CSSが解決するURLとバイト単位で同一のURLで
<link rel="preload" as="image" fetchpriority="high">を追加します（そうしないと2回ダウンロードされます）。 - 最初に表示される画像の行（例：2列のスマートフォングリッドでは2枚）のみに
fetchpriority="high"を設定します。優先度の高い画像が多すぎると、実際のLCP画像と帯域幅が分散されます。 - LCP画像は遅延読み込み（lazy-load）しないでください。折り畳みより下のすべての画像は遅延読み込みします。
- プラットフォームが既に提供している画像形式を確認します（多くのCDNは自動的にWebP/AVIFに変換します）。画像を再保存しても効果がない場合があります。大きな効果が得られるのは、サイズが大きすぎる元画像と間違った
sizes属性です。
First Paint / レンダリングブロック
- テーマのメインスタイルシートが通常ボトルネックです。ページ固有のCSSを分割するか、クリティカルCSSをインライン化できますが、それは大規模でリスクの高いプロジェクトです。提案は行いますが、すり込まないでください。
<head>内の追加のレンダリングブロックスタイルシートや同期スクリプト（多くの場合アプリによって注入される）は、遅延の原因となります。- フォント：
font-displayの設定は意図的に行ってください（アイコンフォントにはblock、テキストフォントは、フォールバックのメトリクスがレイアウトシフトを避けるのに十分近い場合にのみswapが使用可能です）。
レイアウトシフト
- 画像（width/height）、埋め込み（aspect-ratioボックス）、後から表示されるバナーやウィジェットのためにスペースを予約します。
- JavaScriptで初期化されるものは、同じサイズの初期化前CSSが必要です。
レポート
ページごとの改善前/改善後の数値（範囲で）、フィールドデータの状況、変更内容、そして所有者の判断が必要な残りの項目（サードパーティのトレードオフ）を報告します。実験室のスコアは変動する可能性があること、傾向とフィールドデータが1回の実行よりも重要であることを伝えてください。