Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで膨大なサイトネットワークのペイロードを回避する方法(専門家による8つのアドバイス)

WordPressでサイトを作り始めた当初、私たちはすでに高速で信頼性の高いサイトを作るためのヒントをいくつか知っていました。しかし、WordPressのパフォーマンスを最適化するための実験を始めると、サイトを2倍近く高速化できることに気づきました!

私たちが学んだ最も重要なことの1つは、そのページを表示するために多くのデータをダウンロードする必要がある場合、サイトの速度がドロップするということです。

技術的なキーワードでは、これを「ネットワーク・ペイロード」と呼びます。これは単純に、ページを読み込むために必要なデータの総量です。総ダウンロードサイズには、テキスト、画像、動画、CSS、JavaScript、フォント、その他のコードが含まれます。

基本的に、ダウンロードする必要があるデータが少ないほど、ページの読み込みは速くなる。

サイトのスピードアップをお考えなら、うってつけの場所です!

このガイドでは、WordPressでファイルサイズを縮小し、膨大なサイトネットワークのペイロードを回避する方法を紹介します。

How to Avoid Enormous Network Payloads in WordPress

WordPressの巨大なネットワーク・ペイロードはなぜ問題なのか?

Google Lighthouseや PageSpeed Insightsのようなツールを使って、自分のサイトの速さをチェックしたことはありますか?

時々、『巨大なネットワーク・ペイロードを避けるように』というメッセージが表示されることがある。

基本的に、これはあなたのウェブページが大きすぎることを意味し、重すぎて運べないスーツケースのようなものです。大きなウェブページは読み込みに時間がかかり、サイトを訪れる人々をイライラさせます。

Example of 'Avoid Enormous Network Payloads' Message in Google Lighthouse

ウェブページのネットワーク・ペイロードとは、そのページを構成するすべての要素の合計サイズのことです。これには以下が含まれます:

  • テキストページで読む言葉
  • Imagely & Media:あなたが見る写真や動画
  • コード:ページの見栄えを良くし、正しく動作させるためのCSSとJavaScriptファイル。
  • フォント:テキストの特別なスタイル
  • 加えて、その他のカスタム要素も。

そのため、これらの要素がすべて組み合わされれば組み合わされるほど、ウェブページが画面に表示されるまでの時間が長くなります。

どのくらいの大きさが大きすぎるのか?これが簡単な目安だ:

  • Good:ウェブページのすべてのパーツの合計が2MB未満であれば、軽いバッグを持っているようなものです。最適化されており、読み込みも速い。ここではあまり心配する必要はない。
  • 改善が必要です:もしあなたのウェブページが2MBから4MBの間だとしたら、少し重くなってきたバックパックを背負っているようなものだ。もっと軽くできることがあるかもしれません。Googleが高速化のヒントを教えてくれるだろう。
  • 巨大:ウェブページの容量が4、5MBを超えると、巨大なスーツケースを持ち運ぶようなものです。これではサイト訪問者のスピードが遅くなるので、最適化を優先する必要があります。

莫大なネットワーク・ペイロードを避ける」というメッセージが表示されたら、小さな矢印をクリックすると、ウェブページを構成するすべてのリソースのリストが表示されます。

Expanding the 'Avoid Enormous Network Payloads' Message in Google Lighthouse

一番大きなファイルがリストの一番上にあるのがわかりますか?これらのファイルを小さくしたり、不要なファイルを削除することに集中すれば、WordPressのパフォーマンスが最も向上します。

これらのファイルを小さくすることで、ウェブページを表示するために使用するデータが少なくなり、読み込みが速くなります。

大きなページがなぜ問題なのかがわかったところで、WordPressでそれを避ける方法を探ってみましょう。この投稿で取り上げる8つのヒントはこちらです:

準備はいいかい?さっそく飛び込もう!

1.画像を小さくする

ネットワーク・ペイロードが大きくなる最大の原因のひとつは、大きな画像である。

今日のスマートフォンやカメラは、非常に大きなファイルサイズで高品質の画像を撮影します。しかし、サイトに掲載する場合は、それほど大きなファイルサイズにする必要はありません。

幸いなことに、画像を最適化することで、画質を落とすことなく最大80%まで小さくすることができます。これは、サイトのネットワーク・ペイロードに他の何よりも大きな影響を与えます。

Optimized vs Unoptimized Images in WordPress

WPBeginnerでは、アップロードする前にすべての画像を最適化しています。画像を正しいサイズにリサイズし、様々なツールを使ってファイルサイズを小さくします。

私たちは、私たちのサイトでの正確な方法に基づいて、役立つガイドをまとめました。このガイドに従って、簡単にサイトネットワークのペイロードを減らすことができます:

2.正しい方法で動画を埋め込む

サイトに動画を掲載する場合、その表示方法には注意が必要だ。

動画をサイトに直接アップロードすると、ネットワークのペイロードが大きくなり、サイトの速度が著しく低下する可能性があります。

