wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

サーチコンソール・CLS(累積レイアウト変更)問題の対処~用語理解・ユーザー操作ミスなどにつながるレイアウト変動要素カット

      2020/09/27

こんにちは、管理人@SS_mshpです。

今回は、サーチコンソールを見ていると出てくる問題『CLS』について、対応してみます。

CLSっていわれてもわからないけど、Cumulative Layout Shift(累積レイアウト変更)っていわれると、なんとなく意味がつかめそうです。意味の確認や管理人のサイトでの状況・対処などをみていってみましょう。

用語の意味・定義を理解:CLS(Cumulative Layout Shift)→累積レイアウト変更

google web.devで調べました。文面はまだ全部英語ですが(英語が読めない人に対するユーザビリティは、google自体も悪い)、イメージイラストもあるので、なんとなく意味はつかんでいただけると思います。今回取り上げる『CLS』とは『Cumulative Layout Shift(累積レイアウト変更)』という意味で、『ユーザーが予期しないレイアウトの変動は、少ないほど良い』とされています。

web.devページでは具体的に『タップしようとしたボタンが、あとから表示されてきた要素のせいでずれて押せない』といった事例が紹介されていました。

CLSスコアを上げる指標(How to improve CLS )としては、以下の要素が推奨されています(意訳)。


・画像や動画のサイズ属性(size attributes・あらかじめコンテンツサイズがわかるように)
・ユーザーが操作で予測できるもの以外のコンテンツを、後から表示しない(後から入った分ずれる)
・レイアウトがいきなり変わるアニメより、変形アニメ(連続的な動きなので予測しやすい。マテリアルデザインとも被る?)

このサイトでのCLSの状況や、検索パフォーマンスへの影響など

不良 URLが大量に発生(ただしソースがChrome UX レポート)


サーチコンソールの『ウェブに関する主な指標』というメニューで確認。どうやらPCビューにCLS的によろしくないページが大量発生したようです。ただし、判定のソースが『Chrome UX レポート』なので、『PageSpeed Insightsラボデータで、累積レイアウト変更0.011など、良いスコアがでていても、不良と判定される』ようです。
グーグルChrome、遅いんで使ってないです。すいませんね(笑)


こちらが、PageSpeed Insightsで見たときのデータ。どっちかというと、『Origin Summary』のデータを拾っているような気がしますが(たぶんフィールド データが出るほど、Chromeユーザーがこのサイトをみていない)。
WPですがデータベーススキャン回数を減らし高速化を図ったとはいえ、こちらの項目も最適化していく必要がありそうです。

検索パフォーマンスへの影響はあった?


実はこのパフォーマンスが落ちている原因が、『パーマリンクを一気に変えた』や『アルゴリズムアップデート』だったため、影響は軽微でした。5月ごろアップデートやパーマリンク変えがありましたが、『4月の時点で既に発生していたとはいえ、検索パフォーマンスが一気に落ちる』というわけではないようです。

しかし、こういう細かいことが積み重なってくると、ユーザーに見てもらえなくなる可能性は十分にあります。

CLS(Cumulative Layout Shift/累積レイアウト変更)対応

アドセンス自動広告


最初に疑ったのはこれでした。テンプレートに固定で埋め込んでいるものは、『表示前に領域確保・在庫が無くて配信無しの場合も領域確保』みたいな感じでしたが、自動広告はそうはいきません。毎回どこに入ってくるかわからないからです。

念のためアドセンス自動広告タグはカット&テンプレートからも一部外す(表示を減らす)という対応をとります。広告費は稼げなくなりますが、売り上げは他のところで取り返します。

タグクラウド


パーツキャッシュとかしていて、サーバーがある程度応答速度を出せる場合は気になりませんが、こちらも念のために。データベースからタグのurlを抜くのにも、少しだけ時間が発生しますからね。
(SELECT *FROM `wp1_terms` で全件抜いてもクエリ実行時間 0.0006 秒だったので、あまり気にしなくても良いかもしれません。)

画像にサイズ指定


WordPress出力のものには『width・height』が入ってくるようになっていますが、自分で貼った画像とかだと、サイズ指定を忘れてしまうことがあります。なお、管理人はimgタグの属性ではなく、CSSで指定していました。例えば、横280px・高さ47pxを指定した場合、画像表示前にこの分の領域を確保できるため、いきなり画像が出てきてレイアウトが変動という恐れがなくなります。

WordPressは5.5以降から、『width・height指定の画像に対して有効なLazy-load機能がついてくる』点がアナウンスされているので、恩恵をうけるためにも、サイズ指定をチェックします。

対応後の状況~web.dev/measure上での計測ではクリア、時間がたつとChrome UX レポート経由でサーチコンソールにも反映


対応後は、ツールでチェックしてみます。Cumulative Layout Shiftの項目も緑色になっているので、改善していると考えてよいでしょう。


ただし、サーチコンソール上ではまだ反映していないので『検証』を申請しました。28日とか、結構時間かかりますね~。

少し(3週間程度)時間をおいてみてからのチェックです。最初はChrome UX レポートの数値も反映していませんでしたが・・・


8月に入ってから、モバイル・PCともに『不良URL→良好URL』という変化が見られました。対応方法としては、わりと正しい形になったのかなと思います。

あとがき・まとめ

  • CLS(Cumulative Layout Shift)は累積レイアウト変更のことで、変動は少ないほど安定しているとみなされる
  • 画像や動画のサイズ属性や、ユーザーが予測できないレイアウト変動などに気をつける
  • 修正後はツールチェックや、検証の申請を

まとめるとこんなところでしょうか。管理人も『いきなり後から広告などが現れて本文の位置が変動してこまる』みたいなことがあったので、これは気をつけていきたいところです。googleのスコアはただの指標でしかなく、『いきなりレイアウト変動して、ユーザーが読みやすいかどうか』を考えながらやっていくと良いかもしれません。

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

【カテゴリ】 - 再生回数・アクセスの解析
【タグ】 -

  関連記事

【youtube studio解析】動画宣伝掲示板って効果あった?→再生回数5回・ほぼ、ありませんでした涙

今回は、管理人が三年前に著作権フリー曲サイトを立ち上げた時、使っ ...

【WordPress/ブログ】タグクラウドの使用方法と、効果測定の方法&効果が無いときはどうするか

今回は、WordPress/ブログでよくあるウィジェット『タグク ...

【動画でコンテンツ充実・検索体験を向上】文章でわかりにくい部分を動画で解説した記事は、滞在時間が長くなるのか?

今回は、このコラムの一部に載せていた、補足的な動画コンテンツが、 ...

【レイアウト検証】ヘッダー大きい背景の真ん中にあるCTAボタンってアクセス流す効果があるの?

今回は、webサイトのレイアウト・良い感じの位置に配置したボタン ...

Googleアナリティクスで、自分のアクセスがカウントされてると困るんですけどどうする?(wpユーザー向け方法アリ/PHP)

今回は、自分のサイトを確認するときの悩み『Googleアナリティ ...

低品質(PV少ない)ページをGoogleサーチコンソール・アナリティクスで見つけ削除する方法

今回は、検索エンジンおよび読者からみてサイト評価を向上させる、『 ...

【キーワード解析ok】アメブロをgoogleサーチコンソールに登録する方法

今回は、googleの検索に関する、自サイトのさまざまな情報を受 ...