クリティカルリクエストチェーンとは、互いに依存し合う一連のリクエストで、ページの読み込みにとって極めて重要なものを指します。これは Critical Rendering Path に従っており、リクエストが処理・実行される順序を決定します。
長いクリティカルリクエストチェーン、特に大きなリソースを含むものは、レンダリングをブロックするためページの読み込みを大きく遅くする可能性があります。これらのチェーンの数を減らすことで、レイテンシが下がり、ページの読み込み時間も短縮されます。
- クリティカルリクエストを連鎖させると、ウェブサイトの読み込みが遅くなり、応答時間も悪化します。
- すべての重要なリソースは HTML コードで指定された順序でレンダリングされるため、リソースのサイズやチェーンの長さによっては、訪問者の画面にコンテンツが最初に表示されるまでの時間が遅れる可能性があります。
このガイドでは、サイト上でクリティカルリクエストの連鎖を避けるためのさまざまな方法を紹介します。まずは基本から見ていきましょう。
クリティカルリクエストチェーンがウェブサイトの速度に与える影響
ページの読み込みプロセスの最初に、ブラウザは HTML を読み込み、優先度に基づいてクリティカルリクエストを処理します。通常は HTML が最初に優先され、次に CSS、画像、JavaScript の順で処理されます。
これらのクリティカルリクエストが長く連鎖すると、レイテンシが増え、読み込み時間が延びてウェブサイト全体の速度が低下します。総遅延時間は、最も長いクリティカルリクエストチェーン内のすべてのリソースをダウンロードするのに必要な時間の合計になります。
- これらのクリティカルリソースの数を減らすことで、サイトのパフォーマンスとユーザー体験を向上させることができます。
- これは、ダウンロードを遅らせたり、リソースを完全に削除したり、クリティカルパスの長さを短くしたりすることで実現できます。
クリティカルリクエストを理解する：Lighthouse の視点
クリティカルリクエストとは、ページのレンダリングに必要なあらゆるリソースを指します。Lighthouse はクリティカルリクエストを次のように定義しています：
- プリロードされていない
- レンダリングをブロックする
- 優先度が「中」「高」「非常に高い」のいずれかとして宣言されている。
これらのリクエストには、ブログ記事の見出しやヒーローバナーの画像のように、訪問者の画面にすぐ表示されることが期待される要素が含まれていることがよくあります。
GTmetrix によるクリティカルリクエスト分析
GTmetrix はクリティカルリクエストを次のように説明しています：
- レンダリングをブロックする
- プリロードされていない
- 優先度が「中」「高」「非常に高い」のいずれかとして宣言されている。
このようなチェーンが1つでもあると、GTmetrix は監査を開始します。その後、最も長いクリティカルリクエストチェーンを表示し、各リクエストの詳細と最大クリティカルパスレイテンシを示します。
クリティカルリクエストの連鎖を避けて修正する方法
リクエストの連鎖を避けてウェブサイトのパフォーマンスを改善するには、重要なリクエストをプリロードする方法を採用するとよいでしょう。この手法は、ページの可視部分のレンダリングに不可欠であるため、どのファイルをページ読み込みの早い段階で読み込むべきかを指定します。
効果的に実装する方法は次のとおりです：
注意： 変更を加える前にサイトのバックアップを取ることをおすすめします。何か問題が起きた場合でも、サイトを以前の状態にすばやく復元できます*。WP Staging を使えば、簡単に自動バックアップを取得できます。詳しくはバックアップと復元のガイドをご覧ください。*
重要なリクエストをプリロードする
ページの読み込みに影響する最も重要なリソースを特定します。これには CSS、JavaScript、フォント、ファーストビューの画像などが含まれることが多いです。
HTML の <head> セクションで rel= "preload" 属性を使用し、ブラウザにこれらのリソースを早めに読み込むよう指示します。これは、レンダリングをブロックする CSS や JavaScript などのリソースにとって特に重要です。
as 属性を使ってプリロードするコンテンツの種類を正しく指定します（たとえば JavaScript には as= "script"）。これにより、ブラウザはこれらのリソースを効果的に優先付けできます。
プラン B：WP Rocket を使ってプリロードする
よりシンプルなプラグインベースのアプローチを好む場合は、重要なリクエストのプリロードを自動化するのに WP Rocket が強くおすすめできるツールです。
WP Rocket を使うと、フォントやその他のクリティカルなリソースを自分のドメインから直接プリロードできるため、これらのリソースが素早く読み込まれ、レンダリングのブロックを減らすことができます。
さらに WP Rocket は、CSS の配信を最適化する機能を提供しており、未使用の CSS を削除したり CSS を非同期で読み込んだりするオプションも備えています。これにより、レンダリングをブロックする CSS の影響を減らし、サイトのパフォーマンスをさらに向上させます。
クリティカルリソースの数を減らす
ファーストビューのコンテンツに必要な CSS と JavaScript を最小限にすることで、サイトを高速化しましょう。クリティカルでない CSS や JavaScript の読み込みを遅らせたり、完全に削除したりして、読み込みを最適化します。この戦略により、ブラウザは未使用の CSS や JS などの不要なリソースを避け、重要なコンテンツをより速く読み込むことができます。
WP Rocket プラグインを使ってサイトのクリティカルリソースの数を減らすには、以下の手順に従って "File Optimization" タブで特定の最適化オプションを有効にしてください：
- Minify CSS Files：このオプションをオンにすると、不要な空白やコメントを削除して CSS ファイルを圧縮できます。ファイルサイズが減り、読み込みが高速化されます。
- Optimize CSS Delivery：このオプションを選ぶと、サイト上のレンダリングをブロックする CSS を排除でき、ページのレンダリングが速くなります。なお、CSS 最適化設定で選択できる方法は1つだけです。
- Minify JavaScript Files：このオプションを有効にすると、空白やコメントを削除して JavaScript ファイルを圧縮できます。
- Combine JavaScript Files：サイトが HTTP/2 を使用していない場合は、内部および外部の JavaScript ファイルを結合して HTTP リクエストを減らすことを検討してください。
- Load JavaScript Deferred：このオプションをオンにすると、HTML の解析が完了するまで JavaScript ファイルの読み込みを遅らせることができ、読み込み時間を大きく改善できます。
‘font-display‘ を使ってリクエストの連鎖を避ける
リクエストの連鎖を避けてサイトのパフォーマンスを向上させるには、font-display プロパティを使って、読み込み中のウェブフォントの表示方法を制御できます。使用できる手順と値は次のとおりです：
font-display の値を定義する：
- Auto：ブラウザのデフォルト戦略を使用します。
- Block：フォントが読み込まれるまで、非表示のプレースホルダーを表示します。
- Swap：ウェブフォントが読み込まれるまで代替フォントを使用し、その後切り替えます。
- Fallback：テキストを短時間隠してから、ウェブフォントが読み込まれるまで代替フォントを使用します。
- Optional：fallback と似ていますが、ブラウザがウェブフォントを使用しないと判断することもあります。
ほとんどのモダンブラウザでは、font-display: swap; を使用することが推奨されます。これは Flash of Invisible Text (FOIT) を防ぐためです。
- font-display の実装：CSS の @font-face ルールに font-display プロパティを追加します：
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- フォントのプリロード：HTML の
<head>内で<link rel="preload">タグを使って、レンダリングの早い段階でフォントが読み込まれるようにします：
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">WP Rocket を使ってフォントをプリロードする
フォントを素早く読み込むことは、サイト上のレイアウトシフトを防ぐうえで重要です。WP Rocket は人気のある WordPress プラグインで、これに役立ちます。フォントをプリロードする方法は次のとおりです：
"Preload" タブをクリックして、フォントのプリロードに関連する設定にアクセスします。
下にスクロールして "Preload Fonts" セクションを見つけます。先ほど特定したフォントの URL を所定のフィールドに貼り付け、各 URL が新しい行になるようにします。その後、"Save Changes" ボタンをクリックします。
WP Rocket を使ってフォントをプリロードすると、サイトの読み込みがよりスムーズになり、CLS を低減してユーザー体験を向上させることができます。
まとめ
- クリティカルチェーンリクエストの影響を理解し、軽減することは、サイトのパフォーマンスを向上させるうえで欠かせません。
- これらの問題に対処することで、読み込み速度を大幅に向上させ、よりスムーズで反応の良いユーザー体験を提供できます。
- これはユーザー満足度を高めるだけでなく、SEO ランキングにも好影響を与え、検索エンジンからの評価を高めることにつながります。
関連記事
- WordPress の「Sidebar Not Appearing」エラーを修正する方法
- なぜ WordPress は遅いのか + その解決方法
- なぜ WordPress にデータバックアップと災害復旧が必要なのか？
- WordPress データベースを修復・最適化する方法
- WordPress で変更を元に戻す方法（リビジョン、自動保存、スナップショット）
