こんにちは、Romantistでデザイナーをしている金です。
皆さんは制作したWebページを確認する時、”このページ重い!”と感じたことがありますか?
ページを読み込むのが遅くなったら興味もなくなります。
今回はなぜページが重いかを考え、どうやったら軽くできるか紹介していきたいと思います。
上のグラフを見るとWebページの重量は2015年1月、約1240KBから現在約2592KBまでほぼ2倍になっています。
インターネット速度の発展とスマートフォン、タブレットの発展、それに加えてWebで提供されるコンテンツの量の増加に伴いWebの重みはますます重くなっています。
そして、統計によりますと平均的にコンテンツの50%以上はイメージで構成されています。
皆さんのWebサイトを軽量化するには、イメージの最適化を一つの方法で考えられると思います。
PageSpeed Insights(以下PageSpeed)はGoogleのサービスで、Webページの速度に関連した様々な測定ができます。
何の制約もなく無料でデスクトップやモバイルでの速度を測定し、改善が可能な事項を提案してくれます。
使い方は簡単です。
PageSpeed(https://pagespeed.web.dev/)で接続したあと、確認したいWebページのアドレスを書いて青いボタンを押すと分析を始めます。
私はUNTICの分析をしてみました。
大きく4つの分類に分析されますが、UNTICはかなり高い点数をもらっています!
ページをスクロールすると、どの項目を基準に点数が測定されたのか説明しており、速度が遅い項目を改善できる方法も提案してくれます。
UNTICはイメージの改善のため、次世代イメージフォーマットへの変更を提案されました。
提案を見てみると、次世代フォーマットに変更するだけで元の画像の半分近くのサイズが減少します。
このような変化ができる次世代イメージフォーマットとは何でしょうか?
次世代イメージフォーマットは既存のJPEG、PNGと比較して、小さな容量でも良い画質を表現できるフォーマットです。
JPEG XLなど様々なフォーマットがありますが、ここではWebで広く使用できる2つのフォーマット"WebP"と"AVIF"について見てみたいと思います。
WebPはGoogleで開発したイメージフォーマットで、ファイルサイズを25%~35%程度に圧縮できるイメージフォーマットです。
また、透明、アニメーション機能にも対応しているため、GIF、PNG、JPEGなどの商用フォーマットを代替することができます。
デバイスに仕様に応じて、商用イメージフォーマットよりも高いリソースを必要する時があることが欠点です。
それにもかかわらず、現在広く互換性があり、現在多くの場所で使用されているイメージフォーマットです。
AVIFはAOMediaで開発したイメージフォーマットで、次世代ビデオコーデックであるAV1をベースにしたイメージフォーマットです。
圧縮効率がWebPより優れており、多くの関心を集めているイメージフォーマットです。
しかし、最新フォーマットであるだけに低い汎用性により、サポートするビューアが少なく、ブラウザのサポート率がWebPより低いです。
上記3枚の画像は同じ写真をそれぞれJPEG、WebP、AVIFに圧縮した写真です。
JPEGは約147KB、WebPは約106KB、そしてAVIFは約58KBです。
同じような品質をWebPはJPEGの60%の容量、そしてAVIFはJPEGの30%の容量で表示できます。
既存のイメージをWebPまたはAVIFなど新しいフォーマットに変えるだけで、大体の品質は維持しながらWebを軽くすることができます。
いかがでしょうか。
今回は制作したページのパフォーマンス改善のため、PageSpeedを使ってページを分析することと、イメージ最適化のため従来のイメージフォーマットに代わるWebPとAVIFについて紹介しました。
もし画像の最適化、またはパフォーマンスの改善について困ったことがあれば、お気軽に弊社にご相談ください!