CLSの発生原因と改善方法を特定してユーザビリティを改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CLS対策をしてPageSpeed Insightsを大幅改善

CLS対策初級編 WEB制作

コアWEBバイタルの1つであるCLS(コンテンツのズレ)を改善する方法を解説。imgタグにwidthとheightを指定したのですが、それでもズレが発生。なぜかを突き詰めたらLazy Loadの画像が原因でした。それも修正する方法!

公開日:
最終更新日:

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

CLS対応と高速表示でPageSpeed Insightsと Google Search Consoleのウェブに関する主な指標を改善

Webマスター必須のツール。「Googleサーチコンソール」にあらたな指標が加わり、ユーザーにとって快適なWEBサイトの指標が増えました。

コアウェブバイタルと呼ばれ、「LCP」「FID」「CLS」という3つの指標が登場。
サイトに色々と手を加えて、この指標を改善させるべく手を尽くしました。

結論から言うとPCではすべてが良好になり、モバイルは不良はなくなりました。

GoogleサーチコンソールのWEB指標

2020年8月15日現在のサーチコンソールの主な指標

PCで改善が必要なURL7件がでてますが、こちらも対応済みなので、良好に戻るはず!
モバイルも大体80くらいのスコアはでてるのでこちらも時間がたてば良好が増えてくるはず!

2020年9月12日追記 モバイルも良好になりました!

PCの良好から送れること約1ヵ月。
無事モバイルもオール良好になりました!

GoogleサーチコンソールのWEB指標

2020年9月12日現在のサーチコンソールの主な指標

PCで改善が増えてるのが気になりますが、計測すると90点以上なのでほっておきます。

CLSに関する問題を解決するには?不良をなくす方法

GoogleのSEOのスコアへの影響は今のところありませんので、SEO対策という点ではあまり意味はありません。

但し、2021年にコアウェブバイタルをランキング指標として取り入れるとの発表がされているので、将来的に重要な指標になることがわかります。

ユーザービリティの向上につながるのでやっておきたい

SEO的な効果はさておき、LCP、FID、CLSの3点ともともとあったFCPはサイト閲覧者(ユーザー)にとってどれも快適にサイトを閲覧する上で重要な項目を数値化したものになります。

LCP(Largest Contentful Paint:最大コンテンツの表示速度)とFID(First Input Delay:ユーザー操作に対する反応時間)は画面の表示速度に関する項目になります。

WEB Vitalsについての詳しい解説はGoogleの公式ページを見ておくのがオススメです。

読み込み中

CLS(Cumulative Layout Shift)に焦点をあてて紹介していきます

色々なところを改善して、高速表示に磨きをかけたりもしたのですが、長くなるので今回はCLS改善に的を絞ってお伝えしていきます。
WEB高速表示は次の記事で書こうと思います。

CLS(Cumulative Layout Shift)とは何かをまず知る

簡単に言うと、表示されたWEBページが画像などの読み込みにより、初回読み込み時とコンテンツの位置がズレる現象をいいます。
そのズレ幅が大きいほどスコアが悪くなるという寸法です。

わかりやすい事例をGoogleのAddy OsmaniさんがTwitterで動画にして紹介してくれています。

CLSが発生しているのは左側で、画像の領域が確保されずに、画像が読み込まれたらテキストが右にズレる、という動画になっています。

CLSが発生する要因を考える

レイアウトがズレる原因は大きく3つあると思っています。

1つは画像の大きさを指定しないで画像を読み込むことで、レンダリングされたときに画像の大きさ分だけレイアウトがズレる「画像によるズレ

2つ目はHTMLレンダリング後のCSSの読み込みによりpaddingやmarginによる「CSSによるズレ

3つ目がGoogle Adcenceなどの広告読み込みによるレイアウトのズレ

原因が分かっていれば対策が立てられるので、この3点に対して対策をしていきます。

CLSが発生しているかどうかを確認する方法

CLSが起きている箇所を確認する方法はいくつかあります。

1つ目は、「PageSpeed Insights」でCLSスコアを確認します。

PageSpeed Insightsのリザルト

PageSpeed Insightsのリザルト

スコア的に問題のある個所をどれくらいズレているかの値と、発生個所を教えてくれます。

ここのElementに書かれた箇所を確認して、ズレを修正しましょう。

Choromeのアドオン Web Vitals を使う

