より良いCore Web Vitalsスコアのための実践的フロントエンドテクニック

Core Web VitalsスコアをGoogleの基準値に合格させるために、インフラ全体を見直す必要はありません。パフォーマンスの向上の多くは、どの開発者でも実装できるスマートなフロントエンド最適化から生まれます。バックエンドに触れることなく、LCP、INP、CLSに最も効果的な改善を行う方法をご紹介します。

LCPパフォーマンスの最適化：ヒーローコンテンツを超高速にする

Largest Contentful Paintは通常、ヒーロー画像やファーストビューのテキストブロックに関わります。重要なのは、これらのリソースを最初から発見可能で優先度の高いものにすることです。

LCP改善のためのスマートな画像処理

<!-- Before: ブラウザのpreloadスキャナーから隠れている -->
<div class="hero" style="background-image: url('hero.jpg')"></div>

<!-- After: 発見可能で優先度が高い -->
<img src="hero.webp" 
     fetchpriority="high"
     width="1200" 
     height="600"
     alt="Hero image">

JavaScriptで読み込まれる重要な画像については、preloadヒントを追加します：

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

リソース優先度設定テクニック

モダンブラウザはfetchpriorityをサポートしており、重要なリソースを強化できます：

// 重要でない画像の優先度を下げる
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
  img.fetchPriority = 'low';
});

LCP画像からはloading="lazy"属性を削除してください。これらは不必要に読み込みを遅延させます。また、LCPリソースがJavaScript実行後ではなく、初期HTMLレスポンスから読み込まれることを確認してください。

INPパフォーマンス向上のための長いタスクの分割

INPは最初のインタラクションだけでなく、すべてのユーザーインタラクションにページがどれだけ素早く応答するかを測定します。長いJavaScriptタスクが、INPスコア低下の主な原因です。

タスクスケジューリングパターン

// Before: メインスレッドをブロックする
function processData(items) {
  items.forEach(item => {
    // 重い処理
    complexCalculation(item);
    updateUI(item);
  });
}

// After: ブラウザに制御を譲る
async function processData(items) {
  for (const item of items) {
    complexCalculation(item);
    updateUI(item);
    
    // ブラウザに制御を戻す
    await scheduler.yield();
  }
}

scheduler.yield()をサポートしていないブラウザには、このフォールバックを使用します：

function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

イベントハンドラーの最適化

DOM操作をバッチ処理し、レイアウトスラッシングを避けます：

// 非効率：複数のリフローを強制する
elements.forEach(el => {
  el.style.left = el.offsetLeft + 10 + 'px';
});

// 効率的：すべて読み取ってから、すべて書き込む
const positions = elements.map(el => el.offsetLeft);
elements.forEach((el, i) => {
  el.style.left = positions[i] + 10 + 'px';
});

レイアウトシフトの防止：スペース確保とリフロー回避

CLSの修正は最小限のコードで済むことが多いですが、最も規律を要求します。すべての動的要素には確保されたスペースが必要です。

画像とメディアの寸法

<!-- 常に寸法を指定する -->
<img src="product.jpg" width="400" height="300" alt="Product">

<!-- レスポンシブ画像には、aspect-ratioを使用 -->
<style>
.responsive-image {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>

動的コンテンツパターン

初期レンダリング後に読み込まれるコンテンツの場合：

/* 動的コンテンツのための最小スペースを確保 */
.ad-container {
  min-height: 250px;
}

.comments-section {
  min-height: 400px;
}

/* スケルトンスクリーンがシフトを防ぐ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

アニメーションのベストプラクティス

レイアウトを引き起こすプロパティは絶対にアニメーションしないでください：

/* レイアウトシフトを引き起こす */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { margin-left: -100%; }
  to { margin-left: 0; }
}

/* レイアウトシフトなし */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

即効性のあるチェックリスト

LCP最適化のために：

• ヒーロー画像にfetchpriority="high"を追加
• ファーストビューコンテンツから遅延読み込みを削除
• 重要なフォントと画像をプリロード
• 重要なCSSをインライン化

INPパフォーマンスのために：

• 50msを超えるタスクをscheduler.yield()で分割
• 入力ハンドラーをデバウンス
• 重い計算処理をWeb Workerに移動
• JavaScriptアニメーションの代わりにCSS transformを使用

CLS修正のために：

• すべての画像と動画に明示的な寸法を設定
• min-heightで動的コンテンツのスペースを確保
• アニメーションにはCSS transformを使用
• font-display: optionalでWebフォントをプリロード

まとめ

Core Web Vitalsの改善には、アーキテクチャの変更や高価なインフラは必要ありません。ヒーローコンテンツを発見可能で優先度の高いものにし、JavaScriptタスクを分割してメインスレッドの応答性を保ち、すべての動的コンテンツのためのスペースを確保することに焦点を当てましょう。これらのフロントエンド最適化だけで、スコアを赤から緑に変えることができます。そして何より重要なのは、ユーザーが求める高速で安定したエクスペリエンスを提供できることです。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.