あらゆる手を尽くしたのに、WordPressサイトの読み込みがカタツムリより遅いですか？
スピードテストを実行すると、恐ろしい「巨大なネットワークペイロードを回避する」という警告が表示されます。
とても技術的に聞こえますが、心配しないでください。基本的に、ウェブページが重すぎる荷物を運んでいるということです。
WPBeginnerでは、読者の皆様にチュートリアルを即座に読み込んでもらえるよう、ページスピードの向上に努めています。私たちはこの警告に直面し、その修正方法を正確に理解しています。
このガイドでは、ファイルサイズを削減し、WordPressで巨大なネットワークペイロードを回避する方法を説明します。
WordPressにおける巨大なネットワークペイロードはなぜ問題になるのか？
ウェブサイトの速度をチェックするために、Google Lighthouse や PageSpeed Insights のようなツールを使ったことがありますか？
時には、「巨大なネットワークペイロードを回避してください」というメッセージが表示されることがあります。
本質的に、これはあなたのウェブページが大きすぎることを意味します。持ち運ぶには重すぎるスーツケースのようなものです。大きなウェブページは読み込みに時間がかかり、サイトを訪れる人々をイライラさせる可能性があります。
ウェブページのネットワークペイロードとは、そのページを構成するすべての要素の合計サイズのことです。これには以下が含まれます：
- テキスト: ページ上で読むことができる単語
- 画像とメディア: 表示される写真や動画
- コード: ページを美しく見せ、正しく機能させるためのCSSおよびJavaScriptファイル
- フォント：テキストの特別なスタイル
- さらに、その他のカスタム要素
そのため、これらの要素がすべて組み合わさって大きくなるほど、ウェブページが画面に表示されるのに時間がかかります。
どれくらい大きいと大きすぎるのでしょうか？簡単なガイドはこちらです：
- 良い点：ウェブページのすべてのパーツの合計が1.6MB未満であれば、軽いバッグを持っているようなものです。最適化されており、素早く読み込まれます。ここではあまり心配する必要はありません。
- 改善の余地あり：ウェブページのサイズが2MBから4MBの間の場合、少し重いバックパックを背負っているようなものです。軽量化できるものがいくつかあるかもしれません。Googleが、それをより速くする方法についていくつかヒントを提供します。
- 巨大: ウェブページが4〜5 MBを超える場合、それは巨大で溢れかえったスーツケースを運ぼうとするようなものです。これはウェブサイトの訪問者にとって遅くなり、最適化を優先する必要があります。
「巨大なネットワークペイロードを回避する」というメッセージが表示された場合は、小さな矢印をクリックして、ウェブページを構成するすべてのリソースのリストを表示できます。
一番大きいファイルがリストの上位に来ているのがわかりますか？それらのファイルを小さくしたり、不要なファイルを削除することに集中すれば、WordPressのパフォーマンスが最も大きく改善されるでしょう。
これらのファイルを小さくすることで、ウェブページを表示するために使用するデータが少なくなり、読み込みが速くなります。
大きなウェブページが問題となる理由がわかったところで、WordPressでそれらを回避する方法を探りましょう。この記事では、次の8つのヒントを取り上げます。
準備はいいですか？早速始めましょう！
1. 画像を小さくする
大きなネットワークペイロードの主な原因の1つは、大きな画像です。
今日のスマートフォンやカメラは、非常に大きなファイルサイズの高品質な画像を作成します。しかし、ウェブサイトに表示する際に、それらをそれほど大きく保つ必要はありません。
幸いなことに、画像の品質を損なうことなく、画像を最大80％小さく最適化できます。これは、ウェブサイトのネットワークペイロードに、他の何よりも大きな影響を与えます。
WPBeginnerでは、アップロードする前にすべての画像を最適化しています。画像のサイズを適切な寸法にリサイズし、さまざまなツールを使用してファイルサイズを縮小しています。
私たちは、自身のウェブサイトで実際に行っている方法に基づいた役立つガイドを作成しました。画質を損なわずにウェブパフォーマンスのために画像を最適化する方法についての記事をご覧ください。
2. 動画を正しく埋め込む
ウェブサイトに動画がある場合は、表示方法に注意する必要があります。
ウェブサイトに直接動画をアップロードすると、ネットワークのペイロードが大きくなり、特に自動再生が開始された場合にウェブサイトの速度が大幅に低下する可能性があります。
動画を埋め込むのに最適な方法は、YouTubeやVimeoのような動画プラットフォームから埋め込むことです。
☝ 注意：私たちは動画のホスティングとストリーミングにYouTubeを使用しています。WPBeginner YouTubeチャンネルでWordPressの動画チュートリアルをご覧ください。
このアプローチでも、ウェブサイトで動画を再生できますが、実際には他の誰かのサーバーに保存されているため、ネットワークペイロードの一部にはなりません。
これは、サーバーが重いデータ転送を処理する必要がないため、非常に役立ちます。さらに、これらのプラットフォームは、訪問者のインターネット接続に適応する最適化されたストリーミングにより、ビデオを効率的に配信するように設計されています。
さらに、これらのプラットフォームの多くのビデオプレーヤーは、ユーザーが再生をクリックするまでビデオの読み込みを開始しないため、初期のデータ転送量が少なくなります。
動画をウェブサイトに簡単に追加するには、埋め込みコードを使用します。
このトピックの詳細については、WordPressに動画をアップロードしてはいけない理由に関するガイドをご覧ください。
3.画像と動画の遅延読み込みを使用する
特にウェブサイトに画像や動画が多く含まれている場合、遅延読み込みは大きなネットワークペイロードを回避するためのもう1つの優れた方法です。
通常、ウェブページが読み込まれるとき、ブラウザは、すぐには表示されない画像や動画であっても、すべてをすぐにダウンロードしようとします。
レストランで、料理が一品ずつではなく、すべて一度に出てきたらどうなるでしょう？圧倒されてしまいますよね！
これは、遅延読み込みが実装されていない場合にウェブページで起こることです。ユーザーがまだ見ることができないものであっても、すべてを事前にダウンロードする必要があります。
これは明らかに理想的ではありません。ブラウザは、ユーザーが下部のコンテンツを見るためにスクロールしなくても、ページ全体のデータを即座にダウンロードするため、大きな初期ネットワークペイロードが発生します。
これの解決策は遅延読み込みと呼ばれます。
遅延読み込みは、食事が準備できたときに各コースを提供するレストランのようなものです。
遅延読み込みを使用すると、画像や動画は、ユーザーの画面にスクロールされるまで読み込まれません。これにより、ブラウザは必要なものを必要なときにのみ読み込めばよくなります。
これにより、初期ネットワークペイロードとダウンロードする必要のあるデータ量が削減されます。
WordPressで遅延読み込みを設定する方法を説明する役立つチュートリアルを以下に示します。
4. JavaScriptおよびCSSファイルのサイズと数を削減する
ウェブサイトでの大きなネットワークペイロードを回避する最善の方法の1つは、CSSおよびJavaScriptファイルのサイズを削減することです。
あなたのウェブサイトは、スタイリングのためにCSSファイルを使用し、インタラクティブな機能のためにJavaScriptファイルを使用しています。
ただし、これらのファイルには、コードの機能に不要な余分なスペースやコメントが含まれていることがよくあります。これらの要素を安全に削除することで、ファイルのサイズを小さくできます。
これは、これらのファイルがこれまでと同じように機能することを意味しますが、ユーザーがダウンロードするデータ量が少なくなるため、ページの読み込みが速くなります。
このプロセスはミニファイ（minify）と呼ばれ、良いニュースは、WP RocketのようなWordPressプラグインを使用してファイルを自動的にミニファイできることです。
詳細については、WordPressでCSSとJavaScriptファイルをミニファイする方法に関するガイドをご覧ください。
通常、ウェブサイトのさまざまな部分は、異なるCSSまたはJavaScriptファイルを持っています。たとえば、ヘッダー用の1つのファイル、本文用の別のファイル、さらにプラグイン用のファイルがさらにいくつかある場合があります。
ただし、あまりにも多くの別々のファイルを管理すると、ブラウザがページを処理する速度が低下する場合があります。これを修正するために、多くの最適化ツールでは、これらの小さなファイルを1つの単一ファイルに結合することができ、これによりページの読み込みがよりスムーズになります。
WP Rocket（有料）やAutoptimize（無料）のような人気のプラグインは、CSSおよびJavaScriptファイルを自動的に結合およびミニファイできます。
これらのプラグインの使用方法については、WordPressでレンダリングブロックするJavaScriptとCSSを修正する方法に関するガイドをご覧ください。
5. Gzipでファイルを圧縮する
ウェブサイトのファイルを小さくするもう一つの方法は、それらを圧縮することです。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. ブラウザキャッシュを使用して繰り返しダウンロードを防ぐ
上記のヒントは初回訪問者のペイロードを削減するのに役立ちますが、サイトに戻ってくるユーザーのためにも最適化する必要があります。これはブラウザキャッシュを有効にすることで行うことができます。
訪問者がサイトを訪れるたびに、ウェブサイト上のすべてのものをダウンロードしなければならないと想像してみてください！それは信じられないほど遅くなるでしょう。そして、適切なキャッシュを使用しないと、まさにそれが起こることです。
誰かが初めてあなたのウェブサイトを訪れると、ブラウザは必要なものすべて（画像、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のようなツールを使用して定期的な監査を設定し、コアウェブバイタルを追跡してください。四半期ごとの大幅な最適化が必要になる場合がありますが、継続的なメンテナンスは通常の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でも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。