WordPress で HTTP リクエストを減らす方法 (11 のヒント)

公開: 2023-04-12

ウェブサイトを表示するために、ユーザーのブラウザは HTTP リクエストをサーバーに送信します。 ただし、最適化されていないファイルが複数ある場合、サーバーは多くの要求を処理する必要があります。 これらはページの読み込み時間を大幅に増加させる可能性があるため、Web サイトで行う HTTP リクエストを減らす必要があります。

幸いなことに、それらを減らすことは可能です。それがこの記事の目的です。

以下では、HTTP リクエストを最小限に抑える必要がある理由について説明します。 次に、これを実行してウェブサイトを高速化する方法を紹介します。 始めましょう!

HTTP リクエストの概要

ユーザーが Web サイトにアクセスするたびに、ブラウザーはサーバーからリソースをダウンロードする必要があります。 それと通信するために、ブラウザは HTTP (Hypertext Transfer Protocol) でリクエストを送信します。

Web サイトはさまざまな形式のデータで構成されており、HTML、CSS、画像、動画のファイルはすべてサーバーに保存されています。このコンテンツをブラウザーでレンダリングするには、HTTP 要求が必要です。

誰かがインターネットを閲覧するときに必要な手順は次のとおりです。

  1. ユーザーがブラウザで Web ページにアクセスします。
  2. ブラウザーは HTTP 要求を Web サイトのサーバーに送信します。
  3. サーバーはリクエストを処理し、関連するリソースを返します。
  4. 読み込みプロセスが完了すると、Web サイトを表示して操作できるようになります。

Web サイトのレンダリングに必要な HTTP 要求は 1 つだけではないことに注意してください。 個々の画像ファイル、プラグイン スタイルシート、JavaScript スクリプト、Web フォントなどには通常、独自のファイルがあります。 したがって、サイトが最適化されていない場合、読み込み時間に悪影響を及ぼす可能性があります。

WordPress サイトの HTTP リクエストを減らしたい理由

Web サイトを構築しているときは、不要なファイルを最小限に抑えることが重要です。 そうすれば、訪問者のブラウザーはサーバーから多くのリソースを要求する必要がなくなります。 サイトの HTTP リクエストが少なくなるため、読み込みが大幅に高速化されます。

大まかなルールとして、HTTP リクエストの数が多いほど、ページ速度が遅くなります。 ページをレンダリングする前にダウンロードするリソースがさらにある場合、ユーザーはコンテンツを表示するのに長時間待たなければなりません。

たとえば、リクエスト数が 50 しかない Web サイトは、通常、リクエスト数が 70 のウェブサイトよりも高速に読み込まれます。 これは、処理してダウンロードするリソースが少ないためです。

すべての HTTP 要求が同じように作成されるわけではないため、実際の話はもう少し複雑です。 1 つの大きな読み込みの遅い HTTP リクエストは、5 つの小さな読み込みの速い HTTP リクエストよりも大きな影響を与える可能性があります。 ただし、大まかなルールとして、HTTP リクエストが少ないほど、ウェブサイトの読み込みが速くなります

ウェブサイトの HTTP リクエストを減らすことで、コア ウェブ バイタル、特に最大コンテンツ ペイント (LCP) スコアが向上します。 これにより、訪問者がコンテンツをより迅速に表示できるようになるため、ユーザー エクスペリエンス (UX) を向上させることができます。

ウェブサイトの HTTP リクエストをテストする方法

前述したように、HTTP リクエストはレンダリングの一部です。 ただし、すべての HTTP 要求が同じというわけではありません。 Web サイトでそれらを削減する前に、ターゲットとするものを正確に把握する必要があります。

これを行うには、GTmetrix などのパフォーマンス分析ツールを使用できます。 まず、Web サイトの URL を入力し、 Test your siteをクリックします。

GTmetrix ウェブサイト

ページ サイズとリクエストの総数に関する情報を含むパフォーマンス レポートを受け取ります。 このデータを表示するには、 [ページの詳細]まで下にスクロールします。

GTmetrix ページの詳細

[ウォーターフォール]タブをクリックして、個々のリクエストを表示することもできます。 これにより、各ファイルのダウンロードにかかった時間が表示されます。

GTmetrix ウォーターフォール レポート

このウォーターフォール チャートを使用すると、サイトのどの要素が不要な HTTP リクエストを引き起こしているかを特定できます。 問題が見つかったら、適切なソリューションを実装して Web サイトを高速化できます。

上のグラフからわかるように、各 HTTP リクエストのサイズは異なり、読み込みにかかる時間も異なります。

努力に対して最大の見返りが必要な場合は、最大かつ最も遅い HTTP リクエストを排除することに集中してください。

