Help us understand the problem. What is going on with this article?

CLSエラーが出た時に確認すること試すこと

やりたいこと

・GoogleのSearchConsoleで「CLSエラー」が出ているので改善したい

「CLSエラー」がでていると、SearchConsole > ウェブに関する主な指標 > モバイル のところで『不良URL』として表示されます。

そもそも『CLS』とは?

CLSとは、『Cumulative Layout Shift』の略で、視覚の安定性を測る指標です。

例えば、サイトを見ていたら突然ガクッとレイアウトがズレたり、突然画像が表示されてテキストが下に落ちたりしたら不快ですよね。
これが起きない状態を安定していると考えるとシンプルかな。

これを独自に測定した値がCLSの数値です。0.1未満がGOODとされています。

ついでに『LCP』『FID』について

LCPは『Largest Contentful Paint』。ページの表示速度を測る指標です。
ページが読み込みを開始してから2.5秒以内に表示できるとGOODとされます。

FIDは『First Input Delay』。ユーザーの応答性を測る指標です。
ユーザーがクリックやタップしてからの応答が100ミリ秒以下であればGOODとされます。

CLSエラーを確認するための準備

・Google Chromeの拡張機能『Web Vitals』を入れておく
表示しているサイトに、CLSエラーがどのくらい出ているのかどうか表示してくれます。LCPやFIDの数字も確認できます。
(エラーがでてると、アイコン上に数字がチラチラ出てうざいので、必要な時だけの使用にした方がいいですよ)

・Google Chromeのデベロッパーツール(開発ツール)でLightHouseが使えるのを確認する
スクリーンショット 2020-09-23 10.23.30.png

サイトや拡張機能使わなくても開発ツールで使えたの知らんかった

『CLSエラー』の改善のためにやったこと

1)viewport設定の見直し
色々詰め込んだ<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">みたいなのではなく、viewportはシンプルに。

index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewportについては↓のページが参考になるかと。
参考)
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2)画像タグ(img)の見直し
レスポンシブ対応のためにwidthheightを省略している場合があると思いますが、これを設定するだけでほぼほぼ改善されます。
レスポンシブ対応はCSSでやりましょう。

style.css
img{
    max-width:100%;
    height:auto;
}

LightHouseの数字を上げるために、ほかにもやっておくといい対策

・aタグのrel要素の見直し
target="_blank"を指定している場合、rel="noopener"rel="noreferrer"を入れると良いそうです。

・altタグは入れよう
空でもいいからいれておこう。

・htmlタグに lang をいれよう
意外に忘れがち。

CLSエラーを改善するとどうなるの?

・LightHouseの数字がよくなる

改善前)
スクリーンショット 2020-09-23 10.28.21.png

改善後)
スクリーンショット 2020-09-23 10.24.42.png

Accessibility、Best Practices、SEOの数字があがります。

SearchConsoleのCLSエラーが消える

CLSの数値が0.25以下になれば不良URLではなくなるようです。
SEOの等の数値が上がるのを考えると、そっち方面で優良なサイトとして判断してもらえる、、、のかも?

SearchConsoleのCLSエラーの対象はファーストビューでの数値(っぽい?)

表示した時のWeb Vitalsの数値と、スクロールしてからの数値は変わります。
で、それをみていると、どうもサーチコンソールでエラーとして出る数値はファーストビューの数値みたいなんですよね。

(LightHouseの数字とも若干違うんですよね。アクセス時の状況でいろいろ変わるのでなんとも言えませんが)

なので、ファーストビューのCLSエラーを改善できれば、サーチコンソール上のエラーは消える?っぽいです。
でも、やっぱりスクロールしてる途中にガクッとしたら嫌なので、全体的に直しましょうね。

CLSもLCPもFIDも、よりユーザー体験(UX)を提供するための指標で、必ずやらなければいけないわけではありません。
ただ、使いにくいサイト(UXの悪いサイト)を訪れたい人がいるかどうかを考えると、対策したい部分です。

また、2020年5月28日にGoogleが、検索ランキングの指標を、CLS・LCP・FIDから構成される「Core Web Vitals(コアウェブバイタル)」と既存のシグナルを組み合わせると発表してますので、SEO対策の一貫として対応したほうがいいかもしれません。

CLSエラーが気になる人はおためしあれ。

とても参考になる記事

Web Vitals
Core Web Vitalsについてざっくりまとめ - Qiita
GoogleのUX指標「Core Web Vitals(コアウェブバイタル)」とは?LCP・FID・CLSを解説|ferret

mei331
想像と創造を繰り返す黒いヒツジ。ヒツジとペンギンが好き。フルーツサンドを探しています。
https://arca-works.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away