core-web-vitals-tuner

Core Web Vitals チューナー

LCP、INP、CLS を体系的に改善します。

LCP の最適化（<2.5s）

優先度の高い修正：

1. 画像を最適化する（最も効果が大きい）

   
   <img src="hero.jpg" />
   
   
   <img
     src="hero.jpg"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     loading="eager"
     fetchpriority="high"
   />
   

2. LCP リソースをプリロードする

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

3. クリティカル CSS をインライン化する

   <style>
     /* Above-the-fold styles */
     .hero {
       display: flex;
       height: 100vh;
     }
   </style>
   

4. CDN を使用する

   • 画像を CloudFront/Cloudflare から配信する
   • HTTP/2 または HTTP/3 を有効にする

INP の最適化（<200ms）

修正方法：

1. 負荷の高いインタラクションをデバウンスする

   import { debounce } from "lodash";
   
   const handleSearch = debounce((query) => {
     fetchResults(query);
   }, 300);
   

2. 負荷の高いタスクに Web Workers を使用する

   const worker = new Worker("processor.js");
   worker.postMessage(largeData);
   worker.onmessage = (e) => console.log(e.data);
   

3. コード分割

   const HeavyComponent = lazy(() => import("./HeavyComponent"));
   

CLS の最適化（<0.1）

修正方法：

1. 画像や広告用のスペースを確保する

   <img src="banner.jpg" width="1200" height="600" />
   

2. CSS の aspect-ratio を使用する

   .video-container {
     aspect-ratio: 16 / 9;
   }
   

3. 既存のコンテンツより上にコンテンツを挿入しない

   .notification {
     position: fixed;
     top: 0;
   }
   

検証

# Lighthouse CI
npm run lighthouse -- --url=https://example.com

# Web Vitals in production
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

出力チェックリスト

• LCP を最適化済み（<2.5s）
• INP を最適化済み（<200ms）
• CLS を最適化済み（<0.1）
• モニタリングを設定済み
• パフォーマンスのリグレッションテスト ENDFILE