画像をwebpに変換して表示速度を早くしてみた！
はじめに
本記事は、初心者エンジニアな私が趣味で開発しているECサイトの表示速度を早めるために奮闘している様子を備忘録も兼ねて記していきますー！
表示速度の測定ツールについて
Google Chrome 拡張機能である、lighthouse を用いて調べていきます。 表示速度の測定には、lighthouse の他にもPageSpeed Insights というサービスもあるようですが、localhost では利用できないようなので lighthouse を利用しております。
■ lighthouse 公式 chromewebstore.google.com
実際の改善結果
下記のように、表示速度に影響する 「Performance」のスコアが大きく改善されました！
対象となるページがECサイトの商品一覧ページで、多くの画像データが描写されていました。 その商品画像たちを全てwebp に変換するだけでここまで大きな結果を出すことができましたー！
さらに、実際の測定スコアだけではなく、実際にフロントを触ってみても速度改善が実感できたので大喜びです（笑）
比較的簡単に実施できるので、私のような初心者さんがポートフォリオを作成する際は是非試していただければと思いますー！
他にも、表示速度改善をするためにもN+1問題を解消するために奮闘している様子も記事にしているので、是非ご覧いただければと思います！
さいごに
ここまでお読み頂きありがとうございましたー！
この記事がどなたかの為になれば幸いです〜
