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

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

WordPressサイトを高速化したい場合におすすめのストーリーをご紹介します.


先日、ピカピカのウェブサイトを作りました。私はすべて行って、WooCommerce、Googleタグマネージャー、OneSignal、ヘルプデスク、Yoast、ライブラジオ(そうそうそうです)、Cookie通知、ソーシャルメディア、その他のプラグインを追加しました.

あなたと同じように、私は訪問者を感動させることに専念していたので、そう思いました。しかしその後、物事は耐え難いほど遅くなった。多くの苦痛の後、私は気合を入れました GTMetrix 問題を洗い流す.

残念なことに、私はこれを見ました:

gtmetrix速度テスト結果

感動しましたか? NAWへの地獄!完璧なAを獲得し、ページの読み込み時間を2秒未満に短縮したかった.

だから、私は再テストボタンを押しましたが、何を推測しますか?それでも同じ不快な結果。私もびっくりしました。でも、そんなことは許されないので簡単にあきらめない.

私が次に何をしたか知っていますか?私は上のウェブサイトをテストしました Pingdom GTMetrixがそれを吸うことができるので。しかし、以下は悲惨な結果です。

pingdomツールはテスト結果を高速化します

私は憤慨した。他の多くの問題をすばやく修正できるので、私の肉体にあることわざは、HTTPリクエストが誤っていることを示していました.

さらに悪いことに、私はeコマースのWordPressテーマを使用していて、 ホームページを構築するための要素。私の弁護では、それは信じられないほどに見えました。一部のユーザーはデザインも適切であることに同意したので、そうだ、私は一人でトリックに落ちなかった��

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

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

WordPress Webサイトにアクセスするたびに、ブラウザーとWebサイトのサーバーの間で大量のデータが移動します。つまり、WordPressはさまざまなサーバーにHTTPリクエストを送信して、ユーザーがサイトをロードしたときに表示されるものを構築します.

WordPressサイトの読み込みに多くの要素が必要な場合は、HTTPリクエストが多くなり、逆も同様です。 HTTPリクエストが増えると、ウェブサイトが遅くなり、ユーザーエクスペリエンス(UX)が低下し、SEOスコアが低くなり、コンバージョン率が低くなります。.

WordPressのWebサイトは通常動的です。つまり、ブラウザーでWebサイトをレンダリングするには多くの異なる部分が必要です。良いニュースは、HTTPリクエストを減らしてサイトを大幅にスピードアップできることです。.

そして今日の投稿では、あなたは正確にどのように学ぶ!

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

ステップ1:整理する

皆さん、WordPressのWebサイトに多くのものがあると、HTTPリクエストが多すぎます。簡単なことではありません。 HTTPリクエストを減らすための最初のステップは、整理することです.

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

大量のプラグインを使用している場合は、間違いなくより多くのHTTPリクエストが発生します。プラグインが少ないほど、リクエストは少なくなります。とてもシンプルです.

何をすべきか?

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

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

WordPressのテーマや使用していないコンテンツについても同様です。すべてのものをきれいにしてください。不要なものはすべて削除してください。ウェブサイトの速度とセキュリティに適しています.

追加のマイルを移動し、プラグインを選択的にロードできます。たとえば、Contact Form 7だけが連絡先ページに読み込まれるようにする必要がある場合は、その特定のページに他のプラグインが読み込まれないようにすることができます。.

それは素晴らしいことだと思いませんか?そして、あなただけが必要だと思うために Asset CleanUp WordPressプラグイン.

WP Asset CleanUp WordPressプラグイン

プラグインは使いやすく、非常に効率的です。または開発者がそれを置くように:

「Asset CleanUp」はページをスキャンし、読み込まれているすべてのアセットを検出します。ページ/投稿を編集するときに行う必要があるのは、ロードする必要のないCSS / JSを選択することだけです。これにより、膨らみを減らすことができます。.

インストール済みのhombreをクリーンアップします。ジャンクを取り除きます–コメントスパムが含まれます。そうそう、壊れたリンクを排除し、それと同時にデータベースを最適化します。これらは、サイトの速度の向上に関する限り考慮すべき重要な領域ですが、私は余談です.

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

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

画像のないウェブサイトはまあまあです。写真は千の言葉を話すと彼らは言う、そしてそれはクールだ。ただし、すべての画像がHTTPリクエストを考慮します。けがに塩を加えるために、ロードに時間がかかる要素の中で画像が一番です.

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

まず、使用しないすべての画像を削除します。冷酷であれ。その膨らみをすべて取り除く-あなたはそれを必要としません。その後、画像を圧縮して最適化し、不要なファイルデータを削除します.

WP Compressプラグイン

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

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

または、HTTPリクエストを減らすために、 CSS画像スプライト. 初心者にとって、スプライトは単一の画像ファイルに入れられた画像の集まりです.