動画を掲載する最善の方法は、YouTubeやVimeoなどの動画プラットフォームから動画を埋め込むことだ。

:動画のホスティングサービスとストリーミングにはYouTubeを使用しています。WPBeginner YouTubeチャンネルでWordPress動画チュートリアルをご覧いただけます。

この方法でも、サイト上で動画を再生する権限がありませんが、実際には他人のサーバーに保存されているため、サイトネットワークのペイロードの一部にはなりません。

サーバーが重いデータ転送を処理する必要がないので、本当に助かります。さらに、これらのプラットフォームは、訪問者のインターネット接続に適応するように最適化されたストリーミングで、効率的に動画を配信するように設計されています。

さらに、これらのプラットフォームの多くの動画プレーヤーは、ユーザーが再生をクリックしたときにのみ動画の読み込みを開始するため、最初に転送されるデータが少なくなる。

埋め込みコードを使えば、サイトに動画を簡単に追加できる。

Embedding a YouTube video in your WordPress website

このトピックについては、WordPressに動画をアップロードしてはいけない理由をご覧ください。

3.画像や動画にレイジーローディングを使用する。

レイジーローディングは、特にサイトが画像や動画でいっぱいの場合、大きなネットワークペイロードを避けるもう一つの素晴らしい方法です。

通常、WordPressはウェブページが読み込まれると、たとえすぐに表示されなくても、すべての画像や動画をすぐにダウンロードしたがります。

レストランでコース料理が1品ずつではなく、すべて一度に出てきたらどうだろう。圧倒されるだろう!

これは、遅延ローディングが実装されていない場合にウェブページ上で起こることだ。ユーザーがまだ見ることができなくても、すべてを前もってダウンロードする必要がある。

これは明らかに理想的ではありません。サイトのペイロードが大きくなり、ユーザーがページ下部のコンテンツを表示しなくても、多くのデータをダウンロードすることになるからです。

これを解決するのがレイジーローディングだ。

レイジー・ローディングとは、レストランで食事の準備ができたときにコース料理が運ばれてくるようなものだ。

レイジーローディングでは、画像や動画は、ユーザーの画面にスクロール表示されるまで読み込まれません。こうすることで、ブラウザーは必要なときに必要なものだけを読み込むことができます。

これにより、最初のネットワーク・ペイロードとダウンロードしなければならないデータ量が削減される。

WordPressで遅延読み込みを設定する方法を紹介するチュートリアルをいくつかご紹介します:

4.JavascriptとCSSファイルのサイズと数を減らす

あなたのサイトで大きなサイトネットワークのペイロードを避ける最良の方法の一つは、CSSとJavaScriptファイルのサイズを小さくすることです。

あなたのサイトは、スタイリングのためにCSSファイルを使用し、インタラクティブな機能のためにJavaScriptファイルを使用します。

しかし、これらのファイルには、コードの機能上必要のない余分なスペースやコメントが入っていることが多い。ファイルサイズを縮小するために、これらの要素を安全に削除することができます。

つまり、これらのファイルはこれまでと同じように機能しますが、ユーザーがダウンロードするデータは少なくなり、ページの読み込みが速くなります。

このプロセスは最小化として知られており、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%削減できることがよくあります!これは、転送に必要なデータ量を大幅に削減することになります。

How Gzip Compression Works

ファイルのダウンロード時間が短縮され、WordPressサイトの読み込みが格段に速くなります。圧縮されたデータがユーザーのコンピューターに届くと、ブラウザーは自動的にファイルを解凍し、ユーザーの画面に表示します。

Gzip圧縮は現在普及しているすべてのウェブブラウザで動作するため、ユーザーのブラウザがGzip圧縮をサポートしているかどうかを心配する必要はありません。

多くの優れたキャッシュプラグインもGzip圧縮をサポートしている。人気のオプションには、WP RocketWP Super CacheW3 Total Cacheなどがあります。

私たちは以前、WPBeginnerサイトでWP Rocketを使用しました。詳細については、WP Rocketのレビューをご覧ください。

WP Rocketでは、WebホスティングサービスがApacheサーバーを使用している場合、Gzip圧縮が自動的にオンになります。他のキャッシュプラグインの場合は、プラグインの設定で有効化する必要があるかもしれません。

WP Rocket Is Activated and Working

詳しい手順については、WordPressでGzip圧縮を有効化する方法をご覧ください。

6.ブラウザーキャッシュを使用してダウンロードの繰り返しを防ぐ

WordPressで膨大なサイトネットワークのペイロードを避けるもう一つの方法は、特にリピーターが多いサイトの場合、ブラウザーキャッシュを試してみることです。

もし訪問者がサイトを訪れるたびに、サイト内のすべてをダウンロードしなければならないとしたらどうでしょう!それは信じられないほど遅いでしょう、そして、あなたが適切なキャッシュを使用しない場合、それはまさに起こることです。

