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

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

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

#154 CLS対策初級編

WEB制作

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

公開日:
最終更新日:

サイトマップサイトマップ

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のスコアへの影響は今のところ(2021年5月現在)はありませんので、SEO対策という点ではあまり意味はありません。

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

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

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対策はできたと思っていたのですが、目視で確認できるレベルでズレが生じていました。

WEBの表示速度改善にはこちらの書籍がオススメ

コアウェブバイタルの改善の第一歩は表示速度の改善になりますが、表示速度を改善するための本ってあんまりないんですよね。
そんな中、私が参考にした書籍がこちらです。

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円 (税込)(Amazon参考価格)

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

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

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

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

▼続きはコチラです

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728円(税込)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,508円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

3,800円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

CLS対策初級編の関連ページ

ブログ デイリーアクセスランキング

カー用品
1位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

AM-AX1800HP
3位

AM-AX1800HP

Wifi6は今後スタンダードになるので先行投資で導入しましたが、速度改善の効果が皆無でちょっとしょんぼりです。

CLS対策初級編
4位

CLS対策初級編

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

CSSで作る横スライド
5位

CSSで作る横スライド

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

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

ロリポップサーバーの安定感
7位

ロリポップサーバーの安定感

ロリポップハイスピードプランは価格も安く、表示速度も速い。 しかもアクセス耐性も高いとなるとほんと選んでよかったと思います

MX MASTER3
8位

MX MASTER3

ロジクールのマウスは文句なしの出来栄えなんですよ。 だから高くても私は買いますよ。これ以外使う気ないですからね。

カレンダー
9位

カレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

魔法少女まどか☆マギカ
10位

魔法少女まどか☆マギカ

魔法少女まどか☆マギカという名前が誤解を生みそうな素晴らしい作品があります。魔法少女という強烈なメタファーのせいで誤解をしていました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなどを書いていきます。

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838
(税込)