自前サーバーで運用していて、画像最適化が重い。どうしますか。
まず最適化がどこで行われているかを確認します。リクエストのたびに変換していればCPUを食います。事前にリサイズする、外部に逃がす、最適化を切る、の3つが打ち手です。
面接官が見ているのは「便利機能の裏側にコストがある」と分かっているか。
これは「img タグではなく next/image を使う理由は何ですか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- 実際にどれだけ効いているかを測り、事前最適化や CDN への退避を検討する
測ってから動く順序が正しいです。画像が数枚なら構成を変える価値はありません。 - 最適化を無効にして素のまま配信する
自前で最適化済みの画像を用意しているなら、これが素直な選択です。公式も「無効にしても他の利点は保てる」と書いていて、レイアウトシフト防止も遅延読み込みも残ります。失われるのは変換だけです。 - 画像を事前に適切なサイズと形式で用意しておき、実行時の変換を減らす
素材を管理できる場合、これが一番安い解になります。 - サーバーのスペックを上げる
解決はしますが、原因に触れていません。面談では「他に手はないか」と必ず聞かれます。
面接官は何を見ているか
- 最適化がサーバーの処理だと理解している
- 事前に最適化しておく選択肢を挙げた
- CDN に逃がす発想があった
模範解答
最適化がどこで行われているかを確認するところから始めます。リクエストのたびにサーバーが変換していれば、CPU を食いますしキャッシュのためのストレージも要ります。
打ち手は3つあります。1つは、画像をビルド前に適切なサイズ・形式で用意しておき、実行時の変換を減らすこと。素材の管理が効く場合はこれが一番安いです。2つ目は、画像だけ CDN や画像配信サービスに逃がすこと。3つ目は、最適化を無効にして素のまま配信することです。公式も「最適化を無効にしても next/image の他の利点は保てる」と書いていて、レイアウトシフトの防止も遅延読み込みも残ります。失われるのはリサイズと形式変換だけなので、自前で最適化済みの画像を用意しているならこれが素直な選択になります。
判断の順序としては、まず実際にどれくらい効いているかを測ります。画像が数枚しかないのに構成を変えるのは割に合いません。