PageSpeed Insightsのスコア改善方法～画像編～

「LPのページ表示速度早くして。よろしく！」

…なんと…。どうすればいいのかわからない。
でもこーゆー無茶ぶり嫌いじゃない…燃えてくるタイプです。

自分なりに調べて実行した結果を、備忘録としてまとめます。

まずはじめに、調べて分かったこと↓

• ページの表示速度は、Googleの検索順位にも影響を与えるといわれている

• 直帰率を改善するにも重要
  2017年と2018年のGoogleの調査によると、ページ表示速度が1秒から3秒になると直帰率が32%増加、6秒になると106%増加、10秒まで遅くなると123%増加すると報告されてるそう。

そこで、「PageSpeed Insights」の結果を軸として、ページ速度改善を実施することにしました。
PageSpeed Insightsで測定される表示速度の目安は、モバイルは40・パソコンは80にするとよいとされていらしい。でもこれはあくまで、コンピューター予想。
ユーザーがデータを取得できるほど多いURLだと、実際のユーザー体験から合否も出してくれる。
目指したいところは、「合格」かつモバイル40以上・パソコン80以上！

実際に自身が不合格=>合格、モバイル36=>80、パソコン65=>97にしたページの速度改善方法について以下にまとめました。
長くなりそうなので、今回は画像付近の対応から。

画像のWebp,Avif化

画像の軽量化をするだけでもかなり改善される方法でした！

画像はpng,jpegからwebp,avifに変換することで、以下のようなメリットがあるよう。

• 画質を維持したまま圧縮できる

• 透過処理・アニメーションに対応している

• SEOに有利になる

pngやjpgからwebpやavifへの画像変換は、私は無料アプリを使っています。
ブラウザ上で変換可能なサイトなどもありますが、

• 複数枚同時変換が可能なこと

• 画質クオリティーのレベルが選べること

• 変換前のデータが入っていたフォルダに、変換後のデータを保存してくれること(zipファイルでダウンロードみたいな手順がなくて楽)

などの理由からこの無料アプリを使っています。

しかし、webp,avifに対応していないブラウザがあるため、それを回避するために、以下のようにコードを書き換え対応しました。

before

いままで画像のコードを以下のように記載していましたが…。

<img src="images/photo.png" alt="写真">

after

以下のように書き換えることで、ブラウザに対応している画像を上から順に読み込んでくれる模様。

<picture>
  <source srcset="images/photo.avif" type="image/avif">
  <source srcset="images/photo.webp" type="image/webp">
  <img width="400" height="200" src="assets/images/photo.jpg" alt="写真">
</picture>

imgタグに「width="400" height="200"」を追記している理由は、CLS（Cumulative Layout Shift）を防ぐためです！

次項でCLSについてまとめます。

CLS（Cumulative Layout Shift）について

CLSは、Webページのレイアウトの安定性を評価するための指標のことです。
ページが読み込まれる過程で、imgなどの要素が予想外の位置にずれることによって発生する視覚的な不快感や誤操作を示します。

CLSの改善はUXを向上させるために重要な指標で、検索エンジンのランキングにも影響を与えるようでした！

CLSが発生している要因が、画像の幅と高さを明示的に指定していないことだということ。
それを防ぐためにimgタグ内に「width="400" height="200"」を追記することで、画像の影響におけるCLSの数値を改善することができました。

before

<img src="images/photo.png" alt="写真">

after

<img width="400" height="200" src="images/photo.jpg" alt="写真">

まとめ

画像ファイルの圧縮(Webp、Avif化)をする。
画像の幅と高さを明示的に指定すること。
今ではこの2点は、チーム内でもコーディングする上での最低限ルールになっています！