この記事は ウェブクルー Advent Calendar 2022 21日目の記事です。
昨日は @ayuko902ayuko さんの「参考になる！タメになる！パワポデザイン術 おすすめアカウント3選」でした。
PageSpeed Insightsで指摘されがちな改善提案とそれらの対策について簡単にまとめてみました。
既にPageSpeed Insightsを使ってサイト改善に取り組んでいる方にとっては
基礎的な内容かとは思いますが、ご了承いただけると幸いです。
そもそもPageSpeed Insightsとは
PageSpeed Insightsは、WEBページの読み込み速度をスコアで表示してくれるGoogleのツールです。
ページ上部の入力欄にスコアを表示させたいページのURLを入力し「分析」ボタンをクリックすると
モバイル版・PC版の各スコアが100点満点の総合スコアで表示されます。
また、「改善できる項目」としてスコアを向上させるための具体的な改善策を提案してくれます。
PageSpeed Insightsのスコア向上はCore Web Vitals（Googleが提唱したSEO評価に影響ある指標）の
改善に大きく関わるので、提案された改善策はなるべく解決しておきたいところです。
本記事では「改善できる項目」で指摘されがちな内容をいくつかご紹介していきます。
指摘されがちな改善提案と対策
①次世代フォーマットでの画像の配信
Webページに表示される画像の形式はPNGやJPGを使いがちですが、
それらはダウンロード時間やデータ消費量に負荷がかかりやすく、読み込み速度低下に繋がります。
対策
画像形式をWebPに変換することで解決できることが多いです。
WebPはPNGやJPEGより圧縮率が高いため、ダウンロード時間やデータ消費量が抑えることができます。
IEは非対応ですが、Chrome、Firefox、Edge、Safariは対応しているので
サイトがIEをサポートしていなければガンガンWebPを使っていきたいところです。
こちらなどでPNGやJPGの画像をWebPに変換することができます。
②オフスクリーン画像の遅延読み込み
「画面内に表示されている画像のみを先に読み込むようにしましょう」という提案です。
何も対策していない状態だと、Webページ内の全ての画像を一度に読み込むこととなり
表示速度低下に繋がってしまうわけです。
対策
指摘を受けた画像のimgタグにloading="lazy"を付与すれば解決します。
こうすることで、画面内に該当画像が表示されたタイミングで読み込まれるようになります。
<img src="hoge.jpn" alt="画像だよ" loading="lazy">
③適切なサイズの画像
不必要に縦横のピクセルが大きい画像を使用していると、この指摘を受けます。
画像はただでさえデータ量が多いので、ピクセル数が大きければ大きいほど
表示速度低下に繋がってしまうのです。
対策
これは指摘通り画像を適切なサイズに変更することで解決できるのですが
ここで言う適切なサイズとは「デバイスの持つ画面幅に収まるサイズ」のことになります。
例えばスマホの画面幅が400pxの場合、500pxの画像を使用するとこの指摘を受けてしまうので、
400px以内に調整する必要があります。
最後に
簡単にですが、よくある改善提案をピックアップしてみました。
他にも「使用していないJavaScriptを削減してください」「画像要素にwidthとheightを指定してください」などなどあらゆる視点で指摘を受け、解決に苦労する項目もあるのですが
今回挙げた項目は比較的容易に対応できる内容なので、もしご担当されているサイトが
未対応でしたら是非対応してみることをオススメします。
明日は @yusuke-kobayashi0117 さんの記事です。
よろしくお願いします！