当サイトは広告が含まれています

「CLSに関する問題」を一発で解決!

「CLSに関する問題」を一発で解決!

こんにちは、ikuzo(いくぞう)です。

ブロガーのみなさん、Googleグーグル Searchサーチ Consoleコンソールはちゃんと見てますか?

私は検索からのクリック数を確認するために1日1回は見ています。

普段は検索パフォーマンスの「レポートを開く」をクリックして「クリック数」と「表示回数」のグラフを見て終わりなんですが、

グーグルサーチコンソールの「レポートを開く」

先日たまたまスクロールして下の方を見たら、なんとエラーが出てるじゃないですかΣ(゚Д゚)

サーチコンソールの「拡張」に出たエラー

ウェブに関する主な指標の「PC」の方で12人の不良が現れてました。

PCで12件の「不良URL」が出現

「PC」のクラスはいい子たちばかりだったのに、急にどうしたの?

あなたたちにいったい何があったっていうの……(つд`)

と泣いても始まらないので先生(俺)は調べてみることにしました。

注:最初にお断りしておきますが、これは私が運営している別サイトでの話です。

スポンサーリンク

サチコの「CLSに関する問題」というエラー

「CLSに関する問題」という不良

サチコのエラー内容は「CLSに関する問題:0.25超(パソコン)」というものでした。

「CLSに関する問題:0.25超(パソコン)」というエラー

CLSに関する問題はレベルとして「0.1超」と「0.25超」の2つがあって、当然「0.25超」の方が状況はよろしくないです。

CLSとは、サーチコンソールのヘルプに以下のように記載されてます。

CLSCumulative Layout Shift): 読み込みフェーズにおけるページ レイアウトの移動量を示します。評価スコアの範囲は 0~1 で、0 は移動なし、1 は移動量が最大であることを意味します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。

ウェブに関する主な指標レポート/Search Console ヘルプ

つまり「CLSに関する問題」というのは、

サイト内でレイアウトが動いているから、それを改善しなさい」というものです。

たとえばヤフーショッピングや楽天市場にアクセスすると、

次から次へと「おすすめ商品」が現れてレイアウトがガタガタ動くじゃないですか。

きっとアレのことを言っているのでしょうね。

ただ自分のブログを見るぶんには、不良扱いされるほどレイアウトが動いている様子はないと思うんですが……。

スポンサーリンク

CLSのエラーページを検証

サチコのエラーページ一覧を見ると、CLSに関する問題が起きているのはいずれも

記事一覧やカテゴリーページといったサムネイル画像がたくさん表示されているページでした。

(しかし結果的にサムネイル画像は全く関係ありませんでした。)

「CLSに関する問題」が起きているページの一覧

エラーページの一覧には「PAGESPEED INSIGHTS」(そのページを読み込んで分析してくれる)のリンクがあります。

「PAGESPEED INSIGHTS」のリンク

早速それを押して、どれくらい不良になってしまったのか、検証してみました。

「ほっとけよ」と言う不良の高校生

ほっとけるわけないじゃないか、ボクは君の担任だぞ。分析開始。

「PAGESPEED INSIGHTS」で分析開始

まずまず優秀じゃないですか。

「PAGESPEED INSIGHTS」の分析結果(93点)

CLSは「フィールドデータ」と「ラボデータ」のところに2つありますが、

実際のユーザーから送られてきたデータは「フィールドデータ」の方です。

「フィールドデータのCLS」と「ラボデータのCLS」

フィールドデータは特定の URL の今までのパフォーマンスについてのレポートであり、実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データです。ラボデータは、一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータです。そのため、値が異なることがあります。

PageSpeed Insights API について/Google Developers 

フィールドデータのCLSは0.25を超えていなかったものの、0.17は「改善が必要」という数値です。

ステータスの定義(CLS)ウェブに関する主な指標レポート/サーチコンソールヘルプ

でも、思ったほど不良になっていなかったので、先生は安心しましたよ。

捨てネコを拾う不良

スポンサーリンク

CLSに関する問題の原因

そしてもう一度よーく見たら、自分では動いていないと思っていましたが、

サイドバーで怪しい動きを発見しました。

アドセンス広告が表示される際に下のような動きがありました。

アドセンス広告が表示される際にレイアウトが移動する

「CLSに関する問題」はたぶんこれですね。

アドセンス広告がほんの一瞬ですが、後から割り込んでくるので、広告の下側が大きく移動して

それじゃいかんのだよ、何とかしなさいね」とGoogle様が仰ってるわけです。

っていうか、おまえのとこの広告じゃねぇか、これ。

 

そういえばエラーが起きる2、3ヵ月前に「ラージスカイスクレイパー」という巨大な広告を、

欲を出してサイドバーに2つも貼ったのを思い出しました。

フィールドデータは過去データの集計値なので、それが今ごろになってエラーになったのでしょう。

スポンサーリンク

CLSに関する問題の解決方法

「CLSに関する問題」の原因がこれだとすると解決方法はかんたんです。

サイドバーのアドセンス広告をやめるか、もしくは

動いてエラーになるものは、動かなくすればいいだけの話です。

 

どうするかというと、アドセンス広告が

「おらおら、どけどけ。今からこの公園で俺様が野球をやるんだよ。おまえら、よそ行って遊べ。」

いきなり公園に現れるジャイアンだとしましょう。

(最近のジャイアンは昔に比べて優しくなった、という噂を聞いていますが、ドラえもんを観ていないので最近のジャイアンは知りません。あしからず)

 

もし「ジャイアンが来る」と分かっていれば、誰も公園で遊んだりしませんよね。

そうです、ジャイアンの場所をあらかじめ空けておけばいいわけです。

つまり、アドセンス広告が表示される場所に事前にスペースを作っておくことでレイアウトは動かなくなり、

CLSに関する問題は解決できるわけです。

 

たとえばアドセンスのラージスカイスクレイパーは高さが600pxあります。

この広告を表示する場所に高さ600pxの場所をあらかじめ作っておきます

私の使用しているテーマ「Cocoon」の広告ウィジェットなら、次のコードをスタイルシートに追記します。

.widget_common_ad{
height: 600px;
}

広告(PC用)ウィジェットだとこうです。

.widget_pc_ad{
height: 600px;
}

 

それともうひとつ、アドセンス広告に比べれば微々たるものですが、

ツイッターのフォローボタン付近にも動きがありました。

フォローボタンが表示される際に下側のサムネイル画像がわずかに動いていました。

フォローボタンに表示される際に若干レイアウトが動く

こちらはフォローボタンの高さをサイドバーのウィジェットに直接書き込んで動きを止めました。

フォローボタンの高さを指定したCSS

▼画像が動いていない修正後

修正後(画像の動きなし)

この2つを行った結果、どちらのCLSも3ヵ月後には「0(ゼロ)」になりました!

どちらのCLSも0(ゼロ)になった

※CLSの値は改善してもすぐには反映されません。

画像に“width”と“height”が指定されていない場合もCLSの値が悪くなるようですが、

レイアウトに動きがなければそこまで悪い数値にはならないでしょう。

なので「CLSに関する問題」のエラーが出たら、まずはどこが動いているかを目を凝らして探しましょう!

動きさえ止めれば「CLSに関する問題」は解決します!

スポンサーリンク

その他の改善できる項目

ついでなので、PAGESPEED INSIGHTSで指摘された他の項目も見ておきましょう。

いたれりつくせりですね(笑)

私に限らず「改善できる項目」で指摘されやすいのは、この3つです。

「改善できる項目」の提案内容

指摘されやすい項目

次世代フォーマットでの画像の配信
使用していないJavaScriptの削除
レンダリングを妨げるリソースの除外

次世代フォーマットでの画像の配信

こちらは「JPEG 2000」「JPEG XR」「WebP」などの次世代フォーマットを使えば、

ページの読み込み時間を短縮できるという提案です。

改善できる項目「次世代フォーマットでの画像の配信」

これについては、WordPressのプラグイン「EWWW Image Optimizer」を使えば簡単に解決可能です。

やり方はこちらの記事をご覧ください。

EWWW Image Optimizerの設定とWebPへの変換方法
こんにちは、ikuzo(いくぞう)です。今回はブログの画像を自動で圧縮したり、圧縮率の高いwebp(ウェッピー)という画像フォーマットへ自動で変換してくれるWordPressのプラグインのEWWW Image Optimizerの設定方法を...

使用していないJavaScriptの削減

こちらもプラグインの「Flying Scripts」を使うと解決できます。

私は、このプラグインを使っただけでPAGESPEED INSIGHTSのスコアが爆上がりでした。

やり方はこちらの記事をご覧ください。

モバイルスコア爆上り!「使用していないJavaScriptの削減」の改善方法
こんにちは、ikuzo(いくぞう)です。サイトスピードを計測できるGoogleのPageSpeed Insightsってありますよね。私が運営している別のサイトなんですが、パソコンに比べてモバイルのスコア(表示速度)が以前はおもいっきり悪か...

レンダリングを妨げるリソースの除外

レンダリングを妨げるリソースの除外」は、

「Autoptimize」や「Async JavaScript」というプラグインが有効らしいですが、

私は今のところこれについては放置してます。

というのプラグインをあまり多くしたくないのと、

Cocoonの公式サイトでは、Autoptimizeは非推奨プラグインになっているからです。

 

AutoptimizeはCocoonに限らず、不具合が発生しやすいプラグインのようです。

もしインストールするなら設定方法をよく調べたうえでご使用下さい。

今回は以上です。最後まで読んでいただき、ありがとうございました。

コメント