誰かが初めてあなたのサイトにアクセスすると、ブラウザーは必要なものすべて(画像、CSS、JavaScript、その他すべてのリソース)をダウンロードします。ブラウザーキャッシュを使用すると、ブラウザーはこれらのファイルのコピーをコンピューターに保存します。

そうすれば、次に誰かがあなたのサイトを訪れたとき、彼らのブラウザーは賢い!あなたのサーバーに再度すべてを要求する前に、ローカルに保存されたファイルをチェックします。

ブラウザーがキャッシュにファイルのコピーを持っている場合、再度ダウンロードする代わりにそれを使用します。これは、サイトネットワーク全体のペイロードを削減する上で大きな違いをもたらし、常連の訪問者により速くスムーズな体験を提供します。

もちろん、ニュースサイトや定期的に更新されるブログのように、ウェブサイトのコンテンツが頻繁に変更される場合は、最新バージョンのファイルを再ダウンロードするタイミングをブラウザーに知らせる必要があります。そうすることで、誰もが最新のコンテンツを入手できるようになります。

WordPressにExpiresヘッダを追加することで、これをコントロールすることができます。 このヘッダは、保存されたファイルがいつ古いとみなされ、更新が必要になるかをブラウザーに伝えます。

7.少ないフォントまたはシステムフォントを使う

フォントはサイトの見栄えを良くし、読みやすさを向上させます。カスタマイザーを使用することで、サイトをユニークなものにし、訪問者の閲覧時間を増やすことができます。

Set Sail Studios Make Money Selling Unique Fonts

しかし、サイトにアクセスするたびに、たくさんの異なるフォントをダウンロードしなければならないとしたらどうだろう。ページ上にすべてを表示するのに時間がかかるだろう。

重要なのは、サイト上で使用するフォントの数を少なくすることです。主要なフォントを2つだけに先頭に固定表示し、サイト全体で使用することをお勧めします。こうすることで、訪問者がダウンロードする必要があるファイルの総数を減らすことができます。

さらに良いことに、カスタムフォントの代わりにシステムフォントを使うこともできる。

システムフォントとは、すでにコンピューターにインストールされているフォントのことです。ArialやTimes New Romanなど、コンピューターに標準搭載されているフォントを使うようなものだと考えてください。

サイトにシステムフォントを選択すれば、ユーザーは余分なファイルをすべてダウンロードする必要がなくなります!これにより、ネットワーク・ペイロードのサイズが大幅に削減され、サイト訪問者がより速くサイトを閲覧できるようになります。

2021年にWPBeginnerサイトをリニューアルした際、システムフォントを使い始めました。これは小さなことのように思えるかもしれませんが、実際に違いがありました!私たちのサイトは、すべてのユーザーにとってより速く読み込まれましたが、特にインターネット接続が遅いユーザーにとってはそうでした。

詳しくは、WordPressサイトでGoogleフォントを無効化する方法をご覧ください。

8.遅いプラグインを避ける

最後にプラグインについて。プラグインは、余分なJavaScriptやCSSファイルをたくさん読み込むことで、サイトを遅くしたり、ネットワーク・ペイロードのサイズを大きくしたりすることがあります。

プラグインはサイトに追加する追加ツールと考えるべきだ。軽量で優れたものもあれば、かなり重いものもある。重すぎるプラグインを使いすぎると、サイトのダウンロードサイズが大きくなってしまいます。

どのプラグインが遅いかを一目で知るのは難しいので、少し調べる必要がある。ここでは、遅いプラグインを見分けるのに役立つガイドを紹介する:

ページのダウンロードサイズを増加させるプラグインを見つけたら、いくつかのオプションを設定します。

まず、プラグイン開発者に連絡し、プラグインをより効率的にするためにできることがないか確認してください。あるいは、同じことをする、より高速なプラグインを探すこともできる。

おすすめのプラグインについては、WordPressプラグインの選び方ガイドをご覧ください。

👉関連投稿:プラグイン開発者に連絡を取るのは少し不安ですか?WordPressのサポートを正しく依頼する(そしてサポートを受ける)方法についてのガイドをご覧ください。

時には、重たいプラグインがあなたのサイトに必要不可欠な場合もあるでしょう。そのような場合でも、そのプラグインをあらゆるページでロードするのではなく、必要なページでのみロードすることで、サイトを高速化することができます。

Plugin Organizerという無料のプラグインを使って、不要なページのプラグインを無効化することができる。そうすることで、そのページのサイトネットワークのペイロードを減らすことができる。

プロの助けが必要ですか?

誰もが「Avoid enormous network payloads」エラーをトラブルシューティングする時間があるわけではありません。そんな時は、WordPressの専門家にお任せください。

当社のサイトスピード最適化サービスには、画像圧縮、遅延読み込み、キャッシュ設定などが含まれます。また、改善前と改善後のパフォーマンスレポートもご提供いたします!

このチュートリアルで、WordPress で膨大なサイトネットワークのペイロードを回避する方法を学んでいただけたでしょうか。WordPress のパフォーマンスを向上させる他の方法についてのガイドもご覧ください:

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.