また、サードパーティの HTTP リクエスト (サイトが他のサーバーから読み込むリソース、Google アナリティクス スクリプトなど) の削除にも注力する必要があります。 これらのサード パーティの要求には、追加の DNS ルックアップが必要であり、その他のパフォーマンス上の欠点があります。

WordPress で HTTP リクエストを減らし、サイトを高速化する方法 (11 のヒント)

Web サイトをテストしたら、HTTP 要求を減らします。

以下では、作成する HTTP リクエストを減らし残りの HTTP リクエストを最適化する 11 の異なる方法について説明します。 これらのヒントのいくつかは必ずしも HTTP リクエストを排除するわけではありませんが、リクエストを最適化して読み込みを高速化します。これは、サイトの高速化にとって依然として重要です。

  1. 不要なプラグインを削除する
  2. レンダリングをブロックする JAVASCRIPT の延期および/または JAVASCRIPT の実行の延期
  3. スクリプトを条件付きでロードする
  4. サードパーティのリクエストを最小限に抑える
  5. 画像を最適化する
  6. 遅延読み込みを実装する
  7. システム フォント スタックを使用する
  8. CSS と JavaScript を組み合わせる
  9. CSS スプライトを使用して画像を結合する
  10. サイトのコードを縮小する
  11. 絵文字を無効にする

1.不要なプラグインを削除する

Web サイトに複数のプラグインがインストールされている場合があります。 プラグインを積極的に使用していなくても、不要なプラグインによって HTTP リクエストが増加し、Web ページの速度が低下する可能性があります。

プラグイン リクエストを分析するには、GTmetrix ウォーターフォール レポートで「プラグイン」を検索します。 これにより、 wp-content/pluginsフォルダーから発信された HTTP リクエストのみが表示されます。

不要な WordPress プラグインを削除することは、HTTP リクエストを減らすための最良の方法の 1 つです。

結果の上にマウスを置くと、どのプラグインがリクエストを作成したかがわかります。 サイトを最適化するには、リストを調べて不要なプラグインを探します。 特定のツールが Web サイトに積極的に貢献していない場合は、削除することを検討してください。

2. レンダリングをブロックする JavaScript を延期するか、JavaScript の実行を遅らせる

HTTP リクエストを減らして HTTP リクエストを最適化したい場合は、JavaScript に注目することも優れた戦術です。

サイトの JavaScript の読み込み方法を最適化するには、主に 2 つの方法があります。

  1. レンダリングをブロックする JavaScript を延期する
  2. JavaScript の実行を遅らせる

レンダリングをブロックする JavaScript を延期する

レンダリングをブロックする JavaScript を延期しても、HTTP リクエスト自体は削除されませんが、サイトの JavaScript の読み込みがより重要な HTTP リクエストをブロックしていないことを確認できます。

ロード プロセス中に、ブラウザがレンダリング ブロック リソースに遭遇する場合があります。 これらの CSS または JavaScript ファイルは、リソースが処理されるまでレンダリングを一時停止します。 これらの不要なファイルがあると、コンテンツの表示時間が長くなる可能性があります。

これらのファイルに defer または async 属性を追加すると、後で実行するようブラウザに通知されます。 defer 属性を使用すると、スクリプトは HTML 解析中にダウンロードされてから実行されます。 非同期属性は、利用可能になるとすぐにスクリプトを実行します。

これを実装するには、無料の Async JavaScript プラグインのような機能固有のプラグインを使用できます。

または、WP Rocket や FlyingPress など、多くの一般的なパフォーマンス/キャッシュ プラグインもこの機能を提供しています。

快適に作業できる場合は、サイトのコードで手動で設定することもできます。

defer 属性を実装するには、 functions.phpファイルを開いて、リソースの<script>タグを見つけるだけです。 ここで、defer 属性を挿入します。

 <script src="resource.js" defer></script>

非同期属性は次のようになります。

 <script src="resource.js" async></script>

一般に、非同期属性を使用することをお勧めします。 ただし、スクリプトが別のスクリプトに依存している場合は、defer 属性を使用する必要があります。

JavaScript の実行を遅らせる

最初のページ読み込みで行う HTTP リクエストを減らしたい場合、別の一般的な方法は、ユーザーの操作があるまでサイトの JavaScript 実行の一部またはすべてを遅らせることです。

これを設定すると、ユーザーがクリックやスクロールなどの操作を行うまで、サイトはファイルの読み込みを待機します。

これらの HTTP リクエストを訪問の後半に移動することで、初期読み込みの HTTP リクエストを減らし、Largest Contentful Paint などのユーザー エクスペリエンスに重点を置いたメトリックを大幅に高速化できます。

これを設定するには、次のパフォーマンス プラグインのいずれかを使用できます。

  • WPロケット
  • フライングプレス
  • Perfmatters