次に、CSSトリックを使用して、表示する画像の部分を選択できます。しかし、これはどのようにHTTPリクエストを削減するのでしょうか。これは類推です.

ホームページに5つの画像が必要だとします。あなたのサイトをロードするために、WordPressインストールはサーバーに5回アクセスして画像を取得します。これで、5つの画像すべてを1つの画像ファイル(スプライト)に入れると、WordPressのインストールは1回だけ行われます.

これでどこへ行くのか分かりますか?トリップが少ないほど、HTTPリクエストは少なくなります。最良の部分は、CSS画像スプライトを作成して実装するために汗を流す必要がないことです。次のようなツールを使用できます CSSスプライトジェネレーター. CSSの使い方がわかっていれば、CSS画像スプライトの実装は簡単です。.

プロのヒント:Webサイトが画像とスクリプトの非同期読み込みをサポートするHTTP / 2を使用している場合、CSS画像スプライトのすべてを忘れることができます。 GTMetrixはパフォーマンスのスコアリング時にHTTP / 2を考慮しないため、画像が大量のHTTPリクエストを作成しているように見えても心配しないでください.

しかし私は言う: CSS画像スプライトを使用すると、サイトでのHTTPリクエストを大幅に減らすことができ、同じように実装する方法を知っている場合は、それを実行して、ページの読み込み時間から余分な秒数を削減してください。 HTTP / 2を持っているかどうか.

結局のところ、単一の画像ファイルには単一の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サイトのサイズ、およびロードにかかる時間を大幅に削減できます。しかし、この「結合」と「縮小」のビジネスとは?

による ラリーン・モリー Birds by Words(私は熱狂的なファンです��)のミニファイは、「…コメント、書式、空白、改行などの不要な文字を、HTML、CSS、およびJavaScriptファイルから不要なものから削除するプロセスです。実行するコード。」

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

再度、ラエレネは言います:

一方、ファイルを結合することは、まさにそのように思えます。たとえば、Webページが5つの外部CSSファイルと5つの外部JavaScriptファイルをロードする場合、CSSとJavaScriptを1つの別々のファイルに結合すると、10ではなく2つのリクエストになります。.

わかりますか?きっとそう思います。ファイルを結合すると、HTTP要求が減少します。一方、縮小はファイルサイズを小さくします。 2つを組み合わせると、同じ石で2羽の鳥を殺す.

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

WP Rocket WordPressキャッシュプラグイン

情報とダウンロードデモを見る

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

別の人気の(そして 自由)オプションは 自動最適化 プラグイン.

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

何を言ってもかまいません。不要なすべての外部スクリプトとファイルを削除してください.

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

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

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

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

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

一部のCSSファイルまたはJavaScriptファイルを遅延させると、ページが完全に読み込まれるまで、ユーザーが歪んだバージョンのWebページを表示する可能性があります。これは、実現したいこととは正反対です。.

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

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

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

ちなみに、レンダリングをブロックするCSSとJSを修正すると、ウェブページを作成する必要のないファイルやスクリプトが表示される可能性があります.

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

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

別の方法として、WP Rocketプラグインを使用してレンダーブロックスクリプトを修正できますが、注意が必要です。あなたが物事を台無しにした場合、あなたは簡単にあなたのウェブサイトを壊すことができるので、彼らのドキュメントを読んでください.

無料のオプションはありますか?もちろん! WordPressを使用しています。覚えていますか?あなたは使うことができます 非同期JavaScript, 他のプラグインの中で.

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

キャッシュとCDNがHTTPリクエストを削減できることをご存知ですか?それは最初は事実のように思えませんが、舞台裏で何が起こるかを考えるとき、あなたはあなたの利点のためにキャッシュとCDNを使うことができます.

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

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

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

距離が短いほどコンテンツの配信が速くなり、キャッシュを使用すると、同じコンテンツを中央サーバーから何度もダウンロードする必要がなくなります。それはあなたにとって意味がありますか?

Cloudflare CDNプラグイン

そして何よりも、無料の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テスト

ホストに連絡するか使用してください KeyCDNのツール サーバーがHTTP / 2をサポートしているかどうかを確認します。最高のWebホストは、HTTP / 2と最新バージョンのPHPをサポートしています。ホストが両方のケースで遅れている場合は、アップグレードするか、より良いWebホストを選択するように依頼してください.

最後の言葉

WordPressサイトのHTTPリクエストを減らすことは、不要なものを排除することです。 WordPressウェブサイトに多くのものがある場合、HTTPリクエストが多く、ページ速度が比較的遅い.

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

ご不明な点がございましたら、下のコメント欄でお知らせください。より速いウェブサイトと今後の素晴らしい未来への乾杯!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map