CLS(Cumulative Layout Shift)とは？対策・改善方法も紹介！

サイトを開いた際に、画像や広告などが遅れて読み込まれ、レイアウトがズレたり変わったりした経験はありませんか？

この現象をレイアウトシフトと呼びます。

この記事では、どれくらいレイアウトシフトしたかを定量化したCLS(Cumulative Layout Shift)の概要と、その対策・改善方法を紹介します。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

実務のレベル感を知りたい
プロの制作フローを学びたい
基礎学習中、もしくは終えたばかり
CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

この記事の目次

CLS(Cumulative Layout Shift)とは

CLS(Cumulative Layout Shift)を知るために、まずはCore Web Vitals(コアウェブバイタル)について簡単に紹介します。

Googleが定めた、優れたユーザー体験を提供するための重要な指標をWeb Vitalsと呼びます。その中でコアなものが、Core Web Vitalsになります。

LCP(Largest Contentful Paint)
FID(First Input Delay)
CLS(Cumulative Layout Shift)

Core Web Vitalsには上の3つがあります。この3つの中の1つが、今回の記事で紹介する、CLS(Cumulative Layout Shift)です。

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

Google Developersの記事を引用したものです。

Core Web Vitalsは、SEOのランキング要因でもある、重要な指標です。ただし、Core Web Vitalsの指標をクリアしていれば上位表示されるわけではありません。あくまで、ランキング要因の1つということです。

参考記事

より快適なウェブの実現に向けたページエクスペリエンスの評価

レイアウトシフト(Layout Shift)が起こることどうなる？

上の動画はレイアウトシフト対策をしていないページで、キャッシュを消してリロードした時の挙動です。

画像が表示されるまで、テキストは画像が入るスペースを埋めてしまっているので、画像表示後にレイアウトがズレます。

急にレイアウトがずれて、読んでいた箇所を見失った
レイアウトがずれたせいで誤ったボタンをクリックしてしまった

例えば、上のような現象は明らかに優れたユーザー体験とは言えず、ユーザーにストレスを与えます。

レイアウトシフトの計測方法

レイアウトシフトを計測する方法をいくつか紹介します。

PageSpeed Insights

PageSpeed Insightsにアクセスをして、計測したいサイトのURLを入力することで、分析結果を見ることができます。

拡張機能

Chromの拡張機能を入れると、より簡単に計測できます。

拡張機能

Lighthouse

上の画像のGenerate reportをクリックすると、PageSpeed Insightsで出るような詳細なレポートを出してくれます。

Web Vitals

Web Vitalsは上の画像のように、数値だけを出してくれます。結果が出るまでに時間がかからないので、数値だけサクッと確認したい時はWeb Vitalsを使うと良いです。

Google Search Console

自分が管理しているサイトで、Google Search Consoleを導入していれば、エクスペリエンスのウェブに関する主な指標からチェックすこともできます。

デベロッパーツール

デベロッパーツールで確認することもできます。

Mac：Command + Shift + P / Windows：Ctrl + Shift + P
『render』と入力
『Show Rendering』を選択
『Layout Shift Regions』にチェック
リロード

手順はこの通りです。リロードすると、レイアウトシフトが起こっている箇所に一時的に色がつきます。

CLS(Cumulative Layout Shift)の対策・改善方法

画像
webフォント
広告
動的なコンテンツ

上の4つはレイアウトシフトの原因となりやすい項目です。

Point

後から表示される可能性がある箇所の領域を予め確保しておくことで、レイアウトシフトは防げます。ただし、それが不可能な場合もあります。

画像のレイアウトシフト対策・改善方法

対策・改善方法

imgタグにwidthとheightを設定する

<img width="1000" height="500" src="img/hoge.jpg" alt="" class="hoge-img"/>

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.hoge-img{
    width: 80%;
    max-width: 500px;
}

画像は、imgタグにwidthとheightを設定することで、予めその領域を確保してくれるので、レイアウトシフトが起こりません。

widthとheightの値は画像の実際の横と縦のサイズを指定すれば良いです。比率が重要なので、上のコードでは、width="2"とheight="1"にしても問題ありません。実際に表示したいサイズは、CSSで設定します。

ただし、アートディレクションする際には注意が必要です。

<div class="art-direction">
    <picture>
        <source media="(max-width: 599px)" srcset="img/sp.png" />
        <source media="(max-width: 699px)" srcset="img/tb.png" />
        <img width="1600" height="800" src="img/pc.png" alt="" />
    </picture>
</div>

縦横比が異なる画像を出し分ける場合は、CSSで領域を確保する必要があります。

.art-direction {
    aspect-ratio: 800 / 800;
}

@media screen and (min-width: 500px) {
    .art-direction {
        aspect-ratio: 1200 / 800;
    }
}

@media screen and (min-width: 700px) {
    .art-direction {
        aspect-ratio: 1600 / 800;
    }
}

aspect-ratioについては、下記の記事で紹介しています。

CSSで縦横比(アスペクト比)を固定できるaspect-ratioについて！具体的な使い道も紹介！

アートディレクションに関しては、下記の記事後半で紹介しています。

HTMLのsrcset属性やpictureタグを使ったレスポンシブイメージを解説