WordPress で HTTP/S リクエストを減らす方法

WordPress サイトを高速化したい場合に役立つストーリーを紹介します。

先日、ピカピカのウェブサイトを構築しました。私は全力を尽くして、WooCommerce、Google タグマネージャー、OneSignal、ヘルプデスク、Yoast、ライブラジオ (そうそう、そうしました)、Cookie Notice、ソーシャルメディア、その他多数のプラグインを追加しました。

あなたと同じように、私も訪問者に好印象を与えたいと思っていました。しかし、その後、物事が耐えられないほど遅くなりました。多くの悩みを抱えた後、私は GTMetrix を起動して問題を解決しました。

残念なことに、次のようなものを目にしました。

感動しましたか？ NAWは地獄だ！完璧な A を獲得し、ページの読み込み時間を 2 秒未満に短縮したいと考えていました。

それで、再テストボタンを押しましたが、どうでしょうか？それでも同じ不快な結果。私は愕然とし、怒りさえ感じました。でも、そんなことは許されないから、簡単には諦めません。

次に私が何をしたか知っていますか？ GTMetrix が問題を引き起こす可能性があるため、Pingdom で Web サイトをテストしました。しかし、またしても悲惨な結果が以下にあります。

私は憤慨しました。他の問題の多くはすぐに解決できるのに、私の肉体のとげは、HTTP リクエストの誤りでした。

さらに悪いことに、私はホームページを構築するために十億もの要素を読み込む e コマース WordPress テーマを使用していました。私の弁護をすると、それは信じられないほどに見えました。一部のユーザーは、デザインも的を射ていることに同意しました。だから、私だけがこのトリックに騙されたわけではありません 🙂

しかし、優れたビジュアルデザインと遅い速度は両立しません。迅速な解決策が必要でした。

WordPress サイトでの HTTP リクエストを減らすにはどうすればよいですか?

WordPress Web サイトにアクセスするたびに、ブラウザと Web サイトのサーバーの間で大量のデータが移動します。言い換えれば、WordPress はさまざまなサーバーに HTTP リクエストを送信して、ユーザーがサイトを読み込んだときに表示されるものを構築します。

WordPress サイトで多くの要素を読み込む必要がある場合、より多くの HTTP リクエストが発生し、その逆も同様です。 HTTP リクエストが増えると、Web サイトが遅くなり、ユーザーエクスペリエンス (UX) が低下し、SEO スコアが低下し、コンバージョン率が低くなります。

WordPress Web サイトは通常動的です。つまり、ブラウザーで Web サイトをレンダリングするにはさまざまな部分が必要になります。幸いなことに、HTTP リクエストを削減し、サイトの速度を大幅に向上させることができます。

今日の投稿では、その方法を正確に学びます。

GTMetrix と Pingdom からのレポートは通常、問題がどこにあるのかを示します。したがって、両方のツールを使用してサイトをテストし、改善する必要がある領域を見つけます。レポートの準備ができたら、HTTP/S リクエストを削減して WordPress サイトを高速化する方法を説明します。

ステップ 1: 整理整頓

皆さん、WordPress ウェブサイトにたくさんのものがあると、HTTP リクエストが多すぎます。それは簡単です。 HTTP リクエストを減らすための最初のステップは、整理整頓です。

つまり、不要なプラグインをすべて削除するということです。 WordPress プラグインには、PHP、CSS、JavaScript (JS) など、多数のファイルが付属しています。各プラグインが起動するすべてのファイルは HTTP リクエストを作成します。

大量のプラグインがある場合、間違いなくより多くの HTTP リクエストが発生することになります。プラグインが少ないほど、リクエストも少なくなります。実にシンプルです。

何をするか？

プラグインの監査を実行します。 Web サイトを実行するにはどのプラグインが必要ですか?不要なプラグインはありますか?サードパーティのサーバーを利用するプラグインはありますか?これらのプラグインなしでも大丈夫でしょうか?

HTTP リクエストを減らすには、不要なプラグインをすべてアンインストールします。プラグインが時々必要になる場合は、必要なときにのみインストールしてください。その後、プラグインをアンインストールします。

使用しない WordPress テーマやコンテンツについても同様です。そういったものをすべて掃除してください。不要なものはすべて削除してください。ウェブサイトの速度とセキュリティの向上に役立ちます。

さらに一歩進んで、プラグインを選択的にロードすることもできます。たとえば、連絡先ページに読み込むために Contact Form 7 のみが必要な場合は、その特定のページに他のプラグインが読み込まれるのを停止できます。

