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

2022年6月追記 現在はネイティブのLazyLoadを使っています

執筆当時はまだまだ、loading="lazy" に未対応のブラウザが多かったので、JavaScriptで対応していましたが、現在は<img loading="lazy">が主流です。

私も今はこちらに修正しました!

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

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

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

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

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,300円(税込)

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デザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

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

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

1,958円(税込)

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

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

1,848円(税込)

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

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

ロリポッププラン比較

ロリポップのプランの選び方を各プランと比較して解説

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

WEB表示速度高速化

WEBページ表示速度改善のためにやった7つ以上の施策

WEB表示速度は速いほうがページの離脱防止やユーザーの満足度向上につながるというわけで、大きいことから小さいことまでやりました

CLS対策上級編

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

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

CSSで作る横スライド

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

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

marginとpadding

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

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

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

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

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

tableデザイン

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

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

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

SNSでこの記事をシェアできます

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

PHPで作るカレンダー
1位

PHPで作るカレンダー

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

ノートPCスタンド
2位

ノートPCスタンド

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

α7Ⅲで夜景
3位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

jquery-match-height.js
4位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

自転車に取り付けるドリンクホルダー
5位

自転車に取り付けるドリンクホルダー

自転車でコンビニのホットコーヒーをこぼさずに持ち帰るためにドリンクホルダーを購入したので、写真を交えてレビューします!

MusicBeeのレイアウト変更方法
6位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

α7Ⅲ 夜桜撮影
7位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

SEL50F18F
8位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
9位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

bookblock
10位

bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

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

2,838
(税込)