FlyingPress では次のように表示されます。選択したスクリプトを除くすべてのスクリプトを遅延させるか、選択したスクリプトのみを遅延させることができます。

FlyingPress を使用すると、JavaScript の実行を遅らせて HTTP リクエストを減らすことができます

3. スクリプトを条件付きでロードする

一部のプラグインは、サイト全体でスクリプトを不必要に読み込みます。 たとえば、プラグインはお問い合わせページのフォームのみを処理し、スクリプトを別の領域に追加する場合があります。 この場合、プラグインのスクリプトを条件付きでロードすることをお勧めします。

プラグインを条件付きで読み込むには、Perfmatters などのツールをインストールすることを検討してください。 特定のページや投稿でプラグインや個々のスクリプトを無効にする組み込みのスクリプト マネージャーが付属しています。

Perfmatters Script Manager を使用すると、HTTP リクエストの数を減らすことができます

無料のオプションとして、Asset CleanUp プラグインも検討できます。

条件付きでプラグインをロードし、GTmetrix を介して Web サイトを再度実行します。 それでも過剰な HTTP 要求に気付いた場合は、次の方法に進みます。

4. サードパーティのリクエストを最小限に抑える

Web サイトが読み込まれると、訪問者のブラウザーがサードパーティのプラットフォームからデータを取得する必要が生じる場合があります。これには、追加の HTTP 要求が必要です。 さらに、サードパーティのサーバーに依存しているため、これらのリクエストによってウェブサイトの速度が大幅に低下する可能性があります.

サードパーティ スクリプトの例を次に示します。

  • 埋め込まれた YouTube 動画
  • Google アナリティクス トラッキング スクリプト
  • Google フォント
  • サードパーティの広告

レンダリング ブロック リソースと同様に、サードパーティ スクリプトに非同期または遅延属性を適用できます。

Google Analytics や Google Fonts などのサービスについては、次のようなプラグインを使用してローカルでホストすることも検討できます。

  • OMGF – Google フォントをローカルでホストします。
  • CAOS – Google アナリティクスをローカルでホストします。

5. 画像を最適化する

プラグインと同様に、Web サイトから不要な画像を削除することが重要です。 すべての画像には独自の HTTP リクエストが必要なため、サイト上の写真の数を最小限に抑える必要があります。

次に、すべての画像を最適化する必要があります。 これによって HTTP リクエストの数が減ることはありませんが、サイズは減ります。 これにより、ページの読み込み時間を効果的に改善できます。

最高の画像オプティマイザの 1 つは Optimole です。 このフリーミアム プラグインは、次のような画像最適化機能のオールインワン スイートを提供します。

  • 各ユーザーのデバイスに最適化されたアダプティブ イメージを提供します。
  • 画像の圧縮。
  • 画像のサイズ変更。
  • 画像を最適な形式に変換します。
  • 組み込みのコンテンツ配信ネットワーク (CDN) を介して画像を提供します。
Optimole プラグイン

新しい画像をアップロードすると、Optimole が画像を圧縮してサイズ変更します。 したがって、大きな画像ファイルが過剰なリソースを必要とすることを心配する必要はありません。

6.遅延読み込みを実装する

遅延読み込みを実装することもお勧めします。 これにより、訪問者がページを下にスクロールするまで、スクロールしなければ見えない位置にある画像や動画が読み込まれなくなります。

これにより、これらの HTTP リクエストがユーザーの訪問の後半に移動され、初期ロードの HTTP リクエストが少なくなり、Largest Contentful Paint の時間が短縮されます。

WordPress 5.5 では、ネイティブ ブラウザの遅延読み込みを使用して、画像の組み込みの遅延読み込みが追加されました。

ただし、すべてのブラウザーがネイティブの遅延読み込みをまだサポートしているわけではありません。 さらに、専用の遅延読み込みプラグインを使用すると、サイトの遅延読み込み機能をより細かく制御できます.

たとえば、最初の数枚の画像を遅延読み込みから除外して、Largest Contentful Paint 時間に悪影響を与えないようにすることができます。

前のセクションの Optimole プラグインを使用すると、サイトの画像を最適に遅延ロードする組み込み機能も含まれます。

プラグインの設定から、遅延読み込みの動作をさらに調整することもできます。

画像を遅延読み込みして HTTP リクエストを減らす方法

7. システム フォント スタックを使用する

Web サイトを独自のものにするために、さまざまなカスタム フォントを使用できます。 ただし、新しいフォントごとに、サイトの読み込み時に別の HTTP 要求が追加されます。

このため、使用するカスタム フォントの数を制限することをお勧めします。

または、訪問者のオペレーティング システムのネイティブ フォントを使用するシステム フォント スタックを使用することもできます。

Neve、GeneratePress、Astra などの特定のテーマでは、システム フォントに戻すことができます。 ただし、CSS を使用してフォント スタックを変更することもできます。

