イメージパイプライン
Lighthouse 100のイメージスコアをデフォルトで達成するために、すべてのSeahawk サイトで運用しているFAL plus Sharpパイプライン。具体的なファイルサイズの数値付き。
イメージ規律がパフォーマンス向上の半分を占める理由
マーケティングページの約70%において、イメージがLCP要素になっています。イメージ規律は、私が知る最高のレバレッジを持つパフォーマンス施策です。これを正しく実行するチームはCore Web Vitalsを難なく達成し、実行を誤るチームはCore Web Vitalsと永遠に戦うことになります。
規律は構造的なものです。形式を選定し、アップロード時にリサイズし、エンコーディングを最適化し、明示的な寸法を設定し、LCPイメージをプリロードします。これらはそれぞれ一度限りのエンジニアリング投資であり、すべてのサイトのすべてのページで利益をもたらします。
FALヒーロー生成
FAL flux-pro/v1.1-ultraとRecraft v3でヒーロー画像を生成します。どちらも1200 × 675ピクセルのJPEG を完全なエンコーディング品質で生成し、通常1画像あたり600KB～1.5MBです。Supabase Storageに生のまままアップロードすると、すべてのページがヒーロー画像だけで約1MBを配信することになります。
FALのコストは1枚のヒーローイメージあたり約4セント程度で、手動撮影やストック素材ライセンスと比べると無視できるレベルです。
sharpによるWebP再エンコーディング
アップロード前に、すべてのイメージはsharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer()を通します。これにより、ソースJPEGより90パーセント小さいWebPファイルが生成され、知覚的な品質低下はありません。900KBのヒーローは80KBのヒーローになります。
gautamkhorana.comの53枚のヒーローイメージ全体では、総容量削減は約50MBのサイト全体でした。Seahawk Media内のクライアントサイトに同じパイプラインを適用すると、一貫して同様の削減効果が得られます。コードはわずか10行、その影響は持続的です。
ストレージアップロード設定
ストレージアップロード時にcacheControl: 31536000を設定し、CDNが1年間ファイルをキャッシュするようにします。WebP形式は最新ブラウザが求めるものを提供し、古いブラウザはpicture要素を介してJPEGにフォールバックします。
安定したURLパターン(slug-hero.webp)を使用して、キャッシュ無効化の仕組みをシンプルに保ちます。ヒーローイメージが更新されるとき、スラッグをローテーション(slug-hero-v2.webp)し、データベースがURLをアトミックに更新します。
フロントエンド統合
すべてのヒーローイメージはHTMLで明示的なwidth属性とheight属性を持つ必要があります。これがないと、イメージ読み込み時にレイアウトシフトが発生してCLSが上昇します。AstroとNext.jsのImageコンポーネントはこれを自動的に処理しますが、生のimgタグは手動で対応する必要があります。
ファーストビューのヒーローイメージは、ドキュメントヘッド内のlink rel="preload" as="image"でプリロードする必要があります。通常、LCPメトリクスで100~400ミリ秒の削減が見込めます。ほとんどのマーケティングサイトで利用できる、単一行の変更としては最高のインパクトを持つものです。
フォールド以下のすべての画像に loading="lazy" を使用して遅延読み込みしてください。ブラウザはネイティブに対応しているため、JavaScript ライブラリは不要です。
1つのヘルパー内の完全なパイプライン
このパイプラインを scripts/lib/optimize-image.mjs に抽出しました。これはバッファを受け取り、リサイズと WebP エンコードを実行して、最適化されたバッファを返します。自動ブログのヒーローパイプライン、一括再エンコードスクリプト、手動アップロードユーティリティ全体で使用されています。
単一のヘルパーにより、統制が一元化されています。画像をアップロードする必要のある新しいスクリプトは同じヘルパーを呼び出し、同じ圧縮を取得し、同じファイルサイズを生成します。この統制は、エンジニア個人が sharp の実行を覚えていることに依存しません。