こんにちは、ikuzo(いくぞう)です。
ブロガーのみなさん、Google Search Consoleはちゃんと見てますか？
私は検索からのクリック数を確認するために1日1回は見ています。
普段は検索パフォーマンスの「レポートを開く」をクリックして「クリック数」と「表示回数」のグラフを見て終わりなんですが、
先日たまたまスクロールして下の方を見たら、なんとエラーが出てるじゃないですかΣ(ﾟДﾟ)
見てみると「モバイル」と「PC」に分かれている「PC」の方で12人の不良が現れてました。
「PC」のクラスはいい子たちばかりだったのに、急にどうしたの？
いったい、あなたたちに何があったっていうの…(つд`)
と泣いても始まらないので先生（俺）は調べてみることにしました。
サチコの「CLSに関する問題:0.25超」というエラー
サチコのエラー内容は「CLSに関する問題:0.25超（パソコン）」というものでした。
CLSとは、サーチコンソールのヘルプに以下のように記載されてます。
CLS（Cumulative Layout Shift）: 読み込みフェーズにおけるページ レイアウトの移動量を示します。評価スコアの範囲は 0～1 で、0 は移動なし、1 は移動量が最大であることを意味します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。
たとえばヤフーショッピングや楽天市場のトップページを表示すると、
次から次へと「おすすめ商品」が現れてレイアウトがガタガタ動き、別の商品を間違えてクリックしそうになるアレのことでしょうね。
自分のブログを見るぶんには、不良扱いされるほど動いてる様子はないと思うんですが…
CLSエラーページの検証
サチコのエラーページ一覧を見ると、エラーが起きているのはいずれも
記事一覧やカテゴリーページといったサムネイル画像がいっぱい表示されているページでした。
（しかし結果的にサムネイル画像は全く関係ありませんでした。）
エラーページの一覧には「PAGESPEED INSIGHTS」（そのページを読み込んで分析してくれる）のリンクがあります。
早速それを押して、どれくらい不良になってしまったのか、検証してみました。
ほっとけるわけないじゃないか、ボクは君の担任だぞ。分析開始。
まずまず優秀じゃないですか。
CLSは「フィールドデータ」と「ラボデータ」のところに2つありますが、実際のユーザーから送られてきたデータは「フィールドデータ」の方です。
フィールドデータは特定の URL の今までのパフォーマンスについてのレポートであり、実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データです。ラボデータは、一連の固定されたネットワーク条件で 1 台の端末でページ読み込みをシミュレートしたデータです。そのため、値が異なることがあります。
フィールドデータの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;
}
それともうひとつ、アドセンス広告に比べれば微々たるものですが、
ツイッターのフォローボタン付近にも動きがありました。
フォローボタンが表示される際に下にある画像が、僅かに下側へ動いてます。
こちらはフォローボタンの高さをサイドバーのウィジェットに直接書き込んで動きを止めました。
▼画像が動いてない修正後
この2つを行った結果、ラボデータのCLSは見事に“0（ゼロ）”になりました！
画像に“width”と“height”が指定されていない場合もCLSの値が悪くなるようですが、
レイアウトに動きがなければそこまで悪い数値にはならないでしょう。
なので「CLSに関する問題」のエラーが出たら、まずはどこが動いているかを目を凝らして探しましょう！
その他の改善できる項目
ついでなので、PAGESPEED INSIGHTSで指摘されやすい他の項目も見ておきましょう。
いたれりつくせりですね（笑）
私に限らず「改善できる項目」でよく指摘されるのは、この3つです。
指摘されやすいもの3つ
❶ 次世代フォーマットでの画像の配信
❷ 使用していないJavaScriptの削除
❸ レンダリングを妨げるリソースの除外
次世代フォーマットでの画像の配信
❶は、「JPEG 2000」「JPEG XR」「WebP」などの次世代フォーマットを使えば、
ページの読み込み時間を短縮できるという提案です。
これについては、WordPressのプラグイン「EWWW Image Optimizer」を使えば簡単に解決可能です。
別記事にしてありますので、興味のある方は読んでみて下さい。
JavaScriptの削除とリソースの除外
❷と❸については「使ってないCSSやJavaScriptは邪魔だから削除しなさいね」といったものです。
こちらについては、調べれば色々と改善できそうな方法は出てきますが、
もし失敗すると思わぬところに影響が出て修正するにも時間がかかりそうです。
私の場合は今回見る限り❷と❸すべて改善してもページの表示時間が0.47秒早くなるだけなので
見に来てくれている方には申し訳ないですが、正直面倒で手をつける気にはなりません。
もちろん、短縮できる時間がもっと多ければ何かしらの対応はすると思いますが。
この2つを改善するには「Autoptimize」というプラグインを使う方法もあるようですが、
設定が少し面倒そうなのと、こちらも不具合が出る可能性もあるようなので、使用する際はあくまで自己責任になります。
一応、やり方が書いてある記事を2つ見つけたのでのせておきます。
WordPressのレンダリングを妨げるリソースを除外する方法（CSSとJavaScript）/Kinsta
レンダリングを妨げるリソースの除外？Autoptimizeで簡単に解決！/maroroblog
もし❷と❸の数値がひどくて、自分じゃどうにもできないようであれば
ココナラ
で専門の人にお願いするという手もあります。
素人が下手にやって時間がかかったり、取返しのつかないことになるよりは、
お金を払って解決した方が面倒がなくていいのではないでしょうか。
ココナラで「WordPress 高速化」で検索したらこんなサービスがありました。
ココナラ
「プロがWordpressサイト表示速度高速化します」（15,000円）
評価も満点ですし、「プロ」という安心感もありますね。
さきほどのCSSのセレクタを含め「よう分からん」という人は、ココナラでまとめてプロにお任せしてもいいと思います。
CLSのエラーは3ヵ月後に無事解決しました
フィールドデータは過去データの集計値なのでだいぶ時間がかかりましたが、
修正から3ヵ月経ってようやく「CLSに関する問題」のエラーが解決しました。
現在はフィールドデータもラボデータも、CLSの値は共に“0（ゼロ）”になってます。
やはり、やり方は間違っていなかったようです。
現在「CLSに関する問題」のエラーが出ている方は、動いている場所を探して修正が完了したら気長にお待ち下さい。
レイアウトの動きさえ止めれば、いずれは解決するはずです。
コメント