巨大なネットワーク ペイロードを回避する方法 (賢い方法)

公開: 2023-07-19

Google PageSpeed Insights レポートを実行したところ、診断セクションに次の警告が表示されました。

Google PageSpeed Insights レポートでの巨大なネットワーク ペイロードの警告を回避する

最初は「巨大」というと怖く聞こえますが、「巨大なネットワーク ペイロードを避けてください」というメッセージは簡単に修正できます。

このガイドでは、問題を根絶し、二度と警告が表示されないようにするための最も効果的なテクニックを紹介します。

さっそく飛び込んでみましょう！

ネットワークペイロードとは何ですか?

2 人の人間間の対話と同じように、ブラウザとサーバーはネットワークのリクエストと応答を通じて通信します。 したがって、ネットワーク ペイロードは、ユーザーが Web サイトを読み込むときに Web ブラウザーとサーバーが交換する情報です。

ネットワーク ペイロードを介して通信するブラウザとサーバー

より技術的な意味では、ネットワーク ペイロードは、Web サイトを構成する HTML、CSS、JavaScript ファイル、画像、ビデオ、その他のコンテンツなど、ネットワーク上で転送されるリソースの合計サイズを表します。

「巨大なネットワーク ペイロードを回避する」という警告は何を意味しますか?

簡単に言うと、「巨大なネットワーク ペイロードを避ける」とは、ページ サイズが大きすぎることを意味します。 Google PSI レポートがこの問題に注目している理由は、推奨される合計ページ サイズの 1.6MB (または 1,600kB) を超えているためです。

覚えて！

この警告の場合、最適化の取り組みをホームページのみに限定すべきではありません。 すべてのページを監視し、可能な限りサイズを削減する必要があります。

一般的な疑問を解決するために、ペイロード サイズ、ページ サイズ、およびページの重みはすべて、特定の Web ページの全体的なサイズを指し、同じ意味で使用できます。

最適なページ サイズはどのくらいあるべきですか?

最適なページ サイズはありませんが、Google では、インタラクティブまでの時間を 10 秒未満に保ちながら、3G 接続で理論的にダウンロードできるデータの最大量は 1.6 MB という上限目標であることがわかりました。

Google PSI テストは 1.6 メガビット接続 (これはかなり遅い) を使用するため、現実的には、高速ネットワークにアクセスできる視聴者間で競争力を得るには、1 ～ 1.5 MB の間の値を目指す必要があります。

これにより、サイトの速度に悪影響を与えることなく、Google Analytics、Facebook Pixel などの一般的なサードパーティ サービスや大量の画像を転送するための十分なスペースが確保されます。

ここからは次の重要な点に移ります。

巨大なネットワーク ペイロードが有害なのはなぜですか?

ネットワーク上で転送される大量のデータは、Web サイトのパフォーマンスと訪問者に悪影響を与えます。

ネットワーク ペイロードが大きいとダウンロードに時間がかかるため、次のような問題が発生します。

  • ロード時間
  • 最大の Contentful Paint スコア
  • 全体的なパフォーマンス スコアとコア ウェブ バイタル

一方、低速のネットワークと限られたデータ プランを使用しているユーザーやモバイル ユーザーは、動作が遅くイライラするユーザー エクスペリエンス、応答しないページ、さらには Web サイトへのアクセスを拒否されるという問題に直面します。 言うまでもなく、Web サイトをロードしようとすると、ネットワーク プロバイダーから追加料金が請求される可能性があります。

当然のことですが、これは、ビジネスの直帰率と離脱率が高くなり、ユーザー エンゲージメントが低下し、コンバージョン率が低下することを意味します。

結局のところ、「巨大なネットワーク ペイロードを回避する」という警告を修正しないと、オンライン ビジネスとユーザーに実際の費用がかかることになります。

幸いなことに、PageSpeed Insights レポートではより詳細に確認できるため、トラブルシューティングを開始する前に原因をより迅速に絞り込むことができます。

巨大なネットワーク ペイロードの原因を特定する

「巨大なネットワーク ペイロードを回避する」警告を展開すると、ファイルの種類とファイルが提供される場所ごとのページの重みの詳細な内訳が表示されます。

Google PSI レポートの「巨大なネットワーク ペイロードを回避する」警告の内訳

大規模なネットワーク ペイロードの最も一般的な原因は次のとおりです。

  1. 最適化されていない CSS および JavaScript ファイル (サードパーティの JS を含む)
  2. 大きな画像とビデオ
  3. プラグインやサードパーティライブラリの過度の使用
  4. 最適化されていない Web フォント

当然のことながら、次のステップは、Web ページのサイズを最も効果的に削減するのにどの技術と最適化が役立つかを検討することです。

DIYする時間がありませんか？ NitroPack は、自動操縦時の PSI 警告を排除するオールインワン プラグインです。 今すぐ試してみる→

WordPress で巨大なネットワーク ペイロードを回避する方法

1. 軽量の WordPress テーマとページビルダーを選択する

