ほとんどのWordPressサイトの所有者は、遅いウェブサイトがどれほどイライラするかを知っています。基本的なことは行いました—画像を圧縮し、キャッシュを設定し、標準的な速度のヒントに従いましたが、ページがまだ読み込みに時間がかかりすぎます。
問題は単純なことであることがよくあります。ウェブサイトが不要なデータをダウンロードしすぎているのです。
技術的には、これは「ネットワークペイロード」と呼ばれます。これは、ページを読み込むために必要なデータの総量にすぎません。総ダウンロードサイズには、テキスト、画像、動画、CSS、JavaScript、フォント、その他のコードが含まれます。
基本的に、ダウンロードする必要のあるデータが少ないほど、ページの読み込みは速くなります。
したがって、ウェブサイトの速度を改善したいのであれば、あなたは正しい場所にたどり着きました！
このガイドでは、WordPressでこれらのファイルのサイズを削減し、膨大なネットワークペイロードを回避する方法を正確に説明します。
WordPressにおける巨大なネットワークペイロードはなぜ問題になるのか？
ウェブサイトの速度をチェックするために、Google LighthouseやPageSpeed Insightsのようなツールを使用したことがありますか？
時には、「巨大なネットワークペイロードを回避してください」というメッセージが表示されることがあります。
本質的に、これはあなたのウェブページが大きすぎることを意味します。持ち運ぶには重すぎるスーツケースのようなものです。大きなウェブページは読み込みに時間がかかり、サイトを訪れる人々をイライラさせる可能性があります。
ウェブページのネットワークペイロードとは、そのページを構成するすべての要素の合計サイズのことです。これには以下が含まれます：
- テキスト: ページ上で読むことができる単語
- 画像とメディア: 表示される写真や動画
- コード: ページを美しく見せ、正しく機能させるためのCSSおよびJavaScriptファイル
- フォント：テキストの特別なスタイル
- さらに、その他のカスタム要素
そのため、これらの要素がすべて組み合わさって大きくなるほど、ウェブページが画面に表示されるのに時間がかかります。
どれくらい大きいと大きすぎるのでしょうか？簡単なガイドはこちらです：
- **良い:** ウェブページのすべての部分の合計が2MB未満の場合、それは軽いバッグを運ぶようなものです。最適化されており、すばやく読み込まれます。ここではあまり心配する必要はありません。
- 改善の余地あり：ウェブページのサイズが2MBから4MBの間の場合、少し重いバックパックを背負っているようなものです。軽量化できるものがいくつかあるかもしれません。Googleが、それをより速くする方法についていくつかヒントを提供します。
- 巨大: ウェブページが4〜5 MBを超える場合、それは巨大で溢れかえったスーツケースを運ぼうとするようなものです。これはウェブサイトの訪問者にとって遅くなり、最適化を優先する必要があります。
「巨大なネットワークペイロードを回避する」というメッセージが表示された場合は、小さな矢印をクリックして、ウェブページを構成するすべてのリソースのリストを表示できます。
リストのトップにある最大のファイルを見てください。それらのファイルを小さくすること、または不要なファイルを削除することに集中すれば、WordPressのパフォーマンスに最大の改善が見られるでしょう。
これらのファイルを小さくすることで、ウェブページを表示するために使用するデータが少なくなり、読み込みが速くなります。
大きなウェブページが問題となる理由がわかったところで、WordPressでそれらを回避する方法を探りましょう。この記事では、次の8つのヒントを取り上げます。
- 画像を小さくする
- 動画を正しく埋め込む
- 画像と動画で遅延読み込みを使用する
- JavaScriptおよびCSSファイルのサイズと数を減らす
- ファイルを Gzip で圧縮する
- ブラウザキャッシュを利用して繰り返しダウンロードを防ぐ
- フォントの使用数を減らすか、システムフォントを使用する
- 遅いプラグインを避ける
- Frequently Asked Questions About Network Payloads in WordPress
準備はいいですか？早速始めましょう！
1. 画像を小さくする
大きなネットワークペイロードの主な原因の1つは、大きな画像です。
今日のスマートフォンやカメラは、非常に大きなファイルサイズの高品質な画像を作成します。しかし、ウェブサイトに表示する際に、それらをそれほど大きく保つ必要はありません。
幸いなことに、画像の品質を損なうことなく、画像を最大80％小さく最適化できます。これは、ウェブサイトのネットワークペイロードに、他の何よりも大きな影響を与えます。
WPBeginnerでは、アップロードする前にすべての画像を最適化しています。画像のサイズを適切な寸法にリサイズし、さまざまなツールを使用してファイルサイズを縮小しています。
私たちは、私たち自身のウェブサイトでこれを行う方法に基づいた役立つガイドを作成しました。ウェブサイトのパフォーマンスを損なうことなく画像を最適化する方法に関する記事を参照してください。
2. 動画を正しく埋め込む
ウェブサイトに動画がある場合は、表示方法に注意する必要があります。
ウェブサイトに直接動画をアップロードすると、ネットワークのペイロードが大きくなり、特に自動再生が開始された場合にウェブサイトの速度が大幅に低下する可能性があります。
ビデオを埋め込む最良の方法は、YouTubeやVimeoのようなビデオプラットフォームから埋め込むことです。
☝ 注: YouTube を使用して動画をホストおよびストリーミングしています。WordPress の動画チュートリアルは、WPBeginner YouTube チャンネルでご覧いただけます。
このアプローチでも、ウェブサイトで動画を再生できますが、実際には他の誰かのサーバーに保存されているため、ネットワークペイロードの一部にはなりません。
これは、サーバーが重いデータ転送を処理する必要がないため、非常に役立ちます。さらに、これらのプラットフォームは、訪問者のインターネット接続に適応する最適化されたストリーミングにより、ビデオを効率的に配信するように設計されています。
さらに、これらのプラットフォームの多くのビデオプレーヤーは、ユーザーが再生をクリックするまでビデオの読み込みを開始しないため、初期のデータ転送量が少なくなります。
埋め込みコードを使用して、ウェブサイトに動画を簡単に追加できます。
このトピックの詳細については、WordPressに動画をアップロードしてはいけない理由に関するガイドをご覧ください。
3.画像と動画の遅延読み込みを使用する
特にウェブサイトに画像や動画が多く含まれている場合、遅延読み込みは大きなネットワークペイロードを回避するためのもう1つの優れた方法です。
通常、ウェブページが読み込まれるとき、ブラウザは、すぐには表示されない画像や動画であっても、すべてをすぐにダウンロードしようとします。
レストランで、料理が一品ずつではなく、すべて一度に出てきたらどうなるでしょう？圧倒されてしまいますよね！
これは、遅延読み込みが実装されていない場合にウェブページで起こることです。ユーザーがまだ見ることができないものであっても、すべてを事前にダウンロードする必要があります。
これは明らかに理想的ではありません。なぜなら、ウェブサイトのペイロードが大きく、ユーザーがページの最下部にあるコンテンツを表示しなくても大量のデータをダウンロードすることになるからです。
これの解決策は遅延読み込みと呼ばれます。
遅延読み込みは、食事が準備できたときに各コースを提供するレストランのようなものです。
遅延読み込みを使用すると、画像や動画は、ユーザーの画面にスクロールされるまで読み込まれません。これにより、ブラウザは必要なものを必要なときにのみ読み込めばよくなります。
これにより、初期ネットワークペイロードとダウンロードする必要のあるデータ量が削減されます。
WordPressで遅延読み込みを設定する方法を説明する役立つチュートリアルを以下に示します。
4. JavaScriptおよびCSSファイルのサイズと数を削減する
ウェブサイトでの大きなネットワークペイロードを回避する最善の方法の1つは、CSSおよびJavaScriptファイルのサイズを削減することです。
あなたのウェブサイトは、スタイリングのためにCSSファイルを使用し、インタラクティブな機能のためにJavaScriptファイルを使用しています。
ただし、これらのファイルには、コードの機能に不要な余分なスペースやコメントが含まれていることがよくあります。これらの要素を安全に削除することで、ファイルのサイズを小さくできます。
これは、これらのファイルがこれまでと同じように機能することを意味しますが、ユーザーがダウンロードするデータ量が少なくなるため、ページの読み込みが速くなります。
このプロセスはミニフィケーションとして知られており、良いニュースは、WP RocketのようなWordPressプラグインを使用してファイルを自動的にミニファイできることです。
詳細については、WordPressでCSSおよびJavaScriptファイルを圧縮する方法に関するガイドをご覧ください。
通常、ウェブサイトのさまざまな部分は、異なるCSSまたはJavaScriptファイルを持っています。たとえば、ヘッダー用の1つのファイル、本文用の別のファイル、さらにプラグイン用のファイルがさらにいくつかある場合があります。
しかし、多くの小さなファイルは、1つの大きなファイルよりも効率が悪い場合があります。読み込むファイルが多い場合、ブラウザはそれらを個別に取得する必要があり、合計ダウンロードサイズが増加します。代わりに、これらの小さなファイルを1つの単一のファイルにまとめることができます。
WP Rocket (有料) や Autoptimize (無料) のような人気のプラグインは、CSSおよびJavaScriptファイルを自動的に結合および圧縮できます。
これらのプラグインの使用方法については、WordPressでレンダリングブロックするJavaScriptとCSSを修正する方法に関するガイドで学習できます。
5. Gzipでファイルを圧縮する
ウェブサイトファイルを小さくするもう1つの方法は、圧縮することです。HTML、CSS、JavaScriptのようなテキストベースのファイルは、Gzip圧縮を使用して大幅に削減できます。
実際、Gzip圧縮は、これらのファイルをユーザーのブラウザに送信する前に、サイズを最大70%削減できることがよくあります！これは、転送する必要のあるデータ量の大幅な節約になります。
ファイルのダウンロード時間を短縮し、WordPressウェブサイトの読み込みを大幅に高速化します。圧縮されたデータが訪問者のコンピューターに到着すると、ブラウザは自動的にファイルを展開（解凍）し、ユーザーの画面に表示します。
ユーザーのブラウザがGzip圧縮をサポートしているかどうかを心配する必要はありません。これは、今日のすべての一般的なウェブブラウザで機能するためです。
多くの優れたキャッシュプラグインは、Gzip圧縮もサポートしています。一般的なオプションには、WP Rocket、WP Super Cache、W3 Total Cacheなどがあります。
以前はWPBeginnerウェブサイトでWP Rocketを使用していましたが、素晴らしい経験をしました。詳細については、当社の完全なWP Rocketレビューをご覧ください。
WP Rocketを使用すると、ウェブホストがApacheサーバーを使用している場合、Gzip圧縮は自動的にオンになります。他のキャッシュプラグインでは、プラグインの設定で有効にする必要がある場合があります。
詳細な手順については、WordPressでGzip圧縮を有効にする方法に関するガイドを参照してください。
6. ブラウザキャッシュを使用して繰り返しダウンロードを防ぐ
WordPressで、特にリピート訪問者が多いサイトの場合、膨大なネットワークペイロードを回避するもう一つの方法は、ブラウザキャッシュを試すことです。
訪問者がサイトを訪れるたびに、ウェブサイト上のすべてのものをダウンロードしなければならないと想像してみてください！それは信じられないほど遅くなるでしょう。そして、適切なキャッシュを使用しないと、まさにそれが起こることです。
誰かが初めてあなたのウェブサイトを訪れると、ブラウザは必要なものすべて（画像、CSS、JavaScript、その他のすべてのリソース）をダウンロードします。ブラウザキャッシュを使用すると、ブラウザはこれらのファイルのコピーをコンピューターに保存します。
そうすれば、次回ウェブサイトにアクセスしたとき、ブラウザは賢く動作します！サーバーにすべてを再度要求する前に、ローカルに保存されたファイルをチェックします。
ブラウザがファイルのコピーをキャッシュに持っている場合、再度ダウンロードする代わりにそれを使用します。これにより、全体のネットワークペイロードが大幅に削減され、通常の訪問者はより速くスムーズな体験を得られます。
もちろん、ウェブサイトのコンテンツがニュースサイトや定期的に更新されるブログのように頻繁に変更される場合は、ブラウザにファイルの最新バージョンを再ダウンロードするように指示する必要があります。これにより、誰もが最新のコンテンツを入手できるようになります。
WordPressでExpiresヘッダーを追加することで、これを制御できます。これらのヘッダーは、保存されたファイルがいつ古くなったと見なされ、更新が必要になるかをブラウザに伝えます。
7. フォントの使用数を減らすか、システムフォントを使用する
フォントは、ウェブサイトを魅力的に見せ、読みやすさを向上させることができます。カスタムフォントを使用すると、ウェブサイトをユニークにし、訪問者がより多くの時間を閲覧に費やすように促すことができます。
しかし、ウェブサイトを訪れるたびに多くの異なるフォントをダウンロードしなければならないとしたらどうでしょう。ページ上のすべてを表示するのに時間がかかってしまいます。
鍵は、ウェブサイトで少数のフォントを使用することです。私たちは、2つの主要なフォントに絞り、それらをサイト全体で使用することをお勧めします。これにより、訪問者がダウンロードする必要のあるファイルの総数が削減されます。
さらに良いことに、カスタムフォントの代わりにシステムフォントを使用できます。
システムフォントとは、人々のコンピューターに既にインストールされているフォントのことです。ArialやTimes New Romanのような、コンピューターの標準フォントを使用するようなものだと考えてください。
ウェブサイトにシステムフォントを選択した場合、ユーザーは追加ファイルをまったくダウンロードする必要がありません！これにより、ネットワークペイロードのサイズが大幅に削減され、訪問者にとってウェブサイトが高速になります。
詳細については、WordPressウェブサイトでGoogleフォントを無効にする方法に関するガイドを参照してください。
8. 遅いプラグインを避ける
最後に、プラグインについてお話ししましょう。プラグインによっては、ウェブサイトの速度を低下させたり、大量の追加JavaScriptやCSSファイルを読み込むことでネットワークペイロードのサイズを増加させたりすることがあります。
プラグインは、ウェブサイトに追加する追加ツールと考えてください。軽量で優れたものもあれば、非常に重いものもあります。重いプラグインを使いすぎると、ウェブサイトのダウンロードサイズが増加する可能性があります。
一目でどのプラグインが遅いかを知るのは難しいため、調査する必要があります。詳細については、どのWordPressプラグインがサイトを遅くしているかに関するガイドをご覧ください。
ページのダウンロードサイズを増加させているプラグインを見つけたら、いくつかの選択肢があります。
まず、プラグイン開発者に連絡して、プラグインをより効率的にする方法がないか確認できます。または、同じ機能を持つより高速なプラグインを探すこともできます。
おすすめについては、最適なWordPressプラグインの選び方に関するガイドをご覧ください。
👉 関連記事: プラグイン開発者に連絡するのが少し不安ですか？WordPressサポートの適切な聞き方（そして取得方法）に関するガイドをご覧ください。
場合によっては、一部の重いプラグインがウェブサイトに不可欠であることがわかります。その場合でも、プラグインをすべての場所に読み込むのではなく、必要なページにのみ読み込むことで、ウェブサイトを高速化できます。
Plugin Organizerという無料プラグインを使用して、必要のないページでプラグインを無効にすることができます。これにより、それらのページのネットワークペイロードが減少します。
WordPressのネットワークペイロードに関するよくある質問
WordPress でネットワークペイロードを削減することについて、人々がよく尋ねる質問をいくつかご紹介します。これらの回答は、技術的な側面と実装の詳細をよりよく理解するのに役立ちます。
1. ネットワークペイロードとは何ですか？また、WordPress サイトにとってなぜ重要ですか？
ネットワークペイロードとは、ウェブサイトがページを読み込む際に訪問者のブラウザに送信するデータ（画像、CSS、JavaScript、HTMLなど）の総量のことです。ペイロードが大きいと、訪問者はより多くのデータをダウンロードする必要があるため、サイトの速度が低下します。これは、特にモバイルユーザーやインターネット接続が遅いユーザーにとって問題となります。Googleもウェブサイトのランキングを決定する際にペイロードサイズを考慮するため、最適化することでSEOを改善できます。
2. 現在のネットワークペイロードサイズを確認するにはどうすればよいですか？
Google PageSpeed Insights、GTmetrix、またはブラウザの開発者ツールを使用して、ネットワークペイロードを確認できます。Chromeでは、F12キーを押し、「ネットワーク」タブに移動してページを再読み込みします。合計サイズが一番下に表示されます。一般的に、最適なパフォーマンスを得るには、合計ペイロードを1〜2 MB未満に保ちたいところです。
3.ネットワークペイロードの削減は、ウェブサイトの機能やデザインに影響しますか？
正しく行えば問題ありません。これらの手法は、機能を削除するのではなく、既存のコンテンツを最適化および圧縮することに重点を置いています。コンテンツをより効率的に配信しながら、同じ機能性と視覚的な魅力を維持できます。ただし、すべてが正常に機能することを確認するために、変更は必ずステージングサイトでテストしてください。
4. ネットワークペイロードはどのくらいの頻度で最適化すべきですか？
ペイロードは毎月監視し、新しいコンテンツ、プラグイン、またはテーマを追加するたびに最適化する必要があります。Google Search Console のようなツールを使用して定期的な監査を設定し、Core Web Vitals を追跡してください。メジャーな最適化は四半期ごとに必要になる場合がありますが、継続的なメンテナンスは通常の WordPress メンテナンス ルーチンの一部であるべきです。
5. 技術的な知識がなくてもネットワークペイロードを削減できますか？
はい、WP Rocket、Smush、Autoptimizeなどの使いやすいプラグインを使用して、多くの最適化手法を実装できます。これらのツールは、画像の圧縮、ファイルの最小化、キャッシュを自動的に処理します。ただし、高度な最適化には、開発者またはWordPressの専門家の助けが必要になる場合があります。
ボーナス: WordPress パフォーマンスに関連するエキスパートガイド
このチュートリアルで、WordPressで巨大なネットワークペイロードを回避する方法を学べたことを願っています。WordPressのパフォーマンスを向上させる他の方法に関するガイドも参照したいかもしれません:
- WordPressの速度とパフォーマンスを向上させるための究極のガイド
- WordPressが遅いのはなぜですか？修正方法を学ぶ
- ECサイトの速度を向上させる方法
- WPBeginnerのページ読み込み速度を向上させる方法
- ウェブサイトのスピードテストを適切に実行する方法
- ウェブサイトを高速化する最高のWordPressキャッシュプラグイン
- WordPressブログにCDNが必要な理由
- WordPressでHTTPリクエストを削減する方法
- WordPressメディアのオフロード方法 – ウェブサイトのスピード向上
- WordPressデータベースのメンテナンス：データベースの最適化方法
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。