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

2020.11.9

実践と知見

こんにちは、森田です。
前回サイトの重要指標 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 さんのツイート動画が分かりやすいです。

Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR
— Addy Osmani (@addyosmani) June 27, 2020

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

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

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

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

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

Gaji-Labo Blog
<img class="l-header__logo" src="https://wp.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://wp.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 は SSR / SSG / SPA 開発実績があります

SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。「フロントエンドの人手が足りず信頼できるエンジニアを探している」「フロントエンド構築をどうしたらいいか分からない」「手を付けてみたけどいまいち上手くいかない」などのお困りごとがあればまずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのフルリモート開発とチーム参加にも対応しています。

フロントエンドの相談をする！