CLSが悪いときは、まず「どの要素がずれているか」を特定し、その要素に表示される前から場所を確保させるのが基本です。WordPressでは、サイズ指定のない画像、広告や埋め込みの枠、Webフォント、後から挿入される要素の4つが主な原因になります。この記事では、原因の要素の調べ方と、それぞれの直し方を順に説明します。
CLSはどう評価されるか
CLS（Cumulative Layout Shift）は、ユーザーの操作と関係なく起きたレイアウトのずれを数値にした指標です。0.1以下が「良好」、0.25を超えると「不良」とされます（2026年10月現在）。ずれの大きさは「動いた要素が画面に占める割合」と「動いた距離」を掛け合わせて計算されます。短い間隔で続けて起きたずれは1つのまとまりとして合計され、ページを開いている間でもっとも大きいまとまりの値がそのページのCLSになります。
クリックやタップの直後0.5秒以内に起きたずれは、ユーザーが予期したものとして数えられません。アコーディオンを開いて下の内容が押し下げられるのは問題になりませんが、スクロールしているだけで広告が差し込まれて本文が動くのは数えられます。
PageSpeed Insightsのラボ計測は読み込み直後の状態しか見ないため、スクロール中に起きるずれを捉えられません。ラボの値は良いのに、実ユーザーのデータやSearch Consoleでは不良と出る場合は、スクロールや一定時間の経過後に表示される要素を疑います。
原因の要素を特定する
PageSpeed Insightsのレポートには、レイアウトシフトを起こした要素が示されます。挙がっている要素のセレクタを見ると、画像なのか、広告枠なのか、見出しの文字なのかが分かります。
ブラウザで実際に操作しながら確かめたい場合は、Chromeの開発者ツールのコンソールに次のコードを貼り付けます。ずれが起きるたびに、その値と原因になった要素が表示されます。
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
console.log(entry.value.toFixed(4), entry.sources.map((s) => s.node));
}
}
}).observe({ type: 'layout-shift', buffered: true });ページの読み込みが終わってから貼り付けても、buffered: true の指定によって、それまでに起きたずれもまとめて表示されます。続けてページをスクロールすると、その間に起きたずれも順に出力されます。表示された要素にマウスを重ねると、ページ上のどこかが強調表示されます。
スマートフォンで起きるずれは画面幅によって変わるので、開発者ツールの端末エミュレーションで幅を狭めた状態でも確認します。
画像にサイズを持たせる
幅と高さが分からない画像は、読み込みが終わるまで高さがないものとして扱われ、表示された瞬間に下の内容を押し下げます。<img> に width と height の属性があれば、ブラウザはその比率から読み込み前に場所を確保します。CSSで画像の最大幅を親要素の幅に合わせ、height: auto を指定していても属性の比率は保たれるので、レスポンシブ表示と両立します。
WordPressには5.5から、投稿本文の画像に幅と高さが欠けている場合に表示時に補う処理があります。これを担っているのが wp_img_tag_add_width_and_height_attr() で、本文を出力するときに wp_filter_content_tags() から呼ばれます。ただし補えるのは、メディアライブラリの画像であることを示す wp-image-{ID} クラスが付いた画像だけです。次のような画像は対象外になります。
- HTMLで直接書いた画像や、外部サイトの画像URLを貼り付けた画像
- 古いエディタや移行ツールを経由して、クラスが失われた画像
- テーマのテンプレートやウィジェットで独自に出力している画像
本文の画像は、ブロックエディタで画像ブロックとして入れ直すのが手堅い方法です。テンプレートの画像は、<img> を直書きせずに the_post_thumbnail() や wp_get_attachment_image() で出力すると、width・heightの付いたタグになります。
<?php
// アイキャッチ画像: width・height・srcset 付きで出力される
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'large' );
}
// 添付ファイルIDが分かっている画像
echo wp_get_attachment_image( $attachment_id, 'medium' );外部の画像など添付ファイルIDがないものは、実際の画像サイズを調べて width と height を手で書き入れます。
遅延読み込みそのものは、サイズが指定されていればCLSの原因にはなりません。ただし、遅延読み込みプラグインの中には、最初に小さなダミー画像を表示して後から本来の画像に差し替える方式のものがあり、両者の縦横比が違うとずれが起きます。WordPress本体が付ける loading="lazy" で足りるなら、ブラウザ標準の遅延読み込みに任せる方が問題が起きにくくなります。
広告・埋め込み・iframeの枠を確保する
アドセンスなどの広告は、配信されるまで中身の高さが分からないため、CLSの原因としてとても多いものです。広告を囲む要素に、想定される広告の高さを min-height で確保しておくと、表示時のずれを抑えられます。
/* 記事内広告の枠。値は実際に表示される広告の高さに合わせて調整する */
.ad-slot {
min-height: 280px;
}
@media (min-width: 768px) {
.ad-slot {
min-height: 250px;
}
}高さを大きく取りすぎると、広告が配信されなかったときに空白が残ります。実際に表示される広告のサイズを何度か確認してから値を決めます。記事冒頭の近くに入る広告はずれの影響が大きいので、自動広告が冒頭付近に差し込まれている場合は、配置の設定を見直すことも検討します。
YouTubeなどの埋め込みやiframeは、CSSの aspect-ratio で縦横比を指定すると、読み込み前から高さが決まります。
.entry-content iframe[src*="youtube"] {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}ブロックエディタの埋め込みブロックは、縦横比を保つためのクラスを付けて出力されるので、通常はそのままで問題ありません。ずれが出る場合は、テーマのCSSがその指定を上書きしていないかを確認します。
Webフォントによるずれを抑える
Webフォントを使うと、最初は代わりのフォントで表示され、Webフォントの読み込みが終わった時点で置き換わります。このとき文字の幅や行の高さが変わり、段落の折り返し位置がずれてレイアウトが動きます。font-display: swap は文字が見えない時間をなくしますが、置き換え時のずれは残ります。
対策には次のようなものがあります。
- 本文用など重要なフォントは
<link rel="preload">で早めに読み込み、置き換えまでの時間を短くする - ずれをできるだけ避けたい場合は
font-display: optionalにする。初回の表示に間に合わなければ、代わりのフォントのまま表示されます - 代わりのフォント側の
@font-faceにsize-adjustなどを指定し、文字の幅をWebフォントに近づける - 日本語のWebフォントはファイルが大きいので、見出しだけに使う、またはシステムフォントに切り替えることも検討する
後から挿入される要素とアニメーション
ページ上部に後から現れるお知らせバー、Cookieの同意バナー、JavaScriptで差し込まれる関連記事などは、既存の内容を押し下げます。こうした要素は position: fixed で画面に重ねて表示するか、最初からその分の場所を確保しておきます。
CSSアニメーションで top・height・margin などを変化させると、周りの要素が動いてずれとして数えられることがあります。動きは transform と opacity で表現すると、レイアウトに影響しません。スクロールすると固定表示に切り替わるヘッダーも、切り替えの瞬間に本文が上に詰まるとずれになるので、固定したときに同じ高さの余白を確保します。
対策を入れたら、キャッシュを削除してから同じ手順で計測し直し、コンソールに出るずれが減っているかを確認します。実ユーザーのデータに反映されるまでには数週間かかります。
まとめ
- CLSは0.1以下が良好。操作の直後ではないずれが数えられ、ラボ計測ではスクロール中のずれが見えないことがある
- 原因の要素はPageSpeed InsightsのレポートかPerformanceObserverで特定する
- 画像はwidth・height属性で縦横比を伝える。WordPressは5.5以降、
wp-image-{ID}クラスの付いた本文画像にだけ属性を補う - 広告枠は
min-height、埋め込みはaspect-ratio、フォントはpreloadとfont-displayで対処する - 後から現れる要素は画面に重ねて表示し、アニメーションには
transformを使う