webpを使用するとスピード測定はどれだけ変わるのか

前回、webpに変換しましょう的なことを記したのですが
今回はwebpを実際に使用してみてwebサイトのスピードはどうなったか？
もっと言ってしまうならwebpはオススメできるのか、どうオススメできるのか？といったような内容になります。

webpとサイトスピード測定

・最近よく見るようになったから
・気付いたら主要のブラウザがすべて対応してたから
など、webpを使用してみた理由はいくつかあるのですが一番の理由は、、

・PageSpeed Insightsが
改善できる項目
「次世代フォーマットでの画像の配信」
「効率的な画像フォーマット」
といつもうるさかったから、です笑

サイトのスピード測定で
PageSpeed Insightsをご使用の方はまず目にしたことがあるのではないでしょうか？
https://pagespeed.web.dev/
自分の場合は減点の1、2番目はまずこれでまちがいなかったです笑

それで実際にサイト内の画像をjpg、pngからwebpに変更し
測定し直したら、効果はどの程度のものなのか？
少しメモしてみました。

あるサイトのトップページに6点のpng画像があり
元の測定結果が

でした。
改善できる項目は圧倒的に
「次世代フォーマットでの画像の配信」とおっしゃっています。
なので、、
6点の画像すべてpngからwebpに変換し、再度計測。

、、、あまり変化ありませんでした笑
もちろん良くはなったのですが元の改善できる項目「次世代フォーマットでの画像の配信」の比重から考えるともっと良くなってほしかったのが本音です。
この時の改善できる項目には「次世代フォーマットでの画像の配信」は消えて、擦り替わるようにFontAwesomeをCDNから読み込んでいる一行が入ってきました。
こっちは元々そこまで言ってなかったくせに笑

とまぁ、まちがいなく効果はあった
あったのですが、、なんか「思ってたほどじゃなかった」「そこまででもない」というのが正直な感想です。

webpはオススメできる？

これは結論から言ってしまうと、期待した程ではなかったものの、効果はそれなりに見えましたし、先の記事で書いたのですが
使用することのデメリットというのはほぼ皆無なため、オススメはできます。

ただ、変換するというせっかくひと手間かけるのであれば
ご自身のサイト、または使用する理由に合ったwebpにすることがオススメです。

webpの特徴で「高画質なまま圧縮率が高い」とあり
画質を保ちつつの圧縮率が高い、のはまちがいないのです、、が。
圧縮率によってやっぱり画像は粗くなります。過信はとてもできないレベルです。
例えばjpg、pngなどの元画像と比べて
圧縮率の違いにより、見た目は
ほぼ変わらない / このくらいなら気にならない / あきらかに汚い
くらいのパターンのwebpに変換できてしまいます。

・見た目汚い → サイズ容量は軽い
・見た目キレイ → サイズ容量は重い
当たり前ですが、このようなことにはなります。

「見た目がキレイ」を取るか、「サイズがともかく軽い」を取るか
web作成のよくあるある問題はここにもあるのです、小さいことですが笑
そこまで重い差ではありませんが、気になる方は一度、圧縮率の違うファイルを目視でご確認されることをお勧めします。

個人的には、webpに変換されただけでサイズはかなり軽量化されるし
webpにさえなっていればPageSpeed Insightsにとやかく言われないですし
圧縮率は極力抑えた、見た目がキレイなwebpがいいと思ってます。