テーマを変える前後の表示速度を測る｜ChromeでLCPとCLSを5回測って中央値を出す

「テーマを変えたら表示が速くなる」と言われても、本当に速くなったのかは測らないと分かりません。この記事では、Chromeを自動で動かしてLCP（最大コンテンツの表示時間）とCLS（レイアウトのずれ）を5回測り、中央値を出す方法を、筆者のサイト5ページで実行した結果とあわせて紹介します。テーマを変える前後の比較に、そのまま使えます。

（確認：2026年10月20日に、筆者のPC（Windows 11・Chrome・Python 3.13・Playwright）で実行。通信の制限（スロットリング）は掛けていません。読み取りだけで、サイトの設定は変えていません）

指標の意味と、基準（web.dev）

Googleのweb.devの説明（確認日：2026年10月20日）では、次のとおりです。

• LCP：ページの読み込みが始まってから、最大の要素が表示されるまで。2.5秒以内が良好の目安
• CLS：表示中にレイアウトがずれた量の合計。0.1以下が良好の目安（0.25より大きいと低速の扱い）
• INP：操作への反応の速さ。200ミリ秒以下が良好の目安（今回は測っていません）

web.devには、ほとんどのユーザーで目標を達成するには、モバイルとデスクトップに分けて75パーセンタイルで測るのが適切とも書かれています。つまり、ユーザーの実際のデータ（フィールドデータ）で評価するものです。この記事の方法は手元で1台のPCから測る「ラボデータ」なので、実際のユーザーの数字とは一致しません。テーマの変更前後を同じ条件で比べる用途に向いています。

コード（Playwrightで5回測る）

import statistics
from playwright.sync_api import sync_playwright

JS = """
() => new Promise(res => {
  let lcp = 0, cls = 0;
  new PerformanceObserver(l => { for (const e of l.getEntries()) lcp = e.startTime; })
    .observe({type: 'largest-contentful-paint', buffered: true});
  new PerformanceObserver(l => { for (const e of l.getEntries()) if (!e.hadRecentInput) cls += e.value; })
    .observe({type: 'layout-shift', buffered: true});
  const done = () => setTimeout(() => {
    const n = performance.getEntriesByType('navigation')[0];
    res({lcp: Math.round(lcp), cls: Math.round(cls * 1000) / 1000, ttfb: Math.round(n.responseStart)});
  }, 2500);
  if (document.readyState === 'complete') done(); else addEventListener('load', done);
})
"""
def measure(url, runs=5):
    rows = []
    with sync_playwright() as p:
        b = p.chromium.launch(channel="chrome", headless=True)
        for _ in range(runs):
            ctx = b.new_context(viewport={"width": 1366, "height": 800})   # 毎回キャッシュなし
            pg = ctx.new_page(); pg.goto(url, wait_until="load"); rows.append(pg.evaluate(JS)); ctx.close()
        b.close()
    return {k: statistics.median(r[k] for r in rows) for k in ("lcp", "cls", "ttfb")}

毎回、新しいブラウザ環境（キャッシュなし）で開き、読み込み完了の2.5秒後に値を取っています。5回の中央値を使うのは、1回だけだと通信の揺らぎで外れ値が出るためです。

筆者の5ページの結果（中央値）

（転送量は、CSS・JavaScript・画像などの追加のファイルの合計で、ページ本体のHTMLは含みません。コードにはTTFBとLCPとCLSだけを載せています）

5ページとも、LCPは0.4〜0.6秒、CLSは0.044以下で、web.devの目安（LCP 2.5秒、CLS 0.1）をラボの環境では大きく下回りました。ただしこれは通信の制限なしで、高速なPCから測った値なので、スマホの低速回線では数字が悪くなります。

面白いのは、転送量が一番多いサイトAが、TTFBもLCPも一番速かった点です。転送量（約3,255KB）が多くても、最初のバイトが早く返り、最大の要素が早く出れば、LCPは速くなります。TTFBの測り方はcurlでTTFBを10回測る方法にあります。サイトごとの条件（テーマ・プラグイン・キャッシュ・画像）は違うため、この表から「どのテーマが速いか」は言えません。

テーマの比較に使う時の注意

• 同じページ、同じ時間帯、同じPCで測る（テーマだけを変える）
• 5回以上の中央値で比べる。1回の差は誤差の範囲に入ることが多い
• モバイル相当の条件でも測る（Chromeの開発者ツールでスロットリングをかける）。今回は掛けていません
• 実際のユーザーの数字は、Google Search Consoleの「ウェブに関する主な指標」で見る

この記事で確かめていないこと

• INP（操作への反応）
• モバイルや低速回線での数値
• テーマを実際に変えた前後の差（今回は変更していません）

テーマを変える前の件数や構成の記録の取り方は、別の記事「テーマを変える前に今のサイトの状態を記録する」にまとめています。有料テーマの比較はXwriteの料金プランの選び方にあります。

まとめ

• PlaywrightでChromeを動かすと、LCP・CLS・TTFBを5回測って中央値を出せる
• 筆者の5ページは、LCP 0.36〜0.61秒・CLS 0.044以下で、web.devの目安（2.5秒・0.1）を下回った（通信制限なしのラボの値）
• 転送量が多くても、最初のバイトと最大要素が早ければLCPは速い
• テーマの前後比較は、同じ条件・5回以上の中央値で。実ユーザーの数字はSearch Consoleで見る

本記事は測定方法の説明であり、特定のテーマや製品を勧めるものではありません。