microCMSで画像を扱う際のパフォーマンス改善
はじめに
microCMSを使用してサイトを構築するにあたり、画像を扱う機会がありました。
同一ページにmicroCMSから取得した画像を複数枚表示するようなイメージです。
そのまま取得して表示していたところパフォーマンスが悪くなってしまい現場で指摘を受けたため改善に取り組みました。
その際の備忘録を残しておきます。
microCMSの画像最適化機能
microCMSには画像をアップロード時に編集しなくてもqueryパラメータを付与することで編集できるapiが搭載されています。
下記に公式ドキュメントがありますので、ぜひご覧ください。
このセクションでは実際に使用した機能を紹介します。
webpフォーマットへの変換
まずはじめに指摘を受けた箇所です。
特にフォーマットを指定していない場合、複数人で触る際には大体pngかjpgの形式で画像がアップロードされるはずです。
webpに変換することでサイズの削減ができます。
いちいち変換するのは大変なのでqueryパラメータにfm=webpを指定してあげることで変換してくれます。
-下記ドキュメントより引用
https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0b33104ab3fd2ba2d6b12e8ef25734de/sample-02.png?fm=webp
品質の調整
画像の品質もコントロールできます。
0~100で範囲で指定できます。
今回は80で設定しました。
80に設定することで100と比べるとファイルサイズは削減できるかつ画質も人間の目には100と比べてあまり変わらず設定できます。
幅と高さの調整
microCMSではwidthとheightをあらかじめ指定することでスペースを確保できます。
microCMSに限った話ではないですが画像を扱う際にはあらかじめスペースを確保しておくことで画像が表示された後にレイアウトが変わる現象を防げたりします。
また、大きい画像も小さいサイズをあらかじめ指定しておくことでダウンロードする際のサイズを縮小できます。
react特有のパフォーマンス改善
下記はreactでのパフォーマンス改善の備忘録です。
microCMSでの画像の扱いのほかにreact特有のパフォーマンス改善も行なったおまけ程度に。
useMemo
microCMSから情報を取得しページを更新する場合、不要な際レンダリング防止のために使用しました。
useCallback
こちらも再レンダリングを防止できます。
メモ化したハンドラーを使用することで不要な再計算を防いでくれます。
その他
react特有でもないパフォーマンス改善です。
debounce
debounceを使用することで不要なapiのコールを防ぐことができます。
高頻度で発生するイベントを抑制することができます。
lazyload
遅延読み込みです。
一番簡単に改善できます。
これを指定することで画像をロードするタイミングを遅らせることができます。
<img src="画像のURL" loading="lazy" />
まとめ
上記のような実装を行うことで多少なりともパフォーマンスの改善が見込めそうです。
キャッシュ戦略も実装していますが、まだまだなんとかできそうなので今後もその辺り調べていこうと思います。
読み込み速度の改善はおわりなくキリがないですが、今後も調査は続けてより良いサイトを構築できるようにしていきたいです。
Discussion