HTTPリクエストが多くなると、サイトの表示速度が低下することはご存知ですか？そのため、HTTPリクエストの数を減らし、読み込み方法を最適化すれば、サイトのパフォーマンスを改善することができます。
この記事では、WordPressサイトでHTTPリクエストを削減する方法をご紹介。
HTTPリクエストの基礎知識と重要性、そしてサイトのHTTPリクエストを分析する方法を見ていきます。
記事の最後では、HTTPリクエストを減らすために実践できるヒントも共有します。これは、GTmetrixで表示される推奨事項「Make Fewer HTTP Requests」（HTTPリクエストを減らしてください）はもちろん、Google PageSpeed Insightsの推奨事項「Avoid Chaining critical requests」（重要なリクエストの連鎖を避けてください）への解決策にもなります。
WordPressでHTTPリクエストを減らす方法について、動画での解説もご用意しています。
HTTPリクエストとは
ウェブサイトを構築するには、ページで表示するさまざまな画像ファイル、コンテンツの見た目を決めるCSSスタイルシート、そして機能を実装するためJavaScriptファイルなど、さまざまな「部品」が必要です。
訪問者のブラウザは、サイトにアクセスすると、そのページに必要なすべてのリソースをサーバーからダウンロードしなければなりません。このとき、リソースを取得するためにブラウザがサーバーに送信するのが「HTTPリクエスト」です。
わかりやすく表現するなら、「coolimage.pngファイルをください」や、「お問い合わせフォームプラグインのCSSスタイルシートが必要です」といったお願いのようなもので、サーバーはこれらのリクエストに対して、各ファイルを送信します。ちなみにこれは、「レスポンス」と呼ばれます。
その後、ブラウザが取得したファイルを使ってウェブページを組み立てます。実際にはもう少し複雑ですが、基本的にはこのような仕組みです。
HTTPは、Hypertext Transfer Protocolの略で、コンピュータ（訪問者のブラウザとウェブサーバー）の通信方法を意味します。
重要なのは、各要素に対してHTTPリクエストが個別に発生することです。例えば、ページに5つの画像ファイルがある場合、ブラウザは5件のHTTPリクエストを送信します。
同様に、サイトに4つのWordPressプラグインを実装していて、各プラグインに独自のCSSスタイルシートがある場合、ブラウザは各プラグインのスタイルシートに対して1つずつ、4件のHTTPリクエストを行います。
HTTPリクエストは少ない方が良い理由
一般に、サイトのHTTPリクエストが多ければ多いほど、読み込みは遅くなります。したがって、サイトの高速化には、サイトで必要になるHTTPリクエストの数を最適化し、削減することが不可欠です。
実際にはもっと複雑ですが、ブラウザは基本的に、すべてのHTTPリクエストに対するレスポンスデータを受け取って初めて、訪問者にウェブサイトを表示します（ただし、ブラウザに特定のファイルの読み込みを待つように指示する技もある）。
つまり、ページを表示するのに70件のHTTPリクエストが必要になる場合は、40件のHTTPリクエストが必要になるページに比べて、当然読み込みが遅くなります。
さらに、HTTPリクエストの中には、データ取得が終わるまで特定のHTTPリクエストを妨げるものも。
したがって、HTTPリクエストの数が少なくなれば、サイト速度が改善できます。
サイトのHTTPリクエスト数を確認・分析する方法
HTTPリクエストの数を減らせば、サイトが高速になることはわかりました。しかし、すべてのHTTPリクエストが常に同等であるとは限りません。というのも、リクエストによっては他のものよりも大きかったり、遅かったりする場合があります。
例えば、3MBの巨大な画像ファイルへのリクエストは、20KBの小さな画像へのリクエストよりもはるかに時間がかかります。
そのため、サイトを最大限に最適化するには、まずは大きくて読み込みの遅いHTTPリクエストに着目すると、より大きな効果を得ることができます。
サイトのHTTPリクエストを分析するには、ウォーターフォールチャートが便利です。
滝グラフは大体のスピードテストツールで確認できますが、おすすめはGTMetrixとPingdom。ブラウザの開発者ツールでもOKです。以下のスクリーンショットは、GTmetrixでのテスト結果例です。
URLを貼り付けると、上部に概要が表示されます。HTTPリクエスト数も表示されますが、ここでは個々のリクエストを確認することはできません。
個々のリクエストを確認するには、「Waterfall」タブに移動します。
このタブには、サイト上の各HTTPリクエスト一覧と、それぞれの所要時間が表示されます。
すると、このようにすべてのHTTPリクエストが同じではないことがわかります。例えば、839.3KBの画像には1.12秒かかるのに対し、57.6 KBの画像には87.5ミリ秒しかかかっていません。
また、サーバー上のプラグインのフォルダ名で検索すれば、使用しているWordPressプラグインからのHTTPリクエストも確認可能です。例えば、WooCommerceプラグインには、7件のHTTPリクエストがあります。
このように、使用しているプラグインが大量のHTTPリクエスト（特に読み込みの遅いもの）を生成していないかどうかを確認することができます。
WordPressサイトを最適化してHTTPリクエストを減らす方法
HTTPリクエストを減らすには、大きく分けて以下2つの方法があります。
- HTTPリクエストを削除する─不要なHTTPリクエストは削除してしまいましょう。例えば、独自のCSSとJavaScriptを読み込むプラグインで、特段必要でなければ、削除しまうのが賢明です。
- HTTPリクエストをまとめる─必要なHTTPリクエストは、1つのファイルにまとめましょう。例えば、6つの小さなCSSファイルを1つのCSSファイルにまとめれば、より高速に読み込むことができます（ただし、後述するHTTP/2ではこれが必ず適切であるとは限らない）。
まずは、HTTPリクエストの削除から始めて、それから残った必要なHTTPリクエストをまとめる方法を見ていきます。
1. 不要なWordPressプラグインを削除
先ほどのウォーターフォールチャートを利用して、プラグインからのHTTPリクエストを洗い出します。「plugins」で検索すれば、wp-content/pluginsフォルダから送信されたすべてのHTTPリクエストを表示することができます。
ファイル名の上にカーソルを置くと、どのプラグインからのリクエストなのかを確認することができます。以下は、スライダープラグインからのリクエストです。
このテストページにはスライダーが含まれていないにもかかわらず、Slider Revolutionが3件のHTTPリクエストを送信しています。
スライダーが必要でSlider Revolutionをインストールしている場合には、このまま維持することになりますが、例えば過去に一度スライダーをテストするためにインストールしただけなのであれば、必ず削除してください。
また、インストールしているプラグインにも目を通し、サイトに必要な機能やメリットを本当にもたらしている存在なのかも再検討したいところです。削除しても問題ない（特にHTTPリクエストを生成している）ものは、パフォーマンスを考慮し、削除することをおすすめします。
2. 重いプラグインは軽量なものに
不要なプラグインを削除したら、次に使用しているプラグインをより軽量な代替プラグインに置き換えることができるかを確認します。
例えば、SNSのシェアボタンをサイトに設置したいとします。便利な機能ですが、この手のプラグインの中には、大量のHTTPリクエストを生成するものがあります。
人気の高いAddThisプラグインは、6件のHTTPリクエストを生成します（外部リクエスト含む）。
NovaShareやGrow by MediaVineのようなより軽量なプラグインを代わりに使用することで、HTTPリクエストを減らすことができます。
3. サイト全体で不要なスクリプトを条件付きで読み込む
この時点で、サイトに必要のないプラグインはすべて削除できました。次に注目したいのは、サイトの特定の部分でのみ必要になるプラグインです。中には、特定のページのみで必要になるにもかかわらず、サイト全体でスクリプトを読み込むものがあります。
例えば、お問い合わせフォームの作成に便利なContact Form 7。このようなプラグインは、お問い合わせページのような特定のページだけで必要になることがほとんどです。ところが、Contact Form 7はサイトのすべてのページ、ブログ記事でもスクリプトを読み込みます。
別の例としては、支払い処理にだけWooCommerceを使用している場合。カートと決済ページでのみ使用したくても、WooCommerceはサイト全体にスクリプトを読み込みます。
これには、必要なページでだけプラグインを条件付きで読み込むという技を使います。例えば、Contact Form 7をお問い合わせページでだけ読み込み、それ以外の場所では無効にすることができます。
開発知識がない方は、Asset CleanUpやPerfmattersのようなプラグインを使用すれば、コーディングなしで実行可能です。Perfmattersを使用するには、まずスクリプトマネージャーを有効にします。その後スクリプトマネージャーを開いて、ページで読み込まれているすべてのスクリプトを表示し、不要なスクリプトを無効化していきます。
なお、必要なスクリプトを誤って無効にしてしまうと、問題が生じる可能性があるため注意してください。非常に効果的ですが、やや上級者向けの手法であることを念頭に置いてください。
操作に不安な方は、この作業は省略するか、開発者と協力して実行してください。
4. 不要な画像は削除（必要なものは最適化）
画像はウェブサイトをより使いやすく、魅力的なものにする重要なアセットです。
しかしそんなサイト上の画像にも、それぞれHTTPリクエストが必要になります。したがって、特に価値のない画像を使用している場合は削除して、HTTPリクエストを減らすのが得策です。
例えば、GIFアニメーションには本当に使用する価値があるのか。コンテンツに画像を追加する際には、そのメリットとデメリットを天秤にかけることが重要です。
最後に、残った画像はリサイズして圧縮すること。これはHTTPリクエストの削減に直接つながることはありませんが、リクエストのサイズを小さくすることで、読み込みを高速化することができます。
5. 画像と動画をレイジーロードする
レイジーロード（遅延読み込み）とは、ユーザーがコンテンツをスクロールダウンし始めるまで、非表示の画像、動画、iframeの読み込みを待つ手法です。
これらの要素の読み込みを必要時まで遅延することで、最初のページ読み込みで発生するHTTPリクエストの数を減らすことができます。
WordPress 5.5では、HTMLのloading属性を使用した画像の遅延読み込みがデフォルトになっています。その他のレイジーロード（動画ファイルなど）の実装方法についてはこちらをご覧ください。
6. カスタムフォントとシステムフォントを賢く使い分ける（アイコンフォントも）
カスタムフォントは、サイトデザインとユーザー体験の向上に役立ちますが、カスタムフォントも使用するたびにHTTPリクエストが必要になるため、使用には注意が必要です。
カスタムフォントの使用は、必要最低限にとどめましょう。例えば、記事のタイトルと本文に異なるフォントを使用しているなら、それが本当に効果的かどうかを検討してみてください。また、本当に5種類のカスタムフォントが必要なのか。3つはシステムフォントに置き換え、重要な2種類だけを使用するという手もあります。
Font AwesomeやIcoMoonなどのアイコンフォントも同様で、便利ですが複数使用する必要はないでしょう。1つのアイコンフォントに絞り、それをこだわって使用するのが賢明です。
さらに一歩進んで、サイトのフォントに関するHTTPリクエストを完全に排除したい場合には、システムフォントスタックを使用してみてください。デザインの柔軟性は欠けますが、サイトを表示するためだけにフォントファイルを読み込む必要がなくなります。
WordPressでフォントを変更する方法はこちらをご覧ください。
7. WordPressの絵文字機能は無効に
WordPressの絵文字機能は、デフォルトでHTTPリクエストを生成します。5.1KB程度のHTTPリクエストですが、このファイルは長年WordPressのパフォーマンスに関する課題となっていました。Kinstaでは、WordPressのパフォーマンスを重視し、WordPressの絵文字機能を無効にすることを推奨しています。
一番簡単な方法は、無料のDisable Emojis（GDPR準拠）プラグインを使用すること。その他の方法は、上記解説記事でご紹介しています。
これで、HTTPリクエストを1件減らして、絵文字もそのまま使用することができます😃
8. サードパーティのHTTPリクエストを減らす（なくす）
ここまでは、主にWordPressサイトのサーバー上のファイルに対するHTTPリクエストに焦点を当ててきましたが、訪問者のブラウザは外部サーバーからもファイルをリクエストしているかもしれません。
外部へのHTTPリクエストは、外部サーバーの速度に影響を受けるため厄介です。
これには、以下のようなものがあります。
- Google アナリティクス─トラッキングスクリプトは、Googleのサーバーでホストされているが、訪問者のブラウザはファイルをダウンロードしなければならない。
- YouTube動画の埋め込み─YouTubeサーバーへのHTTPリクエストが大量に生成される。
- サードパーティの広告サービス─広告配信に関連する外部へのリクエストが大量に生成される。
- Google Fonts（GoogleのCDN上）─フォントファイルを読み込むために、GoogleのサーバーへのHTTPリクエストが発生する。
このような外部へのHTTPリクエストには、先ほどと同じ方法を適用することができます。
例えば、先ほどのAddThisのように、外部リクエストを生成しているプラグインは、代替プラグインを探して置き換えましょう。
YouTube動画は遅延読み込みし、最初のページ読み込みをサムネイル画像に置き換えることができます。これによって、訪問者が動画を再生しようとするまで、HTTPリクエストの発生を遅らせることができます。
Google アナリティクスやFacebookピクセルのような必要な外部リクエストについては、スクリプトをローカルでホストするという手があります。
例えば、WP Rocketには、Google アナリティクスやFacebookピクセルをローカルでホストするアドオンが組み込まれています。また、CAOS（Complete Analytics Optimization Suite）にも同じ機能があります。
関連して、以下の記事も役に立つはずです。
9. CSSスプライトを使って画像を読み込む
ここまでのヒントを実践すれば、HTTPリクエストの数はかなり削減できています。続いては、必要なHTTPリクエストをまとめます。まずは画像から始めましょう。
サイトの画像を最適化するもうひとつの方法は、複数の画像を1つの画像ファイルにまとめること。そしてCSSを使用し、その画像ファイルの一部分だけを必要な場所に表示します。この手法は、CSSスプライトと呼ばれます。
CSSスプライトには、以下のような欠点があるため、ロゴのバリエーションやアイコンのような装飾的な画像に使用するのが理想的です。
- SEO─画像を1つの画像ファイルにまとめるため、Google 検索で個々の画像を上位に表示することができない。
- アクセシビリティ─画像にaltテキストを追加することができなくなるため、音声読み上げソフトを使用しているユーザーが画像を理解することができなくなる（ただしこれには回避策あり）。
より理解しやすいよう、AmazonのCSSスプライトファイルを例に挙げてみます。以下のように、ロゴのバリエーションとアイコンが多数含まれており、CSSを使用して、画像ファイルの関連する部分だけが、それぞれの場所に表示されるようにしています。
残念ながら、CSSスプライト用のWordPressプラグインはありませんが、CSSスプライトツールを使用することができます。手順は以下の通り。
- まとめたい画像をツールにアップロード
- アップロードされた各画像のCSSコードを含む画像ファイルが生成される
- 画像ファイルをWordPressサイトにアップロード
- CSSコードを使用して画像をコンテンツに表示─これでCSSによって、画像ファイルの関連する部分だけが自動的に選択されます。
10. CSSとJavaScriptファイルを結合する
WordPressテーマとプラグインの存在によって、おそらくサイトには複数のCSSスタイルシートとJavaScriptファイルが読み込まれています。
この個別のリクエストを減らすために、ファイル/スタイルシートを1つにまとめることができます。これは、ファイル結合またはファイル連結などと呼ばれます。
多くのWordPressキャッシュプラグインには、CSSファイルとJavaScriptファイルを結合する機能があります。例えば、Kinstaで使用可能なWP Rocketでは、数回のクリックでファイルをまとめることができます。
WP Rocketの「File Optimization」タブで、最小化（Minify）を有効にしてから、ファイルを結合します。
WP Rocketの使い方の詳細はこちらをご覧ください。
Autoptimizeを使用して、CSSとJavaScriptファイルを結合することも可能です。インストール後、「設定」＞「Autoptimize」に移動し、以下を設定します。
- JSファイルを連結する
- CSSファイルを連結する
Autoptimizeのより詳しい情報はこちらをご覧ください。
なお、Kinstaのお客様にとっては、HTTP/2サポートにより、このファイル結合にあまりメリットがない可能性があります。というのも、HTTP/2は、複数の小さなファイルをより効率的に転送するように設計されているため、1つの大きなCSS/JSファイルと複数の小さなファイルの転送に大差がありません。
Kinstaでサイトを運営している場合、基本的にこの対策は不要です。MyKinstaのコード圧縮機能を使用すれば、ワンクリックでCSSとJavaScriptの自動圧縮を設定することができ、サイト全体の最適化につながります。
サイトによっては効果がある場合もあるため、テストしてみることをお勧めしますが、実際の読み込み時間に結果が表れない可能性もあります。
また、GTmetrixのようなパフォーマンステストツールは、まだHTTP/2に対応しておらず、「Make Fewer HTTP Requests」という推奨メッセージが表示され、スコアが下がることがあります。パフォーマンススコアは実際のページ読み込み時間ほど重要ではないため、これはあまり気にしなくてOKです。
11. レンダリングを妨げるJavaScriptを遅延読み込みする
レンダリングを妨げるJavaScriptの読み込みを遅らせることは、HTTPリクエスト削減にはつながりませんが、読み込み方法の最適化につながるため、結果として同じ効果をもたらします。
また、Google PageSpeed InsightsまたはLighthouseの「Avoid Chaining critical requests」という推奨事項の解決にも役立ちます。
特定のファイルへのリクエストの読み込みを遅らせたり、非同期で読み込んだりすることで、重要でないリソースが可視部分を素早く読み込むために必要なリソースを妨げることを防ぎます。
このレンダリングに関する詳細はこちらをご覧ください。
WordPressでレンダリングを妨げるリソースを排除する方法はこちらでご紹介しています。
HTTPリクエスト削減に役立つWordPressプラグイン
HTTPリクエスト削減に役立つ万能のWordPressプラグインをお探しなら、以下の2つがおすすめです。
テーマやプラグインのHTTPリクエストが多すぎないかどうかを自分で分析する必要はありますが、どちらのプラグインも、一度見直しを行ったサイトに残ったものを最適化するのに役立ちます。
まとめ
サイト上のリソースは、それぞれHTTPリソースを生成します。1つの画像、CSSスタイルシート、フォントファイルの取得には、それぞれ1件のHTTPリクエストが必要になります。
WordPressをお使いの場合は、テーマやプラグインがHTTPリクエストを生成しています。また、使用する画像やサードパーティスクリプト（アクセス解析ツールなど）からのHTTPリクエストもあります。
HTTPリクエストが多くなると、サイトの速度は低下します。GTmetrixやPageSpeed Insightsなどのテスト結果で、HTTPリクエストの削減や最適化、または重要なリクエストの連鎖回避などが推奨されるのはこのためです。
今回ご紹介したヒントを実践して、サイトのHTTPリクエスト数を減らしてみてください。
WordPressサイトのHTTPリクエストを減らす方法について質問がありましたら、以下のコメント欄でお知らせください。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す