サチコの「CLSに関する問題:0.25超(PC)」を一発で解決!

エラーが出て吠える男性 ブログ

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

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

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

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

グーグルサーチコンソール トップページの「レポートを開く」を押す

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

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

見てみると「モバイル」と「PC」に分かれている「PC」の方で12人の不良が現れてました。

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

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

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

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

スポンサーリンク

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

CLSに関する問題を起こしている不良たち

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

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

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

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

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

たとえばヤフーショッピングや楽天市場のトップページを表示すると、

次から次へと「おすすめ商品」が現れてレイアウトがガタガタ動き、別の商品を間違えてクリックしそうになるアレのことでしょうね。

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

スポンサーリンク

CLSエラーページの検証

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

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

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

「CLSに関する問題:0.25超(パソコン)」のエラーが起きているページの一覧

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

「PAGESPEED INSIGHTS」のリンク

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

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

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

「PAGESPEED INSIGHTS」で分析開始

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

「PAGESPEED INSIGHTS」の分析結果

CLSは「フィールドデータ」と「ラボデータ」のところに2つありますが、実際のユーザーから送られてきたデータは「フィールドデータ」の方です。

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

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

PageSpeed Insights API について/Google Developers 

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

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

捨てネコを拾う不良

スポンサーリンク

CLSに関する問題の原因

自分では動いていないと思っていましたが、よーく見てみるとサイドバーで変化を発見しました。

アドセンス広告の表示し始めに起きるほんの一瞬ですが、サイドバーのレイアウトに動きがありました。

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

「不良」と呼ばれるからには、もっと酷い現象が起きてるのかと思ったんですが、

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

つまり、アドセンス広告がほんの一瞬遅れて割り込んでくるので、

広告の下側が大きく移動して「それじゃいかんのだよ、何とかしなさいね」とGoogle様が仰ってるわけです。

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

 

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

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

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

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

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

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

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

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

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

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

あらかじめ「ジャイアンが来る」と分かっていれば、誰も公園で遊びませんね。

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

つまり、アドセンス広告が表示される場所にあらかじめスペースを作っておけばレイアウトは動かなくなり、

CLSのエラーは起きなくなるということです。

 

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

この広告を表示する場所に高さ600pxの場所をあらかじめ作っておくわけです。

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

.widget_common_ad{
height: 600px;
}

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

.widget_pc_ad{
height: 600px;
}

 

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

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

フォローボタンが表示される際に下にある画像が、僅かに下側へ動いてます。

URLからフォローボタンに変わる際に若干レイアウトが動く

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

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

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

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

この2つを行った結果、ラボデータのCLSは見事に“0(ゼロ)”になりました!

ラポデータのCLSが0(ゼロ)になった

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

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

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

スポンサーリンク

その他の改善できる項目

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

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

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

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

指摘されやすいもの3つ

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

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

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

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

「改善できる項目」の提案内容(詳細)

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

別記事にしてありますので、興味のある方は読んでみて下さい。

【最新】EWWW Image Optimizerの設定とWebPへの変換方法

JavaScriptの削除とリソースの除外

❷と❸については「使ってないCSSやJavaScriptは邪魔だから削除しなさいね」といったものです。

こちらについては、調べれば色々と改善できそうな方法は出てきますが、

もし失敗すると思わぬところに影響が出て修正するにも時間がかかりそうです。

私の場合は今回見る限り❷と❸すべて改善してもページの表示時間が0.47秒早くなるだけなので

見に来てくれている方には申し訳ないですが、正直面倒で手をつける気にはなりません。

もちろん、短縮できる時間がもっと多ければ何かしらの対応はすると思いますが。

2つ合わせて0.47秒短縮

この2つを改善するには「Autoptimize」というプラグインを使う方法もあるようですが、

設定が少し面倒そうなのと、こちらも不具合が出る可能性もあるようなので、使用する際はあくまで自己責任になります。

一応、やり方が書いてある記事を2つ見つけたのでのせておきます。

WordPressのレンダリングを妨げるリソースを除外する方法(CSSとJavaScript)/Kinsta

レンダリングを妨げるリソースの除外?Autoptimizeで簡単に解決!/maroroblog

 

もし❷と❸の数値がひどくて、自分じゃどうにもできないようであれば

ココナラ専門の人にお願いするという手もあります。

素人が下手にやって時間がかかったり、取返しのつかないことになるよりは、

お金を払って解決した方が面倒がなくていいのではないでしょうか。

ココナラで「WordPress 高速化」で検索したらこんなサービスがありました。

ココナラ「プロがWordpressサイト表示速度高速化します」ココナラ「プロがWordpressサイト表示速度高速化します」(15,000円)

評価も満点ですし、「プロ」という安心感もありますね。

さきほどのCSSのセレクタを含め「よう分からん」という人は、ココナラでまとめてプロにお任せしてもいいと思います。

CLSのエラーは3ヵ月後に無事解決しました

フィールドデータは過去データの集計値なのでだいぶ時間がかかりましたが、

修正から3ヵ月経ってようやく「CLSに関する問題」のエラーが解決しました。

サーチコンソールのCLSのエラーが解決

現在はフィールドデータもラボデータも、CLSの値は共に“0(ゼロ)”になってます。

PAGESPEED INSIGHTSでフィールドデータもラボデータの値も“0”になった画面

やはり、やり方は間違っていなかったようです。

現在「CLSに関する問題」のエラーが出ている方は、動いている場所を探して修正が完了したら気長にお待ち下さい。

レイアウトの動きさえ止めれば、いずれは解決するはずです。

ブログ
スポンサーリンク
ikuzoblog

コメント