模写修行メディア

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

CLS(Cumulative Layout Shift)とは

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

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

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

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

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

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

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

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

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

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

【初学者・中級者の方】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターは全員現役エンジニア 👆

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

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

PageSpeed Insights

PageSpeed Insightsの画面スクショ

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

拡張機能

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

Lighthouse

Lighthouseの画面スクショ

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

Web Vitals

Web Vitalsの画面スクショ

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

Google Search Console

Google Search Consoleの画面スクショ

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

デベロッパーツール

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

  1. Mac:Command + Shift + P / Windows:Ctrl + Shift + P
  2. 『render』と入力
  3. 『Show Rendering』を選択
  4. 『Layout Shift Regions』にチェック
  5. リロード

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

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

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

  • 画像
  • webフォント
  • 広告
  • 動的なコンテンツ
Point
後から表示される可能性がある箇所の領域を予め確保しておくことで、レイアウトシフトは防げます。ただし、それが不可能な場合もあります。

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

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

webフォントのレイアウトシフト改善方法

webフォントは容量が大きく、読み込まれて表示されるまでに時間がかかります。

表示されるまで、デバイスフォントを表示するので、webフォントの反映後にレイアウトシフトが発生します。完全に防ぐことは難しいです。なるべく影響を少なくするには、読み込みの最適化が必要です。

  • 各webフォントサービスの配信方法
  • サブセット化
  • ダイナミックサブセット化
  • preload
  • font-display
  • ハック的なやり方

これらを知ると、読み込みを最適化できることもあります。

広告のレイアウトシフト改善方法

Google AdSenseなど、スクリプトを読み込んで、サイト内に広告を表示する場合、レイアウトシフトが発生します。

広告のサイズがわかっている場合は、予めその領域を CSS で作っておくことで回避できます。

また、広告に限りませんが、レイアウトシフトの原因となるコンテンツの下に他のコンテンツを置かなければ、そもそもレイアウトシフトは発生しません。

ただでさえ、ユーザーのストレスになるレイアウトシフトが広告のせいで発生すると、さらにストレスになる可能性があるので、気をつけたい所です。

動的なコンテンツのレイアウトシフト改善方法

ユーザの操作と関係なく、動的なコンテンツがページ内に挿入されると、レイアウトシフトが発生します。

ログインしてるかどうかを判定して、コンテンツを表示する際など、状況によってはやむを得ない場合もあります。

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材