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

弊社で作った教材がセール中！

udemy セール中

※ 上記リンクからご購入いただければ、割引価格(1,500円)で購入できます。

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス『Hello Mentor』を運営しています。

基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！

基礎学習後にやるべきことがわからない...
スクール卒だけど実力不足だと感じている...
自分のコードが正しい書き方かわからない...
未経験から1人で転職できる気がしない...
独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

この記事の目次

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つということです。

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

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

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

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

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

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

基礎学習後にやるべきことがわからない...
スクール卒だけど実力不足だと感じている...
自分のコードが正しい書き方かわからない...
未経験から1人で転職できる気がしない...
独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス『Hello Mentor』を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

👆 無料でプレゼント 👆

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

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

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タグを使ったレスポンシブイメージを解説