Core Web Vitals の CLS(Cumulative Layout Shift) について

morita

こんにちは、森田です。
前回 サイトの重要指標 Core Web Vitals について という記事を書いたのですが、今回はその中でも CLS という指標について掘り下げていきます。
Core Web Vitals の中でも CLS は HTML/CSS マークアップで一番考える必要があると個人的に感じています。

まずは、前回の記事でも紹介しましたが、あらためて CLS とはなにか?を解説いたします。

CLS (Cumulative Layout Shift) とは

ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

直訳すると「累積レイアウトシフト」という意味になります。
そもそもレイアウトシフトとはどう言う意味でしょうか?

レイアウトシフト


「レイアウトシフト」とはページ読み込み時などでレイアウトがシフトする(ズレる)ことを指します(そのまんまですね)

web.dev の Cumulative Layout Shift (CLS) の記事のサンプル動画がとても分かりやすかったので引用して紹介させてもらいます。

A screencast illustrating how layout instability can negatively affect users.

このようなことは誰でも一度は体験したことがあると思います。

レイアウトシフトスコア

CLSを評価する数値がレイアウトシフトスコアがあります。
レイアウトシフトをページ全体で累積して数値化したものがレイアウトシフトスコアです。

レイアウトシフトスコア = 影響のあるビューポートの割合 * シフトする距離の割合

この数値は、影響のある割合 * 距離の割合 で算出され、0.1未満が望ましいとされます。

レイアウトシフトの主な要因

レイアウトシフトの主な要因として以下が考えられます。

  • サイズのない画像( img要素)
  • サイズのない広告や埋め込み、iframe要素
  • FOIT / FOUT を引き起こす Web フォント
  • 動的なコンテンツ

要因を見てみるとたしかに読み込まれるまでサイズを設定していない(できない)ことが多い要素が挙げられていますね。

このような要素が読み込まれるたびにレイアウトシフトが起こるのも納得です。

この中でも特に起こりやすいのが「サイズのない画像」だと考えます。
なので今回は「サイズのない画像」についてさらに掘り下げます。

サイズのない画像のレイアウトシフト

サイズのない画像のレイアウトシフトについては Google Chrome のエンジニアリングマネージャー Addy Osmani さんのツイート動画が分かりやすいです。

今まで特にレスポンシブデザインのサイトを作っている場合など img要素に width属性 と height属性を入れないことが多かったです。
が、これがレイアウトシフトの主な要因となっているみたいです。これからはちゃんとサイズを入れる事にしましょう。

レイアウトシフトを解消する

PageSpeed Insights
blog.gaji.jp の PageSpeed Insights

このブログのトップページを PageSpeed Insights で測定したところ CLS は 0.02となっており合格の値なのですが、詳細の診断を見ると…

PageSpeed Insights「レイアウトが大きく変わらないようにする 」の結果

「レイアウトが大きく変わらないようにする」というCLSの項目で1点指摘を受けていました。

Gaji-Labo Blog
<img class="l-header__logo" src="https://blog.gaji.jp/wp-content/themes/gaji2020/assets/img/logo.svg" alt="Gaji-Labo Blog">

ソースを見るところヘッダーロゴ画像にサイズが入っていないようです。
こちらの要素に width属性 と height属性を入れてレイアウトシフトを解消しましょう。

Gaji-Labo Blog
<img class="l-header__logo" src="https://blog.gaji.jp/wp-content/themes/gaji2020/assets/img/logo.svg" alt="Gaji-Labo Blog"  width="350" height="68">

今回はPCの画像サイズを指定しました。
PageSpeed Insights でも「レイアウトが大きく変わらないようにする」という項目の指摘が無くなりました。CLSスコアは元から0.02と僅かな数値だったので変わらずでした。

レスポンシブの場合PC/SPどちらの画像を入れるのか悩むと思いますが基本的には画像オリジナルのサイズを入れればいいのではと考えます。

最新のブラウザはimg要素に幅と高さを設定すると、画像をダウンロードする前に固有のサイズやアスペクト比を推測できるようになり、レイアウトのズレが減少します。

とにかくダメなのは「サイズがない」ということです。

まとめ

今後は、フロントエンドやデザインでも設計の段階から CLS および Core Web Vitals を意識して作る必要がありそうですね。

今回は1点の画像サイズを入れただけですが、HTMLマークアップの時は全ての画像にサイズを入れる必要があり、だいぶ手間が増えそうです。

しかし、Core Web Vitals の改善は UX の改善と直結すると思うので、やって損はない施策だと考えます。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

関連リンク


morita

投稿者 Morita Sou

フロントエンドグループ内チームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。