AI生成コンテンツのための画像最適化
AI画像は特有のパフォーマンス問題を引き起こします。生成が完了するまで、画像のサイズ、フォーマット、または内容がわかりません。それでも、読み込みの遅延やレイアウトシフトを防ぐ必要があります。
無料のAI画像生成器を構築する際、私は以下の手順を用いました。
標準的な最適化では、事前に画像がわかっていることを前提としています。ビルド時に寸法を計算して最適化できますが、生成された画像はこのルールに当てはまりません。ユーザーがリクエストするまで、画像は存在しないからです。
配信の処理方法：
- AIの生の出力は通常PNGです。PNGファイルはサイズが大きすぎ、多くの場合800KBから1.2MBの間になります。
- 画像をWebPに変換します。WebPファイルは、同じ品質であればPNGよりも25%から35%小さくなります。
- WebPの品質設定は85を使用します。AI画像には自然なテクスチャノイズが含まれています。設定を高くしても、視覚的な品質は向上せず、ファイルサイズが増えるだけです。
レイアウトシフトを防ぐ方法：
ユーザーは生成をクリックする前にアスペクト比を選択します。これを活用しましょう。
- 選択された比率（1:1、16:9など）に基づいて、コンテナのサイズを事前に設定します。
- これにより、画像が届く前にコンテナを正しいサイズに保つことができます。
- これにより、累積レイアウトシフト（CLS）を排除できます。
読み込み速度を向上させる方法：
生成された画像は、通常、Largest Contentful Paint (LCP) 要素となります。
- コード内で画像を優先（priority）としてマークします。
- CDNに対してpreconnectリンクを使用します。これにより、DNSおよびTLSハンドシェイクを早期に処理できます。
- 最終的な画像が占める正確なスペースを占有するスケルトンローダーを使用します。
キャッシング戦略：
- 推論レイヤーではキャッシュしないでください。すべてのリクエストが新鮮である必要があります。
- 配信速度のために、CDNレイヤーでキャッシュします。
- 各画像には一意のURLがあるため、積極的なキャッシュを行っても安全です。
これらの変更による結果：
- 平均サイズ: 900KBから200KBへ。
- LCP: 4.1秒から1.9秒へ。
- CLS: 解消。
アクションのまとめ：
- 品質85でWebPに変換する。
- 選択されたアスペクト比を使用してコンテナのサイズを事前に設定する。
- メイン画像を優先読み込み（priority loading）に設定する。
- CDNレベルで強力にキャッシュする。
- ファーストビューより下の二次的なコンテンツにのみ、遅延読み込み（lazy loading）を使用する。
Optional learning community: https://t.me/GyaanSetuAi