最初に軽量セットアップを使用すると、ページ サイズが確実に削減されます。 一部の WordPress テーマやページ ビルダー (Divi や Elementor など) には、過剰な機能、カスタマイズ オプション、事前に読み込まれたアセットが付属しており、Web サイトがすぐに肥大化して速度が低下する可能性があります。

リソースの肥大化による WordPress ページビルダーの比較

Web サイトを開発する前に、CSS、JavaScript、フォントをテストすることを検討してください。 また、どの WordPress テーマが速度と Core Web Vitals のパフォーマンスで優れた結果を示しているかも確認してください。

 肥大化したテーマやページ ビルダーをすでに使用している場合は、それらを最適化してネットワーク ペイロードを削減する方法がいくつかあります。

  • ヘッダー、フッター、サイドバーを CSS でコーディングします (ページビルダーでこれを行うのは避けてください)
  • 追加のページ ビルダー プラグインの使用を制限し、実行する前に CSS と JavaScript をテストします。
  • 背景画像の遅延読み込み (推奨する手法に直接ジャンプします)
  • ページのデザインとリソースを簡素化するために、一部の機能を廃止することを検討してください。

2. ウェブサイトを肥大化させる WordPress プラグインに注意してください

WordPress はプラグインを通じて大量の機能を提供します。

 ただし、プラグイン、特に動的コンテンツを生成したり、外部リソースをロードしたりするプラグインを使用しすぎると、ネットワーク ペイロードが増加する可能性があります。 各プラグインは、ブラウザーによって読み込まれる追加の CSS、JavaScript、またはその他のアセットを追加する可能性があり、その結果、ペイロードが大きくなります。

 WordPress プラグインによってページサイズが肥大化するのを防ぐためにできることは次のとおりです。

  • アクティブなプラグインが Web サイトやビジネス ニーズにまだ関連しているかどうかを確認します。プラグイン コレクションが大規模な場合、サイト所有者は特定の時点で何が役立つと考えられていたのかを見失い、サイト開発の過程でプラグインを再確認することを忘れてしまうことがよくあります。
  • プラグイン CSS と JavaScript をアンロードする:一部のプラグインは、実際には特定のページまたは要素でのみ起動する必要があるにもかかわらず、サイト全体にロードされる傾向があります。 Asset CleanUp などのツールを使用すると、それらを制限するのに役立ちます。 使用されていないスクリプトとスタイルをアンロードすることで、CSS ファイルと JavaScript ファイルのサイズを削減し、ネットワーク ペイロードを削減できます。
  • jQuery の依存関係を明らかにする:一部のプラグインは jQuery に大きく依存しているか、jQuery を非効率的に使用しています。 PSI 警告の内訳で最大の CSS/JS ファイルの中にプラグインがあることに気付いた場合は、スクリプトの依存関係を最適化するために開発者に依頼してください。

3. CSS および JavaScript ファイルを縮小する

縮小化には、空白、コメント、改行などの不要な文字を CSS および JavaScript ファイルから削除することが含まれます。 これらの無関係な要素を削除すると、ページ サイズに即座に影響します。

コードを 1 行も記述することなく、CSS と JavaScript を縮小します。 NitroPack を使ってみる →

4. サードパーティ製 JavaScript の遅延

サードパーティの原因を特定したら、それらをビューポートの下にロードして優先順位を下げ、より重要なリソースのためにメイン スレッドのスペースを解放します。

サードパーティのコードの影響を手動で軽減することは、技術的すぎると感じる人もいるかもしれません。そのような場合は、既製のソリューションを選択することをお勧めします。 特殊なソリューションまたは NitroPack のような完全なパフォーマンス最適化プラグインについては、Flying Scripts を参照してください。

5. 画像を最適化する

高解像度の画像やビデオを最適化せずに WordPress に直接アップロードすると、ファイル サイズが大きくなります。

Web ページに大きなファイルを読み込むとどうなるでしょうか? ご想像の通り。 ネットワークペイロードの増加。

画像を最適化する方法はいくつかあります。

  • 画像のサイズ変更:画像編集ソフトウェアまたはオンライン ツールを使用して画像のサイズを手動で変更すると、非常に時間がかかる場合があります。 デバイス間で画像が常に適切なサイズであることを確認するには、NitroPack のアダプティブ画像サイジングを調べてください。
  • 画像を圧縮する:画像を 85% で圧縮すると、画質に大きな影響を与えることなくファイル サイズが削減されます。 画像圧縮プラグインを使用して、メディア ライブラリ内の既存の画像を一括最適化できます。
  • WebP で画像を変換する: WebP などの次世代画像形式を使用すると、画像ファイルのサイズが削減され、コンテンツの読み込みと提供が高速化されます。
  • 画像の遅延読み込み:遅延読み込みを実装して、画像が表示される直前まで画像の読み込みを延期します。 この手法では、画面に表示されている画像のみをロードし、残りの画像はユーザーが下にスクロールするにつれてロードされるため、初期ネットワーク ペイロードが軽減されます。

