WordPressの累積レイアウトシフト、これを「0」に減らす（Core Web Vitals項目）

このガイドでは、WordPress の累積レイアウトシフト（CLS）を改善します。

累積レイアウトシフト（CLS）とは、ウェブサイトの読み込み中に要素が移動する現象です。Google のレイアウトシフトデバッガーは、デスクトップ/モバイルでレイアウトシフトの原因となっている特定の要素をハイライト表示する GIF 画像を作成します。これは、レイアウトシフトは通常、肉眼では確認できないほど速く発生するためです。

レイアウトシフトは、CSS、フォント、サイズの調整、そしてスクロールせずに見えるコンテンツを特定の最適化（遅延読み込み、非同期 CSS、遅延 JavaScript）から除外することで、多くの場合修正できます。この記事の執筆時点では、累積レイアウトシフトは Lighthouse スコアの 15% を占めています。

この記事を読む前に、FOIT、FOUT、FOUC の違いを理解しておくと役立ちます。malthemilthers.com の GIF 画像では、FOIT と FOUT を視覚的にわかりやすく説明しています。

以下は、Cumulative Layout Shift（CLS）の改善に関する英語原文の内容を、WordPressブログ記事向けにセクションごとに日本語でわかりやすく翻訳・要約したものです。

【保存版】WordPressのCLS（累積レイアウトシフト）を改善する11の方法

CLS（Cumulative Layout Shift）は、ページ読み込み中にコンテンツがどれだけズレたかを測定するGoogleのコアウェブバイタルのひとつ。この記事では、WordPressユーザーがCLSを大幅に改善するための実践方法をわかりやすく解説します。

✅ CLSとは？どこからが「悪い」評価？

CLSスコア	評価
0 ～ 0.1未満	良好
0.1 ～ 0.25未満	改善が必要
0.25以上	悪い

🔧 CLS改善のための11ステップ

1. 【基本】どの要素がズレているかを調べる

Cumulative Layout Shift Debugger：ページ上のズレをGIFで視覚化。Chromeエンジニアが開発した信頼ツール。
PageSpeed Insights：CLSに関するアドバイスが多数表示される。
Chrome DevToolsのレイアウトシフト領域表示：青でズレをリアルタイムに確認可能。

2. 【フォント】font-display を swap または optional に変更

swap：フォントが読み込まれるまで代替フォントを即時表示 → FOIT防止
optional：速い通信環境でのみカスタムフォントを読み込む
※サイズが異なるとFOUT（未スタイル表示のフラッシュ）を引き起こすので、代替フォントも同じスタイルにするのが理想。

3. 【重要】Above The Fold（画面最上部）の最適化を除外

ロゴやファーストビュー画像をLazy LoadやDefer対象から除外。
Perfmatters や FlyingPress では画像数を指定して自動的に除外可能。
JavaScript や CSS も、上部で使用しているファイルは defer/asynchronous 対象にしない。

4. 【フォント②】フォントをローカルにホストし、Preload する

フォントファイルは自サイトでホスティング（fonts.gstatic.com など第三者を避ける）
<link rel="preload" href="/fonts/yourfont.woff2" as="font" crossorigin> で事前読み込み

5. 【サイズ指定】画像・動画・広告のwidth/height指定

HTMLに width と height を明示することで、レイアウトのズレを防止
WP RocketやFlyingPressでは自動設定も可能
広告には divでスペースを予約（例：min-width: 300px;）

6. 【アニメーション】transformプロパティを使う

transform: translate() や scale() を使用することでレイアウトへの影響を最小限に
top, left, width の直接変更は避ける

7. 【JavaScript】JSの遅延読み込みでズレを防ぐ

FlyingPress, WP Rocket, LiteSpeed Cache, Perfmatters などに搭載
以下のJSは遅延対象に：Google Analytics、Facebook Pixel、YouTube embed、コメント、SNS共有プラグインなど

8. 【必要なら】モバイルとPCのキャッシュを分ける

モバイル版とPC版で構成が異なる場合、キャッシュを分けることでズレを防げる
キャッシュの2重管理になるため、プラグインの推奨条件をよく確認

9. 【Cookie通知】軽量なプラグインを選ぶ

Cookie Noticeプラグインの中にはCLSスコアを悪化させるものも
1KBの軽量プラグインや「Cookie Notice & Compliance for GDPR/CCPA」がおすすめ

10. 【動的コンテンツ】事前にスペースを確保する

ポップアップやフォーム、GDPR通知などはレイアウトのズレの主因に
position: fixed や divでスペース予約を行うことでズレを回避可能

11. 【Oxygen Builder】Mulishフォントに統一（利用者向け）

Oxygen Builderではグローバルフォント設定がCLSを悪化させる事例あり
対処法：CSSで font-family: 'Mulish', sans-serif; を指定

✅ よくある質問（FAQ）

Q1. WordPressでCLSを下げるには？

キャッシュプラグインの設定を見直すこと（非同期CSS、フォントプリロード、画像サイズ指定など）
Above The Foldの画像やJSを最適化対象から除外することが特に効果的

Q2. CLS改善に使えるWordPressプラグインは？

FlyingPress、Perfmatters、LiteSpeed Cache、Swap Google Fonts Display、Flying Scriptsなど

Q3. WP RocketでCLSを改善するには？

Lazy Load・非同期CSS・JavaScript遅延の設定を見直し、必要に応じて除外
Critical CSSを設定し、画像サイズを明示

💬 ご質問・サポートについて

疑問点がある方はコメントでどうぞ！
ただしスパム対策のため、GTmetrixレポートのリンクを添えてください。サイトURL単体は自動でスパム扱いになる場合があります。

About the author