見出し画像

CLS発生源を確認する方法　Chrome開発者ツール（デベロッパーツール）のRenderingツールを用いて

kyok01

こんにちは、横井Kです。2021年以降からGoogleの検索アルゴリズムに用いられる指標に組み入れられるといわれるWeb Vitals。その中でも、Cumulative Layout Shift（CLS）（※1）の発生源をChome開発者ツール（デベロッパーツール）で確認する方法をお伝えします。

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

Chrome開発者ツールのRenderingを用いてCLS発生源を特定する方法

以下のようにChromeの開発者ツール（デベロッパーツール）のPerformanceタブを用います。

CMD+Shift+N (Incognito) > CMD+Shift+C (Inspect) > Performance > Rendering > Layout Shift Regions > CMD+Shift+E (record) > Event Log > Filter by 'shift'

個人的にFate Grand Orderというスマホゲームが好きなので、その攻略サイトで方法を試してみます。

CMD＋Shift＋Cでまず、開発者ツールを起動します。

コメント 2020-09-06 113842

Performanceタブに移動し、RenderingツールのLayout Shift Regionsにチェックを入れます。Renderingツールのタブが表示されない場合はConsoleの隣の縦に点が3つ並んだところを押して表示してください。

コメント 2020-09-06 113950

CMD+Shift+Eもしくは開発者ツール左上recordボタンを押してWebページのパフォーマンスを記録します。記録し終わった結果が下の画面。

画像3

Event Logタブで「shift」でソートをかけます。

コメント 2020-09-06 114518

オレンジ色の四角と「Layout Shift」と書かれた個所を選択し、「Move from」と「Move to」にカーソルを合わせると、どう動いたのかがわかります。（青色にハイライトされるはずが、薄い赤でハイライトされる点が個人的には気になります。詳しい方、理由教えてほしいです）

画像5

このCLSが発生したのはスマホ画面上部の「アプリで開く」が現れたことが要因だとわかりますね。

Before

コメント 2020-09-06 115221

After

コメント 2020-09-06 115402


このCLS発生源特定方法を知った元ネタはこちら

この方法を知ったのは、Brodieさんという海外のSEOマーケターの方のツイートを見たことがきっかけです。

Brodieさんが動画も載せているので、わたくしの画像での説明がわかりづらかった方は参考にしていただけますと。

CLSはSEO関係なく対処しよう

2021年以降にSEO評価基準に組み込まれるといわれるCLSですが、SEO関係なくUXに関する定量的な指標として改善には取り組みたいところです。CLSが起きると、ユーザーが何かしらをクリックしようと思ったらレイアウトがずれて、押せなくなったり、はたまた意図しないボタンをクリックしたりという事態が想定されます。

今回お伝えした方法がUX改善の一助になれば幸いです。

この記事が気に入ったらサポートをしてみませんか？