Webサイトは、しばしば間違った順番で高速化されます。誰かが最適化プラグインをインストールし、すべてのスイッチを有効にしてから、なぜフォームが動かなくなったのかを調べ始めるのです。正しい順番は、測定、仮説、1つの変更、機能確認、そして再測定です。
以前のバージョンでは、他者のスクリプトをローカルでプロキシしたり、AMPやPWAを一般的に導入したりするなど、現在は推奨していない方法も説明していました。これらは検証環境では部分的な改善をもたらしましたが、古いコードによるリスク、更新の破損、そしてより複雑な保守を招きました。現代のWebサイトは、主要なバージョン自体で高速であるべきです。
現在測定すべきもの
Core Web Vitalsでは、Googleは3つの安定した指標を使用しています。
- LCP：主要コンテンツの読み込み。良好な値は 2.5 秒以下です。
- INP：操作への応答。良好な値は 200 ミリ秒未満です。
- CLS：予期しないレイアウトシフト。良好な値は 0.1 以下です。
しきい値は 75 パーセンタイルに適用され、公式のGoogle検索におけるCore Web Vitalsの概要にまとめられています。Search ConsoleやCrUXで実際の訪問者から得られる結果は、私のノートパソコンで行った1回の検証テストよりも優先されます。
検証ツールも依然として重要です。ウォーターフォール、メインスレッド、未使用コード、そして具体的な修正候補を示してくれます。フィールドデータは問題が存在することを示し、検証環境はその理由を説明するのに役立ちます。
まず問題の範囲を定義する
- モバイルとデスクトップを比較します。
- テンプレートを分けます：ホームページ、記事、サービス、一覧、フォーム、オンラインショップ。
- 通信速度の速い国と遅い国、デバイス、トラフィックソースを確認します。
- フィールドデータが悪いURLグループを見つけます。
- 代表的なページについて、再現可能な検証トレースを取得します。
ホームページが1つ速いからといって、Webサイト全体が速いとは限りません。古いスマートフォンでの遅い訪問が1件あったからといって、システム全体を書き直す必要があるわけでもありません。
最も一般的に効果のある改善
1。サーバーとHTML
最初の1バイトまでの時間を測定し、DNS、接続、サーバー待機、リダイレクトに分解します。長い待ち時間は、ホスティング、データベース、キャッシュされていないページ、遅いAPI、またはリダイレクトチェーンが原因で発生することがあります。公開コンテンツには適切なページキャッシュを有効にし、意味がある場合はオブジェクトキャッシュも使用します。ログインユーザー、カート、パーソナライズされたコンテンツは、キャッシュから正しく除外してください。
2。メイン画像
LCPは、多くの場合ヒーロー画像です。表示サイズに合ったサイズを配信し、srcset、圧縮、最新のWebPまたはAVIFを、適切なフォールバックとともに使用します。メイン画像を遅延読み込みしないでください。最初のビューポートより下にある画像を遅延読み込みします。画像の幅と高さを設定して、ブラウザーがスペースを確保できるようにし、CLSを低く保ちます。
3。CSSとフォント
未使用のスタイルは慎重に削除し、クリティカルCSSを小さく保ちます。フォントは必要なウェイトと文字セットに限定し、ローカルファイルを長期間キャッシュして、本当に早い段階で必要なフォントだけをプリロードします。フォントを10個プリロードしても、別のキューが生まれるだけです。
4。JavaScriptとインタラクション
大きなバンドルを分割し、重要でないコードを遅延させ、必要な場合かつ同意が得られる場合にのみサードパーティーを読み込みます。asyncとdeferは魔法ではありません。スクリプトの順序と依存関係をテストしてください。メインスレッドの長いタスクを分割し、クリック操作をアナリティクスの処理待ちにしないでください。
5。サードパーティー
チャット、ヒートマップ、広告ピクセル、動画、A/Bテストツールは、ネットワークリクエストとプロセッサーの処理を増やします。すべてのスクリプトには担当者とビジネス上の理由が必要です。インストールガイドが短いからといって、ヘッダーで同期的に読み込まないでください。アナリティクスはGoogle Tag Managerで管理できますが、コンテナ自体がパフォーマンスを救ってくれるわけではありません。
WordPress：レイヤーを減らし、制御を強化する
WordPressのドキュメントでは、ホスティング、プラグインの数と品質、画像、キャッシュ、配信ネットワークを通じてパフォーマンスに取り組むことを推奨しています。最適化の概要と、キャッシュに関する個別の説明をお読みください。
- まずステージング環境でWordPress、PHP、テーマ、プラグインを更新します。
- 使用していないプラグインや、重複するキャッシュ・縮小化ツールを削除します。
- データベースクエリと遅い外部呼び出しをプロファイリングします。
- データベースのメンテナンスを計画します。ただし、リビジョンやメタデータを無差別に削除しないでください。
- 最適化のたびに、フォーム、検索、ログイン、購入フローをテストします。
適切なアドオン選びについては、最適なWordPressプラグインで説明しています。
やってはいけないこと
- スコアのためだけに、他者のアナリティクスや広告スクリプトをサーバーへダウンロードしないでください。セキュリティや機能の更新を失う可能性があります。
- 名前をバージョン管理していない変更ファイルに、1年間のキャッシュを設定しないでください。
- すべてのテンプレートをテストせずに、自動レポートからCSSやJavaScriptを削除しないでください。
- 成功をLighthouseだけで判断しないでください。Googleは、Core Web Vitalsが良好であるだけでは、高いランキングや優れたユーザー体験が保証されないと明確に述べています。
- 顧客が必要とするコンテンツや機能を隠して、Webサイトを高速化しないでください。
4週間の計画
- 第 1 週：フィールドデータのベースライン、検証測定、テンプレート一覧。
- 第 2 週：サーバー、キャッシュ、リダイレクト、最大のLCPリソース。
- 第 3 週：画像、フォント、CSS、JavaScript、サードパーティー。
- 第 4 週：回帰テスト、新しい測定、監視、ドキュメント。
変更ごとに、日付、URL、変更前後の指標、機能への影響、ロールバック方法を記録します。また、コンバージョン率、フォーム完了率、エラーも追跡してください。速くなったページの売上が減るなら、最適化は完了していません。
まず、テクニカル監査とGA4で、Webサイトの技術的な基盤とアナリティクスを確認しましょう。影響とコストに基づいて修正の優先順位を付ける必要がある場合は、お問い合わせからご連絡ください。