NitroPack を使用して自動操縦ですべての画像を最適化します。 遅延読み込み、WebP、アダプティブ画像サイジングなど →

6. Web フォントを最適化する

Web フォントはリソースの最適化では見落とされがちですが、大規模なネットワーク ペイロードの原因となる最も重要な資産の 1 つです。

必ず Web スペース用に設計されたフォントを使用してください。 .woff2 形式で見分けられます。 また、ローカルでホストすると、外部リクエストの数が減ります。

その他の効果的なフォント最適化手法には次のものがあります。

  • ユーザーの操作が必要になるまでフォントの読み込みを延期する
  • フォントをサブセット化し、フォント内で使用可能なすべてのグリフではなく、ページに実際に表示される文字のみを使用する

ネットワークペイロードを削減するためのその他のテクニック

CDN を使用する

コンテンツ配信ネットワーク (CDN) は、世界中に分散されたサーバーのネットワークです。 CDN を使用すると、画像、CSS、JavaScript ファイル、その他のメディアなどの Web サイトの静的資産のコピーを、地理的に異なる地域のサーバーに保存できます。

コンテンツ配信ネットワーク (CDN) の説明

訪問者が Web サイトにアクセスすると、CDN はその場所に最も近いサーバーからこれらのアセットを提供し、データの移動距離を短縮し、ネットワーク遅延を最小限に抑えます。

これにより、コンテンツ配信が高速化され、ネットワーク ペイロードが削減されます。 さらに、CDN はトラフィックの急増に対処し、複数のサーバーに負荷を分散して、Web サイトの全体的なパフォーマンスと信頼性を向上させるのに役立ちます。

高品質の Cloudflare CDN のすべての特典と、NitroPack による完全なパフォーマンスの最適化を手に入れましょう →

GZIP と Brotli を使用してアセットを圧縮する

CDN の使用の論理的な拡張として、GZIP や Brotli などの圧縮技術を活用する必要があります。 これらにより、HTML、CSS、JavaScript、その他のファイルを含む Web サイトの資産のサイズを大幅に削減できます。

  • GZIP は、 Web サーバーで有効にできる、広くサポートされている圧縮方法です。 アセットがネットワーク経由で送信される前に圧縮されるため、ネットワーク ペイロードが削減され、読み込み時間が短縮されます。
  • Brotliは、さらに優れた圧縮率を提供する新しい圧縮アルゴリズムです。

実際のところ、Brotli は GZIP よりも柔軟性が高く、一般的に圧縮率が高くなります。 実際、Squash Benchmarks テストでは、Brotli がすべての圧縮レベルにわたって優れた圧縮率を提供する (つまり、より小さい圧縮ファイルが生成される) と結論付けています。

キャッシュの適用

キャッシュは、頻繁にアクセスされるデータまたは資産を一時ストレージに保存して、その後のアクセス時間を短縮する技術です。

キャッシュ メカニズムを実装すると、サーバーに対して行われるリクエストの数が減り、ネットワーク ペイロードを最小限に抑えることができます。

使用できるキャッシュにはさまざまな種類があります。

  • ブラウザーのキャッシュ: Web サーバー上でキャッシュ ヘッダーを構成すると、訪問者のブラウザーに静的アセットをローカルに保存するように指示されます。
  • サーバー側キャッシュ:オブジェクト キャッシュ、ページ キャッシュ、データベース クエリ キャッシュなどのサーバー側キャッシュ技術を実装すると、動的 Web サイトのパフォーマンスを大幅に向上させることができます。

NitroPack を使用して巨大なネットワーク ペイロードを自動的に回避する問題を修正

大規模なネットワーク ペイロードを削減するための最大のポイントは、Web サイトを可能な限り無駄のない状態に保つことです。

NitroPack を使用すると、以下を含む 35 以上の自動最適化が可能になります。

  • 高度なキャッシュメカニズム
  • Cloudflareによる組み込みCDN
  • HTML、CSS、JavaScript の縮小化
  • 完全な画像最適化スタック (遅延読み込み、適応型画像サイジング、WebP など)
  • フォントのサブセット化

他のパフォーマンス最適化プラグインとは異なり、NitroPack はクラウド上で動作するため、Web サイトの肥大化を解消し、個別の最適化プラグインの必要性を減らします。

Web サイトでデモ テストを実行して、NitroPack の動作を確認します。

Lighthouse のパフォーマンス スコアが 90 以上の 18 万人のサイト所有者に加わりましょう! NitroPack を 3 分でセットアップ →

将来の巨大なネットワーク ペイロードを回避するためのベスト プラクティス

この警告がパフォーマンス レポートに再び反映されないようにするには、次のことを行う必要があります。

  • Web サイト資産を定期的に監査し、最適化します (少なくとも 28 日に 1 回)。
  • Web 開発プロセスのパフォーマンスを優先します (はい、これはデザインも意味します)
  • さまざまなデバイスとネットワークで Web サイトのパフォーマンスをテストします (GTmetrix でシミュレーション)
  • Web パフォーマンスのトレンドとテクニックを常に最新の状態に保つ