はじめに
ウェブサイトにとって、ユーザー体験を向上させるにはページの速度が鍵となっています。例えば、ウェブサイト内にあるコンテンツの読み込み速度が長くなると閲覧者がそれを避けるべくサイトを離れていきます。誰しもが経験のあることだと思います。
ページ速度の指標として、Googleが公開しているウェブ上のツール「PageSpeed Insights」が多く使われています。PageSpeed Insightsは、ウェブページのコンテンツを解析し、ページの読み込み時間の短縮方法を生成する、というものです。
2021年5月よりGoogle PageSpeed Insightsのアルゴリズムが改訂され、これまでのウェブサイトの速度の計測に加え、ユーザーが感じるページ体験の要素が加わり、Google Chromeに組み込まれているサイト監査ツールのLighthouseによる評価と分析結果が表示されるようになりました。注目するポイントとして「スムーズにモバイル対応していること」「不満を感じることなく閲覧できること」「HTTPSが設定されていること」が今回の改訂において重要視されます。
また、アルゴリズムの改訂に加え、GoogleのUX指標である「Core Web Vitals」が加わり、コンテンツの読み込み時間、ユーザーが初めに操作したときに生じる遅延、読み込み完了までのレイアウト移動が表示されるようになりました。
今回はページスピード速度を上げるために最も効果的かつウェブサイトの多くの容量を占める「画像」についてお話していきたいと思います。この記事を読み終えた時にはページ速度を上げるためにどのように画像を改善すべきかがわかるようになります。
ウェブサイトにおける画像の改善方法
画像の改善にはPageSpeed Insightsにある以下の4つのポイントがページスピードを改善するにあたり重要となります。また本記事の後半には、具体的な事例として、以下の4点を改善したカインズのサイトパフォーマンスのビフォー＆アフターをお見せします。
- Properly Size Images：モバイル対応の適切な画像サイズの表示
- Serve images in next-gen formats：圧縮率の高いWebPやAVIFの拡張子
- Defer Offscreen Images：スクロールした時に表示される画面外の画像の遅延読み込み
- Efficiently Encode Images：効果的な画像の圧縮
「Properly Size Images」とは、適切な画像サイズで展開することです。昨今はPC、スマートフォン、タブレットなどスクリーンサイズの異なるデバイスからウェブサイトにアクセスされます。モバイルから間違った解像度を読み込むと、小さすぎる画像やボヤけた画像が表示されるかもしれません。また不必要な大きな画像を読み込むと閲覧者のデータ通信量を費やし、余計に多くのコストがCDNの費用にかかってきます。
画像最適化をする上で最も複雑で時間のかかるのが画像サイズの変更です。またスマートフォンやタブレットなどのデバイスからアクセスする際に、いくつもの違うサイズ、解像度の画像を用意する必要があります。
2つ目の「Serve images in next-gen formats」とは一般的に使用されるPNGやJPEGではなくその名の通り次世代の拡張子を使うことで、Googleが推奨している方法です。次世代の拡張子とはWebPやAVIFと呼ばれるもので、従来のものよりも約50％以上のファイルサイズの圧縮が可能です（図1）。
また次世代拡張子は初めてHDR（High Dynamic Range）カラーをサポートしており被写体の際立って明るい部分も白飛びすることなく、明るくリアルな映像を表示できる仕組みとなっています。NetflixでもAVIFを使用しておりスムーズで快適な画像表示を実現しているのでおすすめの拡張子です。