2つ目は、ChoromeのアドオンのWeb Vitalsを使う方法です。
ダウンロードはここから

Web Vitalsのリザルト

Web Vitalsのリザルト

Choromeでアドオンをインストールしてツールバーに常駐させると、勝手に計測してくれます。
緑色のアイコンをクリックすると上記の画像のような結果が表示されます。

このCLSの数値はページの閲覧の仕方で結構、数値が動くんですよね。
下から上に閲覧するとめちゃくちゃ悪い数値になったり、高速でスクロールすると数値が悪くなります。

LazyLoadが発動する前に高速スクロールすることでCLSスコアが悪くなると。

なので、これでスコアを確認するときは、上から普通に見ていくようにしましょう。

CLS改善 初級編 画像のサイズをimgタグに記述する

確実にやっておきたいことが img タグに 「width」と 「height」を記述すること。

画像の横幅と縦幅を指定する

画像の横幅と縦幅を指定する

昔は当たり前につけてたんですけどね、レスポンシブ対応が当たり前になったころから width と height を書かくなったんですよねぇ。個人的には。

で、昔はpxもつけてた気がするんですが、最近はpxつけないで書くのが主流みたいですね。

画像サイズはCSSでデバイスに応じたサイズに変更されるからなくてもいいかと。
やっぱり基本は大事ですねぇ。

対策は簡単なんだけど…、今までつけてなかった属性を全部手動でつけないといけないので死ぬほどめんどくさかった。

ワードプレスなんかだとプラグインとかで簡単に対応できそうです。

CSSでサイズ変更させているから画像のサイズ指定はいらないんじゃないの?

画像のサイズは基本的にCSSでサイズ調整をしている場合がほとんどだと思います。
わざわざHTML上にサイズ書かなくてもよくないかと思いますが(私もそう思って書いてなかったわけですが)widthとheightに書かれた数字のアスペクト比(縦横比)をブラウザが理解して、画像の予定サイズを算出することにより、レイアウトシフトを防ぐことができます。

lazy lodaでローディング画像を使っている人は要注意!

imgタグにwidth と heightを指定したんですけどね、レンダリングされるときにズレを目視で確認できたんですよ。

なんでだろうと思ってたんですが、私のサイトはlazy loadの読み込み時にローディング画像を指定していまして、その画像と実際に読み込まれる画像のサイズにズレがあって、画像サイズにズレが生じていました。

loadingイメージ

↑このLoading画像。

img に指定した画像サイズを元に、CSSが実際の画像幅で表示させます。
その時にこのloading画像のサイズを計算してレンダリングした後に、スクロールされて実際に表示される画像が表示される、という流れになります。

lazy loadの仕組みとして、src="" に書かれた画像(loading画像)を読み込み、JavaScriptが読み込まれたらdata-srcに書かれた画像を読み込みなおす、という仕組みになっています。

LazyLoadを適用したimgタグ

LazyLoadを適用したimgタグ

そのため、loading画像と遅延表示させる画像とのサイズ(正確にはアスペクト比)が異なる画像の場合、表示にズレが生じると。

解決策として、読み込み画像と同等のloadingイメージを用意するという手法で対応しました。

CLS対策に用意したLoading画像

CLS対策に用意したLoading画像

全部の画像と同等のサイズのローディング画像を用意するのは大変だったので、よく使う画像サイズのローディング画像を用意して。
流石に全パターンを用意するのは大変すぎたので、そこは割り切って。。

ローディング画像使わないでlazy loadさせてもいいんですけどね。
なんとなく、こだわりがあって、ローディング画像を使っています。

これで最低限のCLS対策はできたと思っていたのですが、目視で確認できるレベルでズレが生じていました。

次回 CSSによる表示のズレ対策

ここまでが初級編のCLS対策となります。
次は、CSS設定によるレイアウトシフト対策を解説します。

imgタグにwidthとheightを指定するだけなので、技術的に難しいことはないわけですが、日々の積み重ねがちゃんとできてないと、修正がめんどくさいので、今後はしっかりwidthとheightを設定しようと心に強く近いました。

ほんと、3日間くらいずっとwidthとheightを指定するという単純作業を繰り返しましたからね。

▼続きはコチラです

WEBデザイナーを目指すならオンライン学習のUemy

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

html 関連記事はこちら すべての WEB制作 記事はこちら

1行のCSSで作る横スライドの作り方

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

参考にならない適当につくるアイキャッチの作り方!

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon