あらゆる手を尽くしたのに、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 を使用して動画をホストおよびストリーミングしています。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つの単一ファイルに結合することができ、これによりページの読み込みがよりスムーズになります。
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. ブラウザキャッシュを使用して繰り返しダウンロードを防ぐ
上記のヒントは初回訪問者のペイロードを削減するのに役立ちますが、サイトに戻ってくる人のためにも最適化する必要があります。これは、ブラウザキャッシュを有効にすることで行うことができます。
訪問者がサイトを訪れるたびに、ウェブサイト上のすべてのものをダウンロードしなければならないと想像してみてください！それは信じられないほど遅くなるでしょう。そして、適切なキャッシュを使用しないと、まさにそれが起こることです。
誰かが初めてあなたのウェブサイトを訪れると、ブラウザは必要なものすべて（画像、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でもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。