それは素晴らしいことだと思いませんか？そしてAsset CleanUp WordPress プラグインだけが必要だとは。

このプラグインは使いやすく、非常に効率的です。あるいは、開発者は次のように述べています。

「Asset CleanUp」はページをスキャンし、読み込まれているすべてのアセットを検出します。ページ/投稿を編集するときに必要なのは、読み込む必要のない CSS/JS を選択するだけなので、肥大化が軽減されます。

すでにインストールされているものをクリーンアップしてください。ジャンクを取り除きます – コメントスパムも含まれます。そうそう、壊れたリンクを削除し、データベースを最適化することもできます。これらは、サイトの速度向上に関して考慮すべき重要な領域ですが、話は逸れました。

HTTP リクエストの削減に戻りましょう。

ステップ 2: 画像を最適化する

画像のないウェブサイトは味気ないものです。百聞は一見に如かずと言いますが、それは素晴らしいことです。ただし、すべての画像は HTTP リクエストを表します。さらに悪いことに、画像は読み込みに時間がかかる要素のトップにあります。

それでも、ほとんどの WordPress テーマ (サイトを読む) が画像、さらに言えば多くの画像に依存しているという事実を無視することはできません。これを踏まえて、画像を最適化して HTTP リクエストを減らすにはどうすればよいでしょうか?

まず、使用しない画像をすべて削除します。冷酷であれ。肥大化したものはすべて取り除きましょう – それは必要ありません。その後、画像の圧縮と最適化を行い、不要なファイルデータを削除します。

選択できるプラグインは数多くありますが、私たちは WP Compress をとても気に入っています。プレミアムサービスではありますが、画像の強力な自動最適化、可逆圧縮、サーバー負荷を軽減するクラウド処理、WebP 画像のサポート、自動サイズ変更などにより、投資する価値は十分にあります (詳細についてはレビューをご覧ください)。さらに、100 枚の画像を無料で取得できるので、少なくとも試してみることができます。

画像を最適化しても HTTP リクエスト自体は減りませんが、画像ファイルのサイズが減り、最終的にはページ速度の向上につながります。

HTTP リクエストを減らすために、CSS 画像スプライトの機能を活用することもできます。初心者のために説明すると、スプライトとは、単一の画像ファイルにまとめられた画像のコレクションです。

次に、CSS トリックを使用して、画像のどの部分を表示するかを選択できます。しかし、これにより HTTP リクエストがどのように削減されるのでしょうか?これがたとえです。

ホームページに 5 つの画像が必要だったとします。サイトを読み込むために、WordPress インストールはサーバーに 5 回アクセスして画像を取得します。 5 つの画像すべてを 1 つの画像ファイル (スプライト) に配置すると、WordPress のインストールは 1 回だけ行われます。

これで私がどこへ行くかわかりますか？トリップが少なくなると、HTTP リクエストも少なくなります。最も良い点は、CSS 画像スプライトの作成と実装に苦労する必要がないことです。 CSS スプライトジェネレーターなどのツールを使用できます。 CSS の使い方を理解していれば、CSS 画像スプライトの実装は簡単です。

専門的なヒント: ウェブサイトで画像とスクリプトの非同期読み込みをサポートする HTTP/2 を使用している場合は、CSS 画像スプライトのことはすべて忘れてかまいません。 GTMetrix はパフォーマンスをスコアリングするときに HTTP/2 を考慮しないため、画像が大量の HTTP リクエストを作成しているように見えても心配する必要はありません。

しかし、私は言います: CSS 画像スプライトによってサイトの HTTP リクエストを大幅に削減でき、それを実装する方法を知っているのであれば、それを実行して、ページの読み込み時間を余分に 1 秒短縮してください。 HTTP/2 を使用しているかどうか。

結局のところ、1 つの画像ファイルには 1 つの HTTP リクエストが必要です。 10 個の個別のイメージには 10 個の HTTP リクエストが必要です。私はあなたがドリフトを理解していることを知っています。

ステップ 3: HTML、CSS、JavaScript を結合して縮小する

私の WordPress Web サイトで多くの HTTP リクエストが発生する主な原因は、外部 CSS および JavaScript ファイルでした。そうです、私は 43 個の JS スクリプトと 22 個の CSS ファイルを処理していました。これはなんと 66 件の HTTP リクエストです。

約 130 の HTTP リクエストのうち、外部 CSS リクエストと JavaScript リクエストが問題の約 51% を占めていました。それはまったくばかげています。ありがとう、GTMetrix、拳をぶつけてください。

