こんにちは。Googleサーチコンソールをよく使っているなら、拡張「ウェブに関する主な指標」が追加されたことに気が付いたでしょう。
2020年5月28日、ウェブマスターセントラルブログ「 Official Google Webmaster Central Blog: Evaluating page experience for a better web 」で、より良いユーザー体験のため、コアウェブバイタルという指標を使って、サイトが評価されることが明らかとなりました。
簡単に言えば、記事の品質だけでなく、ユーザーの使いやすさも検索順位の評価の一部になるということです。
ユーザーの使いやすさの例として、読込スピード、応答性、視覚的安定性があります。
下記は、私のブログの「ウェブに関する主な指標」のモバイルデータです。［2020.6.12時点］
日々変動している部分はありますが、173ページが良好、153ページが不良又は改善が必要で推移しています。
詳細を見てみると、不良ステータスは「CLSに関する問題：0.25超」、改善が必要ステータスは「CLSに関する問題：0.1超」と「LCPの問題：2.5秒超」です。
率直に、「改善しないとヤバいな…」という思いです。
「これが正解」と十分な対処法が開示されていません。CLSに関する問題の解決のため、私の考える原因と対処法をまとめています。
同じように悩んでいる方の参考になれば、幸いです。
更新履歴
- 「CLSに関する問題の対処法」のブログデザインを再修正し、修正した結果を記載。［2020.6.22追記］
CLSとは？
コアウェブバイタルには、LCP、FID、CLSという3つの指標があります。
LCPは、Largest Contentful Paintの略で、最も大きなコンテンツが表示されるまでの時間が計測されます。
FIDは、First Input Delayの略で、ユーザーが最初に操作（クリックや入力等）したときの応答時間が計測されます。
CLSは、Cumulative Layout Shiftの略で、視覚的安定性が数値化されます。
それぞれ、数値が小さいほど良く、GOOD（良好）、NEED IMPROVEMENT（改善が必要）、POOR（不良）の3段階で評価されます。
LCPとFIDは何となく理解できるのではないでしょうか。
「CLSって具体的にどういうこと？」と思いませんか。私はそう思いました。
Googleが提供しているWebサイト分析ツールweb.dev「 Cumulative Layout Shift (CLS) 」で解説されています。
例えば、次のようなことが挙げられています。
- 注文申込ボタンとキャンセルボタンが並んでいて、キャンセルボタンを押したッ瞬間に、レイアウトがずれて注文申込された
- 記事本文を読もうとしたら、レイアウトがずれて、出現した広告を誤クリックした
簡単に言えば、CLSは予期しないレイアウトのずれを数値化したものです。 ユーザーにとって、誤クリックは不利益を生みますし、予期しない広告の出現やレイアウト変更は困惑しますよね。
そのため、視覚的安定性はより良いユーザー体験は重要であると判断されているようです。
CLSに関する問題の原因
サーチコンソールでは、「CLSに問題があるよ」とは教えてくれます。しかし、具体的に「ここをこういう風に変えてね」とは教えてくれません。
あなた自身がその原因を推定し、それに対して対処法を見つけていく必要があります。
サーチコンソールでは、詳細な情報が得られないため、「 PageSpeed Insights 」を利用して、個々のページの原因を探っていきましょう。
また、自分のページを開いて、レイアウトのずれや、困惑する箇所がないかも確認しましょう。
私のブログだと、次の2つが原因であると考えられました。
- 記事タイトル下の広告
- ヘッダー部の3つの要素
記事のタイトル下に設置している広告が、記事本文より遅れて出現するため、レイアウトのずれが生じていました。
また、ブログのヘッダー部には、「ヘッダー画像」、「カテゴリー一覧」、「おすすめ記事スライダー（5記事）」がありました。
全体として、段階的に表示されるため、その度にずれが生じているのが良くない原因と推定しました。
Page Speed Insightsのラボデータの部分で、どのようにレイアウトが出現するのか（赤枠部分）、細かく確認できます。
カテゴリー一覧の部分が最初に読み込まれているのが分かるかと思います。
CLSに関する問題の対処法
2020.6.17に、先述した原因に対して、次の対処法を実施しました。
- 記事タイトル下の広告を削除（図①）
- ヘッダー画像を削除（図②）
- カテゴリー一覧を、トグルメニューに変更（図③）
- おすすめ記事スライダーを削除（図④）
だいぶレイアウトをシンプルにしました。
記事タイトル下の広告は、おそらく一番の原因なので削除しました。スマートフォンだと、記事上広告はクリックされづらいので問題ないでしょう。
使用していたヘッダー画像は、ややサイズが大きかったです。CLSだけでなく、LCPの原因でもあると推定していたので、思い切って削除しました。
カテゴリー一覧は、各名称を表示させるタイプだと、ずれが生じるのでトグルメニュー（開閉タイプ）に変更しました。
おすすめ記事スライダーは、残したかったというのが本音ですが、SEO対策を優先し削除しました。
サーチコンソールで検証依頼中でしたが、6.21に検証が完了しました。ひとまず、すべて「良好」になりました。
まとめ
CLSに関する問題についての原因と対処法の一例を紹介しました。
今後、SEO対策では、記事品質だけでなく、ユーザー体験も重要になってきます。ユーザー体験の指標として、コアウェブバイタル（LCP、FID、CLS）が導入され、一つの評価基準になります。
ぜひ、コアウェブバイタルに注目して、一歩進んだSEO対策をとって他社に差をつけていきましょう。
