画像の形式をWebPに変えた

本ブログにて、Lighthouse使ってみると、表示速度あたりで怒られていたので、
まずはサムネ画像をWebPに変えてみました。

WebPとは、Googleが開発しているオープンな静止画像フォーマットで、
トラフィック量軽減と表示速度短縮を目的しています。 （wikiから拝借 ）

WebPを採用した結果

以下のツイートのとおりです。

たまたま100が撮れただけで、もう一回テストしみると少し落ちました。
それでも90台はキープできていそうです。

個人ブログ（Desktop版）のPerformanceが78だったので、画像をwebpに変えたら一気に100になった🎊
（モバイルは未だに70切ってる😇） pic.twitter.com/VNxztIsR28

— hon-D (@yyh_gl) November 19, 2020

Safariでは注意が必要

多くのブラウザでWebPへの対応が既に完了しています。
ただし、Safariに関してはv14でようやく対応しました。

対応状況

Safari v14は2020年9月17日（日本時間）にリリースされたばかりなので、
まだ画像をちゃんと見れないユーザが多く存在すると思われます。

リリースノート

Safariのwebp対応ってバージョン14からだったんだ😇

自分のブログに来る人の90%弱がSafariじゃないから、まぁいいか←

— hon-D (@yyh_gl) November 26, 2020

自分のブログに来る人の90%弱がSafariじゃないから、まぁいいか←

嘘です、10%ほどの方々すみません🙇‍♂
WebPにしたのはサムネ画像だけで、記事本文内の画像はWebPじゃないので許してください。。。