これら 44 個の JS ファイルと 22 個の CSS ファイルを結合して縮小すると、HTTP リクエスト、Web サイトのサイズ、読み込みにかかる時間を大幅に削減できます。しかし、この「結合」と「縮小」ビジネスとは一体何なのでしょうか?

Words by Birds の Raelene Morey 氏 (私は大ファンです 🙂 ) によると、縮小化とは「…HTML、CSS、JavaScript ファイルから、コメント、書式設定、空白、改行などの不要な文字を削除する」プロセスだそうです。コードの実行には必要ありません。」

縮小すると、他の文字がすべて削除され、コードのみが残るため、ファイルサイズが削減されます。ただし、66 個以上の外部スクリプトがある場合、縮小しても HTTP リクエストを最小限に抑えることはできません。そのためには、CSS ファイルと JavaScript ファイルを組み合わせる必要があります。

繰り返しますが、ラエレーンは次のように言います。

一方、ファイルを結合するのはその名の通りです。たとえば、Web ページが 5 つの外部 CSS ファイルと 5 つの外部 JavaScript ファイルを読み込む場合、CSS と JavaScript をそれぞれ 1 つの別個のファイルに結合すると、リクエストは 10 件ではなく 2 件だけになります。

わかりますか？確かにそう願っています。ファイルを結合すると、HTTP リクエストが削減されます。一方、縮小するとファイルサイズが小さくなります。この 2 つを組み合わせると、一石二鳥になります。

プラグインはありますか?はい、もちろん！

ファイルを結合したり縮小したりするための WordPress プラグインが大量にあります。良い例は、WP Rocket プラグインです。これは基本的に、数回のクリックでファイルを結合および縮小する機能を提供する最高のキャッシュプラグインの 1 つです。

もう 1 つの人気のある (そして無料) オプションは Autoptimize プラグインです。

ところで、ついでに外部 CSS ファイルや JS スクリプトの数も減らしてみませんか？たとえば、ここでは名前を挙げていませんが、サードパーティのコメントプラットフォームが本当に必要ですか?ライブラジオプラグインが必要ですか?

私が何と言おうと、不要な外部スクリプトとファイルをすべて削除してください。

ステップ 4: レンダリングをブロックする CSS および JavaScript ファイルを調整する

場合によっては、特に頻繁に変更されるサードパーティのファイルやスクリプトの場合、ファイルを結合することができない場合があります。このような場合、そのようなアセットのロードを延期できます。 HTTP/2 はファイルの非同期ロードをサポートしています。これは、すべてのファイルが同時にロードされることを意味します。

何らかの理由で非同期読み込みが行われていない場合 (HTTP/2 を使用していないか、スクリプトが非同期ではない可能性があります)、これらのファイルにより Web サイトの速度が大幅に遅くなる可能性があります。

Web ページは上から下に読み込まれることに注意してください。ページの上部にレンダリングをブロックする CSS と JS がある場合、ファイルが完全に読み込まれるまでブラウザは読み込みを停止します。そのため、スクリプトが読み込まれるまでユーザーには空白のページが表示され、時間がかかります。

どうやって？すべてのレンダリングをブロックするスクリプトを Web ページの上部から下部に移動します。ただし、ここで注意してください。すべてのスクリプトを一番下に移動する必要はありません。私がこれを言ったのは、完全に魅力的なエクスペリエンスを提供するには、ページに CSS と JS が必要になる可能性があるためです。

一部の CSS または JavaScript ファイルを延期すると、ページが完全に読み込まれるまで、ユーザーには Web ページの歪んだバージョンが表示される可能性があります。これは、達成したいこととはまったく逆になります。

したがって、ページの読み込みに必要のないスクリプトのみを延期します。そうすれば、ユーザーはページが読み込まれるまで何年も待つ必要がなくなります。なぜ？メッセージを配信するために必要な HTTP リクエストが少なくなるからです。

HTTP リクエスト自体は減少しません (最終的にはすべてのスクリプトとファイルが読み込まれるため) が、ページのレンダリングに必要な HTTP リクエストの数は減少します。

これは画像の遅延読み込みによく似ています。画像はビューポートにあるときにのみ読み込まれ、ページの残りの部分 (および最も重要な部分) が読み込まれるときは読み込まれません。

ちなみに、レンダリングをブロックする CSS と JS を修正すると、Web ページの構築に必要のないファイルやスクリプトが見つかる可能性があります。

たとえば、外部ソーシャル共有 JS スクリプトの読み込みに時間がかかる場合は、それを延期できます。さらに、それを削除して、テーマにソーシャル共有を組み込むことができます。

