CLSに関する問題（モバイル）：0.1超・0.25超が出た原因と私の改善方法【体験談】

当ページのリンクには広告が含まれています。

こんにちは、和花人ブログのMIHOです。
今日は、昨日まで対応していた GoogleサーチコンソールのCLSエラー（Cumulative Layout Shift＝レイアウトのズレ） について、私が実際に試して失敗した方法と、最終的にたどり着いた改善方法をシェアします。

今回の記事の目次

そもそもCLSってなに？

CLS（Cumulative Layout Shift）とは、ページを読み込んだときに「文字」や「画像」がガタガタ動くこと を点数で表したものです。

・ページを開いたら画像が後から大きく表示されて文章がズレる
・ボタンを押そうとしたら広告が降ってきて間違えて押してしまう

こんな「予想外のズレ」があると、読者にとってストレスになります。

Googleはこの「ズレ具合」を数値化していて、基準は次のとおりです👇

0.1以下 → 合格（Good） …快適に読める
0.1超～0.25以下 → 改善が必要（Needs Improvement） …ちょっと動く
0.25超 → 不合格（Poor） …大きく動く、誤クリックの原因

👉 つまり、0.1超は黄色信号、0.25超は赤信号 というイメージです。

再び現れた、CLSエラーの大量発生！

実は私は数日前に40記事以上をチェックし直して、やっと CLSエラー0 にしたばかりでした。
「やっと終わった！」とホッとしていた矢先、なんとまた 40記事以上がエラーに逆戻り。

MIHO

今日は本当はマニュアルを作る予定だったのに、サーチコンソールを見て「え？またやり直し？😭」と正直愕然としました。

しかも今回は mihorinblogだけでなく和花人ブログの方にも「CLSに関する問題（モバイル）」が出ていて、0.1超が発生。
「え？両方同時に改善しないとダメなの？」と頭を抱えました。

原因は「画像サイズ」と「トップ画面の動画」のダブルパンチ

調べていくと、原因はシンプルでした。

① 記事内の画像サイズ

私は前回のCLSエラー対策で、記事内の画像が動かないようにと考えて、

「幅600×高さ600」
「幅600×高さ400」

と、画像は高さを数字で固定していました。

ところがこれが裏目に…。

スマホで記事を開いてみると、「高さを固定」していると画面の幅に合わせて画像が縮んだり、逆に縦にビヨーンと伸びたりしてしまったんです。

この“画像の縦横比が崩れる動き”こそが、CLSエラーの原因 になっていました。

👉 ポイントは、高さを固定すると端末によって画像が引き伸ばされる という点です。
だから幅だけ「指定（固定）」して、高さは「自動にする」のが正解でした。

※25/10/11追記：昨日までは“幅だけ600固定”にして安定させようとしましたが、結局これもスマホで荒れる原因になることがわかりました。
今は幅も高さも固定せず、フルサイズで挿入→CSS側で最大幅を指定するだけに落ち着いています。

② トップ画面の動画

もうひとつの原因は、トップ画面を動画に変更したこと でした。

動画はどうしてもファイルサイズが大きく、静止画に比べて 読み込みに時間がかかります。

その結果、ページが開いた直後に「まだ動画が表示されない → 文章や他の要素が先に読み込まれる → 動画が遅れてドンッと表示される」という流れが起きて、画面がズレてCLSエラーの原因 になってしまったんです。

特にスマホの場合は通信環境によって読み込みスピードが左右されるので、PCよりもズレが目立ちやすい傾向にあります。

👉 対策として私はまず動画サイズを抑える再編集を行った後、動画の前に表示する「ポスター画像（静止画）」を設定 しました。
これで動画が読み込まれる前から画面の枠が確保されるので、レイアウトが安定するようになりました。
WordPress管理画面の上部にある「カスタマイズ」→「トップページ」→「メインビジュアル」で変更・追加できます。

実際にやった改善方法

私がやったのは、とてもシンプルです。

1.プラグイン導入（→結局やめた）

最初は「Specify Missing Image Dimensions」を入れて、画像タグにwidth/heightを自動付与しました。
ただし…

Wordfenceからの警告メール！！

その後、Wordfenceプラグインからこんな警告が届きました👇

プラグイン「Specify Missing Image Dimensions」は破棄されたようです
（最終更新 2022年5月30日, WordPress 6.0.11 でテスト済み）

つまり、このプラグインは更新が止まっていて、将来的にリスクがあるということ。

このメールを読んで、「古いプラグインに頼るのはやめよう」と決断しました。

2. エックスサーバーで画像を最適化

今回もう一つ効果があったのが、エックスサーバー側の画像最適化機能を使うことでした。
これは、WordPressとは別に「サーバーの管理画面（Xserverアカウント）」で設定できます。

手順は次の通りです👇

Xserverアカウントにログイン
「サーバー管理」→「ホームページ」→「XPageSpeed設定」へ進む
対象ドメイン（例：wakawebshop.com）を選択
「画像最適化」を「ON」にして保存

これをオンにしておくと、アップロード済みの画像を自動的に圧縮＆軽量化してくれます。
画質をほとんど落とさずにファイルサイズを小さくできるので、CLSの原因になりやすい「画像の読み込み遅延」が大幅に改善されました。

注意点（XPageSpeed設定で画像最適化を使うとき）

「XPageSpeed設定」はとても便利ですが、使い方を誤ると不具合が出る場合もあります。

特に次の点に気をつけて設定してください👇

CSS圧縮・JavaScript圧縮は慎重に
　これらをONにするとコードを自動で軽量化しますが、テーマ（SWELLなど）やプラグインの動作に影響が出ることがあります。
特に「デザインが崩れた」「スライダーが動かない」などのトラブルが起きたら、CSS/JS関連の設定をOFFに戻すと改善されます。

画像最適化（圧縮）はONでOKだが“高圧縮”ではない
　XPageSpeedは自動で圧縮率を判断してくれます。
高圧縮を選ぶと画質が荒くなることがあるので、通常の「ON（デフォルト）」のままで十分です。

TinyPNGプラグインとの併用はOK（重複圧縮に注意）
　TinyPNGはアップロード時に、XPageSpeedは表示時に圧縮をかける仕組みなので、基本的には併用OKです。
ただし、同じ画像を何度もTinyPNGで再圧縮すると画質が落ちるため、一度だけ圧縮→再アップロードは避けましょう。

キャッシュをクリアして反映確認
　設定をONにしたあと、「サーバーキャッシュ削除」ボタンをクリックしておくと、反映が早くなります。
また、スマホや別ブラウザで表示崩れがないかもチェックしましょう。

「画像遅延読み込み」を ONにする場合の注意点
SWELLテーマの場合、すでにLazy Loadが内部実装されていることもあるため、二重で効いてしまうケースがあります。
→ 表示が遅くなったり、画像が出てこない場合は どちらか一方をOFF にしましょう。

サムネイル・ギャラリー画像の荒れに注意
　ブログ内の写真を「ギャラリー」や「スライダー表示」で使っている場合、圧縮後に少しだけざらつくことがあります。
気になる場合は、WebP配信のみON、圧縮はOFFでもOKです。

MIHO

画像最適化はCLS対策として非常に効果的ですが、「圧縮しすぎ」や「コード最適化のやりすぎ」は逆効果になることも。
迷ったときは「画像最適化（圧縮）ON」「画像遅延読み込みON」だけに絞るのが安全です。