レイアウトシフト(Cumulative Layout Shift)とは？対策・改善方法も紹介！

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

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

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

この記事の目次

CLS(Cumulative Layout Shift)とは

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

Googleが定めた、優れたユーザー体験を提供するための重要な指標をWeb Vitalsと呼びます。その中でコアなものが、Core 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つということです。

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

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

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

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

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

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

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

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』にチェック
リロード

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

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

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

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

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については、下記の記事で紹介しています。

縦横比(アスペクト比)を固定できるaspect-ratioについて具体例を交えて解説！

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

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