Luxeritas~CLS(Cumulative Layout Shift)が下がらない原因をようやく特定し改善に成功

Luxeritas,WordPress,ブログ運営,ページエクスペリエンスアップデート

高速表示で人気の Luxeritas テーマですが、何故かサーチコンソールのウェブに関する主な指標のCLSの数値が半年以上悪化したままだったのですが、原因が特定出来ましたのでシェアしたいと思います。

[Luxeritas] CLS(Cumulative Layout Shift)が下がらない原因をようやく特定し改善に成功しました


LuxeritasのCLS(Cumulative Layout Shift)悪化の原因

Googleのページエクスペリエンス・アップデートが始まったようですが、ぎりぎり間に合いました。

 

ページエクスペリエンス・アップデートとは

ページエクスペリエンス・アップデートを超簡単に言うと、回線の貧弱な携帯電話などのモバイル端末で見て表示の遅いサイト、ユーザビリティの良くないサイトは順位を下げるよ!というアップデートのことで、ページエクスペリエンスはGoogleのツールである「サーチコンソール」で確認することが出来ます。

ページエクスペリエンス・アップデートとは回線の貧弱な携帯電話などのモバイル端末で見て遅いサイトの順位を下げるよ!というアップデートのこと

私のサイトは2019年夏より高速表示が売りのWordPressのテーマ「Luxeritas」を利用していますが、何故か2020年の12月下旬あたりからGoogleのサーチコンソールにある「ウェブに関する主な指標のCLS(Cumulative Layout Shift)」の数値が悪化してしまいました。

Googleのサーチコンソールにあるページエクスペリエンス・シグナルのウェブに関する主な指標の数値が悪化


Googleのサーチコンソールにある「ウェブに関する主な指標のCLS(Cumulative Layout Shift)」の数値が悪化してしまいました。

 

CLS(Cumulative Layout Shift)とは

CLS(Cumulative Layout Shift)とは簡単に言うとレイアウトのズレです。

例えば画面下部のリンクボタンを押そうとしたら上部にある画像が遅れて表示されたのでボタンの位置がズレて押せなかったなど、ユーザビリティが良くない状態のこと。

 

CLS(Cumulative Layout Shift)悪化には様々な理由がありますが、私も素人ながらトライアル・アンド・エラーで少しずつ改善させ、PageSpeed Insights(Lighthouse)のCLSの数値をほぼ0にすることが出来たのですが、何故かサーチコンソールのCLS(Cumulative Layout Shift)だけはいつまで立っても改善しません。なんで??

PageSpeed Insights(Lighthouse)のCLSの数値をほぼ0にすることが出来たのですが、何故かサーチコンソールのCLS(Cumulative Layout Shift)だけはいつまで立っても改善しません。

 

Web Vitalsを入れて原因分かった

Web VitalsとはGoogle Chrome(ブラウザ)の拡張で、これを導入することでリアルタイムでサイトのLCP(Largest Contentful Paint)、FID(First Input Delay)、CLS(Cumulative Layout Shift)の動きを監視できるのですが、ようやく原因が特定できました。

Web Vitals – Chrome ウェブストア

 

それはLuxeritasのグローバルナビ(ヘッダーメニュー)

グローバルナビ(ヘッダーメニュー)とは、ページの上や下に表示されるナビゲーションメニューのことですね。

Luxeritasのグローバルナビ(PC)


スマートフォンだとこの3本線のハンバーガーメニューと呼ばれるものです。

Luxeritasのグローバルナビ(モバイル)

Web Vitalsを眺めていると、私のサイトははじめは緑色の数値で全く問題ないのですが、画面を上下にスクロールすると、グローバルナビがニョキっと顔を出すタイミングでCLSの数値が少しづつ積み上がり赤字になることが分かりました。

Web Vitals(CLS正常)

Web Vitals(CLS悪化)

原因はこいつか!

 

グローバルナビを表示したときと非表示にしたときでCLSがどう動くのか撮ってみました。

Cumulative Layout Shiftの数字に注目してみて下さい👀

✅グローバルナビを表示させたとき:

✅グローバルナビを非表示にしたとき:

グローバルナビを表示させないとCLSはまったく悪化しませんね!

 

またLuxeritasの場合、画面を小さくしたモバイル用ページにするとページ下部に「モバイル用ナビボタン」もニョキッと顔を出します。

Luxeritasの「モバイル用ナビボタン」

これもグローバルナビほど酷くはないですがCLS悪化の要因です。

 

CLS(Cumulative Layout Shift)改善のための施策

対策としては設定画面の「グローバルナビを表示」のチェックを外し、グローバルナビ(グローバルメニュー)を表示させない、もしくはグローバルナビを表示はそのままにグローバルナビの設定の「スクロール固定」を「スクロール固定しない」に変更し、スクロールしてもニョキッと顔を出さない設定に変更すればCLSが悪化しません。

Luxeritasのグローバルナビ設定をいじるとCLSの悪化を防ぐことが出来ます

モバイル用ナビボタンも同様で、こちらもニョキッと顔を出すタイミングでCLSの数値が(グローバルナビほどではないですが)積み上がりますので、設定画面で全てのチェックを外しモバイル用ナビボタンを表示させないようにすればOK。

Luxeritasのモバイル用ナビボタンも同様に表示させないようにするとCLSの悪化を防ぐことが出来ます

*「モバイル用ナビボタン」を出しっぱなしの状態にすることも可能ですが、そうするとCLSは悪化した状態になりますのでNG。

 

早速Luxeritasの設定変更をし、数日後にはCLS(Cumulative Layout Shift)の数値が改善し緑色になったのを確認ヽ(=´▽`=)ノ

Luxeritasの設定変更をし、数日後にはCLS(Cumulative Layout Shift)の数値が改善し緑色になったのを確認

 

半年間の悩みが解決した瞬間です!

Luxeritasの設定変更をし、数日後にはページエクスペリエンス・シグナルも改善

 

6月中旬にあると言われていたコアウェブバイタルのアップデート(ページエクスペリエンス・アップデート)にもぎりぎり間に合いましたヽ(=´▽`=)ノ。

 

まとめ

Luxeritasのサーチコンソールにおける「ウェブに関する主な指標のCLS(Cumulative Layout Shift)」の数値の悪化の原因は、Luxeritasのメニュー表示(グローバルナビ)のニョキッだったというお話でした(ページエクスペリエンスはその後さらに伸びて良好URLが100%になりました)。

サーチコンソールのページエクスペリエンスシグナルが100%になりました

とりあえずはCLS悪化の原因が特定出来たのが嬉しいε-(´∀`*)ホッ

お疲れさまでした

あとはページの内容です(^_^;)。


QR Code | Tsuneの日々雑感

2021年6月16日パソコン/インターネット

Posted by Tsune