8. CSS と JavaScript を組み合わせる

CSS ファイルと JavaScript ファイルの HTTP リクエストを減らすもう 1 つの方法は、個別の CSS ファイルと JavaScript ファイルを 1 つのスタイルシートまたはファイルに結合することです。

Autoptimize プラグインを使用すると、サイト ファイルをわずか数ステップで簡単に集約できます。

自動最適化プラグイン

[設定] > [自動最適化]で、プラグインを有効にして JavaScript と CSS コードを最適化します。 次に、 Aggregate JS-filesAggregate CSS-filesの横にあるチェックボックスをオンにします。

CSS と JavaScript を組み合わせる

これにより、CSS が 1 つのファイルにコンパイルされ、JavaScript が別のファイルにコンパイルされます。 複数のファイルに対して多くのリクエストを送信する代わりに、Autoptimize を使用すると、サイトで行う HTTP リクエストの数を減らすことができます。

– CSS と JavaScript を組み合わせることは、HTTP 要求を減らす確実な方法ですが、Web ホストによっては、実際のパフォーマンスに影響を与えない場合があります。

ホストが HTTP/2 以降 (最近ではほとんどのホストが使用しています) を使用している場合、HTTP/2 は多重化をサポートしているため (つまり、複数のサーバー要求なしでサーバーから複数のファイルをダウンロードできることを意味します)、実際にはファイルを結合しない方がよい場合があります。

ホストが HTTP/2 を使用しているかどうかわからない場合は、サポートにお問い合わせください。

9. CSS スプライトを使用して画像を結合する

一般的な WordPress サイトでは、すべての画像が個別のファイルです。 ページに複数の写真がある場合、ブラウザーは複数の HTTP 要求を送信します。 ただし、CSS スプライトはこれらの画像を 1 つのファイルに結合します。

CSS スプライト ツールは、CSS スプライトを作成およびカスタマイズするための無料のソフトウェアです。 開始するには、画像をアップロード ボックスにドロップします。

CSSスプライトツール

CSS スプライトを生成したら、それを WordPress メディア ライブラリに追加します。 次に、生成された HTML および CSS コードを使用して、各画像を Web サイトに配置できます。

10. サイトのコードを縮小する

サイト ファイルを縮小しても HTTP リクエストの数は減りませんが、サイトの HTML、CSS、および JavaScript コードに対する避けられない HTTP リクエストを最適化するのに役立ちます。

コードを書いているときに、読みやすくするために文字や空白を含めることができます。 これらはリクエストの処理には必要ないため、削除できます。

WordPress サイトのコードを最小化する最も簡単な方法は、前述の Autoptimize プラグインなどのプラグインを使用することです。

ほとんどの WordPress キャッシュ プラグインには、WP Rocket、FlyingPress、WP Fastest Cache などのコード縮小機能も含まれています。

または、Cloudflare の CDN を使用している場合は、Cloudflare にコードを縮小させることもできます。

サイトのファイルを縮小すると、HTTP リクエストの実行時間が短縮されます。 コードを軽くすることで、Web サイトを高速化し、大量のリクエストを最小限に抑えることができます。

11.絵文字を無効にする

デフォルトでは、WordPress の絵文字はサイトに追加の HTTP リクエストを追加します。 もう 1 つのHTTP リクエストを取り除くには、WordPress の絵文字を無効にします。

最も簡単なオプションとして、軽量の Disable Emojis プラグインをインストールするだけです。

または、このコードを子テーマのfunctions.phpファイルまたはコード スニペットのようなコード マネージャー プラグインに追加することもできます。

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

これらのヒントをすべて実装すると、サイトの HTTP リクエストが少なくなるはずです。

トップへ戻る

ウェブサイトでの HTTP リクエストを減らす 🎯

大まかなルールとして、Web サイトの HTTP リクエストが多いほど、読み込みが遅くなります。 これは、サイトのユーザー エクスペリエンス (UX) に悪影響を及ぼし、訪問者がコンテンツを読んだり製品を購入したりせずに離れてしまう可能性があります。

Web サイトを高速化するには、可能な限り多くの HTTP リクエストを排除し残っている HTTP リクエストを最適化して、できるだけ速く読み込まれるようにする必要があります。

この記事のヒントを活用すれば、両方の仕事をこなし、訪問者のために読み込みの速いサイトを作成できます。

👉 ただし、サイトの HTTP リクエストを最適化することは、パフォーマンス パズルの一部にすぎないことを忘れないでください。 サイトを高速にロードしたい場合は、高品質の WordPress ホスティングも必要です。最高の WordPress ホスティングのまとめをチェックして、上位のオプションを確認してください。

WordPress で HTTP リクエストの数を減らすことについて質問がありますか? 以下のコメントセクションでお問い合わせください!