Core Web Vitals改善ガイド｜LCP・INP・CLSを実測して直す手順

Chrome DevTools → Lighthouse タブ
 → モードは「ナビゲーション」、デバイスは「モバイル」を選ぶ
 → 「ページ分析を開始」

※ 拡張機能の影響を避けるため、シークレットウィンドウで測る

// 実際の訪問者の値を自分で計測する（web-vitalsライブラリ）
import { onLCP, onINP, onCLS } from 'web-vitals';

const send = ({ name, value, rating }) => {
  console.log(name, Math.round(value), rating);
  // GA4へ送る場合
  gtag('event', name, { value: Math.round(value), metric_rating: rating });
};

onLCP(send);
onINP(send);
onCLS(send);

DevTools → Performance → 記録 → LCPのマーカーをクリック
 または Lighthouse の「最大コンテンツの描画要素」欄を見る

<!-- ファーストビューの画像は遅延読み込みしない -->
<img src="/img/hero.webp"
     width="1200" height="630"
     alt="説明"
     fetchpriority="high">

<!-- 逆に、下部の画像は必ず遅延させる -->
<img src="/img/section.webp" width="800" height="450" alt="説明" loading="lazy">

<!-- 重要な画像を先読みする -->
<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">

<!-- 外部ドメインへの接続を先に確立する -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;      /* 先に代替フォントで表示する */
}

// 悪い例：クリック時に重い処理を同期実行する
button.addEventListener('click', () => {
  const result = heavyCalculation(largeArray);   // 数百ms占有する
  render(result);
});

// 良い例：先に画面を反応させ、重い処理を後ろへ回す
button.addEventListener('click', () => {
  showLoadingState();                 // 即座に反応を返す

  requestAnimationFrame(() => {
    setTimeout(() => {
      const result = heavyCalculation(largeArray);
      render(result);
    }, 0);
  });
});

// 入力のたびに処理せず、止まってから実行する
function debounce(fn, wait = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}

searchInput.addEventListener('input', debounce((e) => {
  search(e.target.value);
}, 300));

<!-- 悪い例：サイズ未指定。読み込み後に高さが確定して下がずれる -->
<img src="/img/photo.jpg" alt="">

<!-- 良い例：幅と高さを属性で指定する -->
<img src="/img/photo.jpg" width="800" height="450" alt="">

/* CSS側で比率を固定しておく方法 */
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 後から差し込む領域は、あらかじめ高さを確保する */
.ad-slot {
  min-height: 280px;
}

/* Webフォントの切り替えでずれる場合は代替フォントを調整する */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;      /* 代替フォントとの文字幅の差を補正 */
}

<img src="/img/photo-800.webp"
     srcset="/img/photo-400.webp 400w,
             /img/photo-800.webp 800w,
             /img/photo-1200.webp 1200w"
     sizes="(max-width: 768px) 100vw, 760px"
     width="800" height="450"
     alt="説明" loading="lazy">

<?php
// 使っていない絵文字スクリプトを止める
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

// ファーストビューの画像を遅延読み込みの対象から外す
add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment, $size ) {
	if ( is_singular() && ! did_action( 'wp_body_open' ) ) {
		$attr['loading'] = 'eager';
		$attr['fetchpriority'] = 'high';
	}
	return $attr;
}, 10, 3 );

<?php
/** リビジョンを3件までに制限する */
define( 'WP_POST_REVISIONS', 3 );

/** 自動保存の間隔を延ばす */
define( 'AUTOSAVE_INTERVAL', 300 );

# CLIで定点観測する（Lighthouse CI）
npx lighthouse https://example.com/ \
  --preset=desktop --output=json --output-path=./report.json --quiet

# 主要指標だけ取り出す
cat report.json | python3 -c "
import json,sys
d=json.load(sys.stdin)['audits']
for k in ['largest-contentful-paint','cumulative-layout-shift','total-blocking-time']:
    print(k, d[k]['displayValue'])"

<!-- 1. 本文中の画像はすべて幅・高さを持たせる -->
<img src="/img/section.webp" width="1120" height="630" alt="説明" loading="lazy">

<!-- 2. 広告・埋め込み枠は先に高さを確保する -->
<div class="embed-slot" style="min-height:280px"></div>

<!-- 3. YouTubeはサムネイル置換で読み込みを遅らせる -->
<div class="yt-facade" data-id="VIDEO_ID">
  <img src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
       width="480" height="360" alt="動画のサムネイル" loading="lazy">
</div>

日付：2026-09-01
対象URL：https://example.com/article/
測定条件：Lighthouse モバイル / シークレットウィンドウ

対策前： LCP 4.1s / INP 240ms / CLS 0.28
実施内容：本文画像に width・height を追加（12枚）
対策後： LCP 4.0s / INP 240ms / CLS 0.06

所感：CLSは想定どおり改善。LCPは画像形式が原因のため次回対応。

# TTFBだけを測る
curl -o /dev/null -s -w "接続: %{time_connect}s  TTFB: %{time_starttransfer}s  合計: %{time_total}s\n" \
  https://example.com/

# 複数回測って平均を見る（初回はキャッシュ未生成で遅い）
for i in 1 2 3; do
  curl -o /dev/null -s -w "%{time_starttransfer}\n" https://example.com/
done

<?php
/** 表示に時間がかかっているクエリを調べる（調査時のみ有効化） */
define( 'SAVEQUERIES', true );

/** 調査後は必ず false に戻す。負荷が増えるため */

<?php
// 遅いクエリを一時的にログへ出す（管理者のみ・調査用）
add_action( 'shutdown', function () {
	if ( ! defined( 'SAVEQUERIES' ) || ! SAVEQUERIES || ! current_user_can( 'manage_options' ) ) {
		return;
	}
	global $wpdb;
	foreach ( $wpdb->queries as $q ) {
		if ( $q[1] > 0.05 ) {   // 50ms超のクエリだけ記録
			error_log( sprintf( '[slow %.3fs] %s', $q[1], substr( $q[0], 0, 200 ) ) );
		}
	}
} );