画像の表示速度の向上とPageSpeedInsightsの点数向上

[TBSten]

不具合の内容

• 不具合ではないですが、改善できそうなのでissueに投げました。
• カード詳細画面のカード画像の表示が遅い（注:2回目以降は速い）。ユーザ体験的には悪い気がするので改善したい。
• PageSpeedInsightsのレポートでも指摘されている通り、最初のレンダリング時に画面内に存在する画像が遅延読み込みされている。最初のレンダリング時に画面内に存在する画像は遅延読み込みの必要がなさそうなので遅延読み込みされないように設定する必要がある。
  • next/imageのpriority propsを利用すると良さそう。

• 8/3時点のレポートではスコアがちょっと低めになっている(詳しくは参考資料) 。これを改善したい。
  • 経験的に得た知見なのですが、Nextjsにそれなりに大きめの画像を最適化させると最適化処理が重すぎて逆に表示速度が遅くなる傾向があるので、next/imageのloader propsなどを使って工夫する必要がありそうです。
• 確かpage speed insightsの点数はGoogle検索の順位にもそれなりに影響するはずなので（違ったらごめんなさい）、努力してあげていきたいところ。
  • 根本的にはChakraUIがバンドルサイズ肥大化の原因な気がしているのでTailwindCSSなど他のUIライブラリに移行も視野に入れる必要があるが、そこまで大掛かりな移行はめんどくさい。

不具合の再現手順

• 各カードの詳細ページ（特にあまり人気がなさそうなカードを選ぶと再現しやすい）を開くとカード画像のスピードが遅い。なお同じページをリロードすればすぐ表示される（キャッシュの影響だと思う）。

参考文献

参考までに 2023/08/03 時点でのレポート。

[TBSten]

他のタスクよりも優先度低めな気がするので気が向いたら対応しよっかなって思ってます。

[TBSten]

この辺りの警告を消せるとよさそう