課題

unsplashで見繕った画像をサムネにしていたが、最適化のさの字も加えていなかったためlighthouseスコアが60くらいにまで低くなっていた。

やったこと

squooshというサービスでjpg→webpに変換したうえで、サイズを1200×800に統一した。

効果

スコアが90くらいにまで回復した。

理屈では分かっていたけど、実際に試したのは初めてだった。 ここまではっきり数値として出されると、画像最適化の威力と大切さをむざむざと実感する。

まだやれること

PC想定のサイズにしたので、スマホ版ではもっと小さい画像でいい。 imgのサイズをレスポンシブに変更する方法を調べよう。microCMS側では現状eyecatchに1枚しか入れられないので、カスタムフィールドを追加する必要がありそう。