今回は私が開発したwebサービス(https://universitycommunity.herokuapp.com/) のページを読み込む速度を改善していきたいと思います。
ユーザーがサービスを利用する際に負担に感じる大部分はデザイン・表示速度の2つだと考えます。
なので今回は表示速度の改善を通じてより良いサービス開発に繋げていこうと思います。
まずGoogle社が提供しているPageSpeed Insights(https://pagespeed.web.dev/?hl=ja) を用いて表示速度を測っていきます。
モバイル版の表示速度スコア
デスクトップ版の表示速度のスコア
モバイル版のパフォーマンスは77、デスクトップ版のパフォーマンスは92です。
どちらも改善の余地がありそうです。
改善項目を読むと
どうやらサーバー応答時間、画像の読み込みに時間がかかっているようです
サーバーの応答時間の改善についてはサーバーのプランをアップグレードするのが一番早いでしょう。なので今回は画像の読み込み時間の改善をおこなっていきます。
「次世代フォーマットでの画像の配信」と書かれていますが、
Webpなどの形式の場合、画像の圧縮率に優れており、画像ファイルサイズが小さくなりダウンロードしやすくなることから画像の読み込み時間が短縮できるようです。
なので画像形式をjpegからwebpに変えて再度試してみましょう。
結果を確認すると
モバイル版の表示速度スコア
デスクトップ版の表示速度のスコア
モバイル版のパフォーマンスは86、デスクトップ版のパフォーマンスは94です。
少し改善されました。
このように画像形式を圧縮率の高いものにするとその分表示時間を短縮できます。
今回のページの場合、DBとの直接的なやりとりを行っていないためその分表示時間が短縮されていますが、DBとのやり取りがある、特に投稿一覧、ユーザー一覧ページなどの場合はN+1問題というのが発生し、その分表示速度が遅くなるようです。
N+1問題については次回扱います。