フロントエンドの画像最適化（WebP、AVIF）についてはコミュニティで何度も議論されてきましたが、バージョンアップに伴い、多くの結論を更新する必要があります。この記事では最新バージョンに基づいて再整理します。

はじめに

核心となるロジックを理解することが重要です。

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      reportMetric('LCP', entry.startTime)
    }
    if (entry.entryType === 'first-input') {
      reportMetric('FID', entry.processingStart - entry.startTime)
    }
  }
})
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] })

パフォーマンス最適化は具体的なシナリオに応じて行う必要があり、すべての状況で過度な最適化が必要なわけではありません。

ソースコード解析

以下の方法で改善できます：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      reportMetric('LCP', entry.startTime)
    }
    if (entry.entryType === 'first-input') {
      reportMetric('FID', entry.processingStart - entry.startTime)
    }
  }
})
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] })

この手法は半年以上にわたって本番環境で安定して動作しており、実戦で検証されています。

実際のシナリオへの応用

まず基本的な実装方法を見てみましょう：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      reportMetric('LCP', entry.startTime)
    }
    if (entry.entryType === 'first-input') {
      reportMetric('FID', entry.processingStart - entry.startTime)
    }
  }
})
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] })

このコードは基本的な使用法を示しています。実際のプロジェクトではエラーハンドリングや境界条件も考慮する必要があります。

最適化のコツ

これをベースに、さらに最適化できます：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      reportMetric('LCP', entry.startTime)
    }
    if (entry.entryType === 'first-input') {
      reportMetric('FID', entry.processingStart - entry.startTime)
    }
  }
})
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] })

このパターンは大規模プロジェクトで非常に実用的で、メンテナンスコストを大幅に削減できます。

まとめ

• コミュニティの動向に注目し、技術戦略は継続的に改善する必要があります
• 新しい技術を使うこと自体を目的にしないでください
• コード例は参考程度に、ビジネスシナリオに応じて調整してください
• フロントエンドの画像最適化（WebP、AVIF）は銀の弾丸ではなく、プロジェクトの規模や技術スタックに応じて選択する必要があります