Core Web Vitalsとは？初心者でも合格できる具体的な改善チェックリスト
login_user目次
Core Web Vitals（コアウェブバイタル）は、Googleが「ユーザーが快適に使えるサイトか？」を数値化した指標です。
SEOにも影響し、スコアが悪いと検索順位が下がる場合があります。
この記事では初心者向けに、LCP / INP / CLS の基礎と、合格のために最初にやるべき改善ステップをわかりやすく解説します。
Lightningテーマを使っている方にも役立つ内容です。
1 Core Web Vitalsとは？
Core Web Vitals は、主に次の３つの指標から構成されます。
| 指標 | 内容 | 合格ライン |
|---|---|---|
| LCP | ページ内で「最初に大きく表示される要素」が表示される速度 | 2.5秒以内 |
| INP | 2024年から採用。クリックなどの反応がどれだけ早いか | 200ms以下 |
| CLS | 読み込み中にコンテンツがズレないか | 0.1以下 |
2 LCP（Largest Contentful Paint）とは？
ページを開いたときに、一番大きな要素（Hero画像・大見出しなど）がどれだけ早く表示されるかの指標です。
WordPressサイトではトップのアイキャッチやスライダー画像が原因で遅くなることが多いです。
2.1 初心者向けのLCP改善ステップ
- 画像を圧縮する（TinyPNG・WebP）
- 画像サイズを大きくしすぎない
- サーバーのキャッシュを有効化する（エックスサーバーの場合：Xアクセラレータ）
- 不要なプラグインを減らす
- スライダーをやめて「静止画像のHero」に変える
3 INP（Interaction to Next Paint）とは？
2024年以降の新しい指標で、クリックやタップに対してどれくらい素早く反応できるかを表します。
初心者の段階でできるINP改善は以下です。
- プラグインを減らす（処理負荷が軽くなる）
- スライダーなど重いJSを減らす
- 画像枚数を減らす
- キャッシュを有効化してページの処理を軽くする
4 CLS（Cumulative Layout Shift）とは？
読み込み中にコンテンツがガクッと動く現象です。
特に画像のサイズ指定が無いと、後から画像が読み込まれてズレが起きます。
4.1 初心者向けのCLS改善
- 画像に width / height を必ず指定する
- 広告や埋め込み要素に固定サイズを設定
- Webフォントが原因の場合 → システムフォントに変更
5 Lightningテーマで初心者がつまずきやすいポイント
- トップページの大きなヘッダー画像 → LCPが悪化しやすい
- 見出しデザインやフォントがCLSを起こす場合がある
- スライダー利用時 → INPが悪化
Lightningテーマを使っている場合、以下の設定が特に効果的です。
- ヘッダー画像を軽量化（WebP推奨）
- スライダーを使わない構成にする
- 画像に必ず width / height を付ける
6 初心者がまず合格するための改善ステップまとめ
- 画像をWebPに変換（特にHero画像）
- TinyPNGなどで圧縮する
- キャッシュ（アクセラレータ）をONにする
- 不要プラグインを削除する
- 画像のwidth / heightを必ず指定する
- スライダー・不要JSを減らす
まずはこれだけで、ほとんどのサイトはLCP・INP・CLSが合格レベルに近づきます。
7 画像にwidth / heightを自動で付与するfunctions.phpコード
初心者でも使いやすいよう、貼るだけでOKのコードです。
// 画像に width / height を自動付与して CLS 改善
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
$meta = wp_get_attachment_metadata($attachment->ID);
if (isset($meta['width']) && isset($meta['height'])) {
$attr['width'] = $meta['width'];
$attr['height'] = $meta['height'];
}
return $attr;
}, 10, 2);
CLS（レイアウトシフト）対策として非常に強力です。
8 まとめ
Core Web Vitals の改善は難しく見えますが、初心者でも取り組める手順は多いです。
まずは画像・キャッシュ・プラグインの見直しから始めてみましょう。
