「過大なネットワークペイロードの回避」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「過大なネットワークペイロードの回避」とはどういう意味か、また診断結果を改善する方法についても解説します。

「過大なネットワークペイロードの回避」とは？

PageSpeed Insightsで自社サイトの速度を計測してみると、意外と辛い評価になることがあり、多くのエンジニアの方が少しでも表示速度を速くしようと日夜努力を重ねています。

ウェブサイトの表示速度はそのサイトの評価にも直接影響を与えますから、そこへ意識を持っていくことはSEO対策としてもユーザーフレンドリーなサイト作りとしても有効な手段です。

「過大なネットワークペイロードの回避」を指摘された場合も同様です。この指摘はページのリソース合計が大きすぎるときに表示されます。リソースが大きすぎれば当然ページをロードする際に時間がかかります。瞬時に表示されるサイトを目指してこの点を改善していきます。

PageSpeed Insightsは2018年11月より分析エンジンをLighthouseにしました。これによりLighthouseの判断する基準を知らなくては、サイト構築することが難しくなっています。

PageSpeed Insightsにおいて「過大なネットワークペイロードの回避」が表示される場合は、ページのリソース合計が大きすぎると判断されたときですが、Lighthouseはページのリソース合計が1,600KB以上であると「大きすぎる」と判断します。

スマートフォンなどモバイル端末を使って、かつwifi接続ではなく3Gや4G回線でネットに繋がっている場合でもターゲットのページを1秒未満で読み込むことができればユーザーはストレスなくサイトを訪問してくれますが、それ以上の遅滞は離脱率を高めてしまう結果になるかもしれません。

一般的にページリソースの大半は画像や動画が占めています。かといって軽量化するために画像や動画を完全に消去してしまうわけにもいきませんので、ページのデザインを変えることなく少しでも軽量化を図る手段を考えます。

最も有効なのは画像を最適化することです。最適化の第一歩は「あまり画像を多用しない」ということになります。画像使用の目的はイメージ戦略ですから、他の方法（CSSによるエフェクトやアニメーションなど）でも代用できるなら、極力画像は使わないということが最良の最適化方法になります。

本当に必要な画像ならまずその形式を考慮します。進化する高解像度のディスプレイ上に表示されても画像が粗くなることなく、かつ軽量化を実践するには画像形式は重要です。

画像がベクタ方式であればSVG形式で、ラスタ方式であればWebP形式、またはPNG、JPEG形式を選択します。また画像に付与されている冗長なメタ情報（撮影日、撮影者、撮影地、色深度指定等々）なども削除して画像そのもののデータ量を軽減します。

さらに画像サイズも同じイメージのものを複数サイズ用意しておき、デバイスによって最適な画像を読み込むようDPRで振り分けるよう指定することも可能ですが、この辺りは作業する人の知識とスキルによっても変わってきます。