同じ機能を維持しながら HTTP リクエストを排除し、サイトを高速化します。ほとんどの初心者にとって、テーマに機能をコーディングするのは難しいことだと思います。上級の WP ユーザーまたは開発者に確認してください。

代わりに、WP Rocket プラグインを使用してレンダリングブロックスクリプトを修正することもできますが、注意してください。手順を間違えると Web サイトが簡単に壊れてしまう可能性があるため、ドキュメントをよく読んでください。

無料のオプションはありますか?もちろん！ 私たちは WordPress を使用しています。覚えていますか?他のプラグインの中でも特に、Async JavaScript を使用できます。

ステップ 5: キャッシュと CDN を使用する

キャッシュと CDN によって HTTP リクエストが削減できることをご存知ですか?一見事実ではないように思えますが、舞台裏で何が起こっているかを考えると、キャッシュと CDN を有利に活用できることがわかります。

キャッシュには、ユーザーが次回のアクセス時にファイルをダウンロードしないように、静的ファイルをブラウザーに保存することが含まれます。キャッシュプラグインがあり、ユーザーが最初の訪問時にキャッシュされたコンテンツをダウンロードするとします。

それ以降の訪問では、サイトはサーバーにリクエストを行いません。代わりに、ブラウザからキャッシュされたリソースが提供され、HTTP リクエストが削減され、サイトの速度が向上します。

CDN (またはCcontent Delivery Network) は、世界中に配置されたサーバーのネットワークです。 CDN もキャッシュを使用しますが、さらに高速にするために、CDN プロバイダーは訪問者に最も近いサーバーからキャッシュされた コンテンツを提供します。

距離が短いほどコンテンツの配信が速くなり、キャッシュがあるため、Web サイトは中央サーバーから同じコンテンツを再度ダウンロードする必要がなくなります。意味が分かりますか？

そして何よりも、無料の CDN オプションが多数あります (少なくとも、文字通りその違いを確認できる無料トライアルが用意されています)。 WPExplorer では CLoudflare を使用しており、強く推奨していますが、自分にとって最適だと思われる CDN を選択してください。

おまけ: HTTP/2 がサポートされていることを確認してください

HTTP リクエストを減らすためにあらゆることを行っているかもしれませんが、Web ホストが問題の原因である可能性があります。驚かないでください。この時代に、HTTP/2 以外を使用する人がいるでしょうか?

おそらく、HTTP/2 が何なのかさえ知らないでしょう。まず、HTTP/2 はファイルの非同期ロードなどをサポートしています。 HTTP 1.0 には他にも利点がありますが、それについては別の日のレッスンになります。

HTTP 1.0 以前を使用している場合は、かなりの数の HTTP リクエストが発生することがわかります。

すぐに判断しないでください。 HTTP 1.0 と古いバージョンの PHP を依然として使用している Web ホスティングプロバイダーを見たことがあります。はい、HTTP/2 と PHP 7 には明らかな利点がありますが、私はハッタリでもありません。彼らの顧客の中には、プラグインの一部が機能しないときに私に相談してくる人もいますが、それは腹立たしいことです。

しかし、本当に、なぜでしょうか？一部の Web ホスティングプロバイダーが、PHP 5.6 が非推奨であり、セキュリティ上の脆弱性があるという事実を気にしていないという事実は、まったく別のことです。そして、HTTP/2 をサポートしていない場合、それは本当に取引の妨げになります。

ホストに問い合わせるか、KeyCDN のツールを使用して、サーバーが HTTP/2 をサポートしているかどうかを確認してください。最適な Web ホストは、HTTP/2 と最新バージョンの PHP をサポートします。どちらの場合でもホストに遅れがある場合は、アップグレードするか、より良い Web ホストを選択するように依頼してください。

最後の言葉

WordPress サイトの HTTP リクエストを減らすということは、不要なものを排除することです。 WordPress Web サイトに多くのものがある場合、大量の HTTP リクエストが発生し、ページ速度が比較的遅くなります。

HTTP リクエストを減らすには、サイトを整理し、画像を最適化し、レンダリングをブロックするスクリプトを修正し、キャッシュを使用し、ホストが HTTP/2 をサポートしていることを確認します。それ以外は、大量のアセットを読み込む必要のない、シンプルでクリーンな Web サイトを作成するよう努めてください。

ご質問がございましたら、以下のコメント欄にご記入ください。ウェブサイトの高速化と素晴らしい未来に乾杯!