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

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

webpとサイトスピード測定

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

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

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

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

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

モバイル / 70
PC / 92

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

モバイル / 80
PC / 92

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

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

webpはオススメできる?

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

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

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

くらいのパターンのwebpに変換できてしまいます。

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

先の記事でもご紹介した3つのサイト様
https://saruwakakun.com/tools/png-jpeg-to-webp/
https://lab.syncer.jp/Tool/Webp-Converter/
https://convertio.co/ja/
それぞれ変換後のwebpファイルのサイズも、見た目も異なります。
圧縮率の設定がそれぞれ違うということでしょうね。
Wordpressサイトの場合でご紹介した
「WebP Converter for Media」というプラグイン
これは設定で圧縮率を変更できます。
またPhotoshopで画像を作成しwebpで保存する際にも
圧縮率は自分で設定することができます。

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

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

 

コメントを残す

メールアドレスが公開されることはありません。

前の記事

webpに変換する方法