解決してみた!!CLS(Cumulative Layout Shift)と累積レイアウト変更

サーチコンソール

「CLS(Cumulative Layout Shift)?累積レイアウト変更?って、なに!?解決方法を、教えてください!」って疑問を、解消していきます。

サーチコンソールの「ウェブに関する主な指標」として、CLS(Cumulative Layout Shift)・累積レイアウト変更という言葉を目にするようになりましたね。

もしかすると、サーチコンソールに不良の URL として赤く表示されて、焦っているかもしれませんね。ご安心ください。2020年6月9日時点では、2021年以降にランキングに関係してくるため、焦った気持ちで改善にとりくむ必要はありません。

サウンドオルビス
サウンドオルビス
心おだやかに、いきましょう〜!
この記事でわかること
  • CLS(Cumulative Layout Shift)・累積レイアウト変更の解決方法は?
  • CLS(Cumulative Layout Shift)・累積レイアウト変更ってなに?
  • CLS(Cumulative Layout Shift)・累積レイアウト変更を、詳しく計測する方法ってないの?
  • ...など。

新しく登場した CLS(Cumulative Layout Shift)・累積レイアウト変更の項目も、中身がわかってしまえば難しくなさそうですよ。

この記事では、実際に私が使っている WordPress 環境で、CLS(Cumulative Layout Shift)・累積レイアウト変更の数値を、小さくすることに成功したので情報をシェアさせていただきます。

というわけで今回は、CLS(Cumulative Layout Shift)と累積レイアウト変更の解決方法について、できるだけわかりやすく解決方法をまとめてみました。

CLS(Cumulative Layout Shift)と・累積レイアウト変更の解決方法

解決の画像

CLS(Cumulative Layout Shift)と・累積レイアウト変更の解決方法をまとめていきます。

私のブログでは、トップページや記事ページで、CLS(Cumulative Layout Shift)の値が、「0.1」を超えていました。

サーチコンソールでも、エラーとして次のような文言が表示されていたんですよ↓

  • CLS に関する問題: 0.1 超(モバイル):改善が必要
  • CLS に関する問題: 0.25 超(パソコン):不良

モバイルでも、PC でもユーザーにとって予見できないレイアウトの崩れがあるようです。

しかし...パッと自分のサイトを閲覧したかぎりは、ページのデザイン崩れを感じませんでした。何が問題なんだろう?と、いろいろ試した結果...モバイル・PC 共に CLS スコア「0.1」を切ることができるようになりました。

何を試したのか?抱えていたブログのデザイン的な問題を含めて、説明していきますね。ちなみに、わたしの WordPress の環境は、こんな感じです↓

わたしの WordPress 環境
  • TCD テーマ「Bloom」
  • WordPress 5.4 以降〜
サウンドオルビス
サウンドオルビス
それでは、いってみよ〜!

トップページロゴ画像サイズの CLS 問題の解決方法

トップページロゴ画像サイズの CLS 問題
  • 【問題点】ブログトップのロゴ画像
  • 【原因】画像の img タグ内に「width」「height」の指定がなかった
  • 【解決方法】CSS で画像に「width」「height」を指定した

ひとつめは、トップページロゴ画像サイズの CLS 問題の解決方法です。

わたしがつかっているテーマでは、ブログタイトルをロゴ画像で表示できるんです。その画像を Chrome の検証ツールでチェックすると、img タグのなかに「width」「height」の指定がありませんでした。

<h1 class="l-header__logo--pc">
<a href="https://soundorbis.com/">
<img src="画像URL" alt="サウンドテック・ラボ">
</a>

「width="340"」「height="54"」のように、この img タグ内に直接テーマを編集してもいいのですが...この記事を参考にしてくださる方は、きっとテーマを編集するのもこわいですよね?そこで、簡単な解決方法をみつけてみました。

.l-header__logo--pc img {
    width: 340px;
    height: 54px;
}

こんな感じで、img のクラス名を指定して、CSS を書いてしまえば OK だったんですよ。WordPress ダッシュボードの外観 -追加CSS に、書き込んでしまえば OK です。

自分でコードをかいて追加したわけではないので、まさかテーマ側の指定がないことが、CLS(Cumulative Layout Shift)のスコアを下げていたとは...ページを読み込んでも、とくにほかの要素を邪魔している感じはなかったんですけどね。

Web Vitals topimg after
画像:Chrome 拡張機能「Web Vitals」の操作画面より

この解決方法を試したことで、赤く「0.1」と表示されていたスコアが「0.09」まで下がりました。ギリギリなので、ほかにも問題点がありそうですね。探っていきましょう。

フッターロゴ画像サイズの CLS 問題の解決方法

フッターロゴ画像サイズの CLS 問題
  • 【問題点】フッターのロゴ画像
  • 【原因】画像の img タグ内に「width」「height」の指定がなかった
  • 【解決方法】CSS で画像に「width」「height」を指定した

ふたつめは、フッターのロゴ画像サイズの CLS 問題の解決方法です。

これも、すでにトップページのロゴ画像を修正した時と同じですね。 img タグ内に「width」「height」がないことが、問題でした。

img タグに「width」「height」を指定してあげると、読み込みのときに空白をあけてもらえるらしいんですね。

これがないと、テキストが突然モーセの十戒のごとく、テキストが分断されてCLS(Cumulative Layout Shift)のスコアがわるくなるので、お気をつけください!

解決方法は、おなじです。テーマに直接編集をくわえても OK ですが、さくっと CSS に書き込んでおきましょう。

<div class="p-siteinfo__image p-siteinfo__logo">
<a href="https://soundorbis.com/about/">
<img alt="サイト情報" src="画像URL">
</a>
</div>

今回のフッター画像の問題のコードは、こんな感じでした。これも、クラス名をみつけたら、CSS に以下のコードを書き込んで解決です。

.p-footer-widget-area .p-siteinfo__logo img {
    width: 340px;
    height: 54px;
}

あとから CSS で「width」「height」の指定をするだけで解決できるのは、すごく気持ちが楽になりますよね。目に見えないところで、「カコ」って動いている場合でも、しっかり CLS(Cumulative Layout Shift) が計測されていますので、細心の注意を払っていかないといけません。

この解決方法を試したことで、赤く「0.9」と表示されていたスコアが「0.08」ぐらいまでさがった感じでした。この段階で、モバイルの CLS(Cumulative Layout Shift) はほぼ「0」になっていました。

あとは、PC サイトのトップページを対応するだけです。さてさて、のこりもがんばるぞ!

トップページのカルーセルスライダーの CLS 問題の解決方法

トップページのカルーセル記事一覧の CLS 問題
  • 【問題点】トップページのカルーセル記事一覧
  • 【原因】不明
  • 【解決方法】カルーセルの記事一覧を、非表示にした

みっつめは、トップページのカルーセルスライダーの CLS 問題の解決方法です。

WordPress のテーマによっては、デザイン性を高めてくれるカルーセルで記事一覧を出してくれる機能があります。これのことですね↓

Tcdbloom carousel

今回の場合も、トップページをよみこんでも見た目には変化がありませんでした。しかし、数値や検証ツールでは、「ここが問題箇所です!!」ってでてくるんですよね。

ちょっと、原因をつきとめきれませんでした。DIV の高さと横の要素なのか、中の画像にモダンがあるのか?う〜む。またカルーセル表示の記事一覧について、ユーザー体験的に効果があるのか検証するために...

カルーセル表示を、非表示にさせていただきました汗。解決方法は、CSS に下記のコードを書き込んで非表示にしてみました↓

#js-index-slider {display: none;}

TCD のテーマでは、このカルーセルを削除する機能が、標準ではついていないんですよね。さらに、「display: none;」だと SEO 的にも、読み込み的にも良くないので...思い切ってテーマから直接カルーセルを削除することにしてみました。

WordPress ダッシュボードの外観 - テーマエディター - fornt-page.php の順にクリックしていきます。

TCD テンプレート「Bloom」の場合は、8行目の下記のコードを削除してみました↓

get_template_part( 'template-parts/index-slider' );

悩んでいたところ、神崎雄介さんに Twitter でたすけていただきました汗。アドバイスいただき、ありがとうございます!PHP の基本的なところだったので、わたしの勉強不足でしたorz

これで、CSS の見た目だけじゃなくて HTML のコード的にもスライダーを削除することができましたよ。

Cls 0 pc
画像:Chrome および、拡張機能「Web Vitals」の操作画面より
Cls 0 mobile
画像:Chrome および、拡張機能「Web Vitals」の操作画面より

はい!ここまでで、モバイル・PC サイトともに CLS(Cumulative Layout Shift) の値を、ほぼ「0」にすることに成功しました。

さらに、DIV ボックスを挿入するときに、なにか参考になればと思い...つぎの見出しでは、トップページに新着情報をリストでのせるDIV ボックスの導入にチャレンジしてみました。

トップページ DIV ボックスの CLS 問題の解決方法

トップページのカルーセル記事一覧の CLS 問題
  • 【問題点】トップページのに挿入した DIV ボックス
  • 【原因】高さ・幅の指定関係
  • 【解決方法】DIV ボックスの「width」「height」を指定する

トップページ DIV ボックスの CLS 問題の解決方法です。

画像の img タグには、「hight」「width」をいれないといけないけれど...DIV ボックスは?ってことで、実際に DIV ボックスの場合はどうなるのか?試してみました。

トップページに、こんな感じで新着情報を表示する DIV ボックスを導入してみました↓

Cls divbox set01

HTML
<div class="top-box">
<div class="main-cencept">
<span class="concept">「音楽×テクノロジー」の情報発信メディア<br>ちょっとだけ、未来の話</span>
</div>

<div class="new-title">新着情報</div>

<div class="news-box">

<div class="text_pc">
<div class="news">2020/05/29:ブログデザイン修正中</div>
<div class="news">2020/05/29:ブログデザイン修正中</div>
<div class="news">2020/05/29:ブログデザイン修正中</div>
</div>

</div>
</div>
CSS
<style>
.news-box {width: 100%; height: 320px; overflow-y:scroll;}
.new-title {font-size: 22px; font-weight: 700; line-height: 1.8;}
.concept {position: relative; z-index: 2; display: inline-block; padding: 0 9px; background: #fff;}
.main-cencept {position: relative; text-align: center; margin: 0; font-size: 13px;}
.main-cencept::before {position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 98%; border: 1px solid #666;}
.news {font-size: 13px; margin: .8em 0; border-left: 1px solid #333; line-height: 1.6; padding-left: 5px;}
</style>

トップページに、これらのコードを挿入してみました。CLS の最適化のページでは、DIV ボックスが確保されていないとダメっぽかったのですが,,,検証している間、DIV に高さや幅を儲けなくても、点数に変化がなかったんですよね。

とりえあえず、紹介したコードで DIV ボックスをいれると CLS(Cumulative Layout Shift) のスコアが、あまり変化しませんでした!という報告までに、シェアさせていただきました。

CLS(Cumulative Layout Shift)・累積レイアウト変更とは?

CLS(Cumulative Layout Shift)・累積レイアウト変更とは、グーグルが発表したウェブページ UX の重要指標「コアウェブバイタル」という、ユーザーエクスペリエンスに関する大切な指標のひとつです。2020 年 6 月にサーチコンソールで正式に指標として登場しました。

サーチコンソールおよび Pagespeed Insight のフィールドデータでは、Cumulative Layout Shift(CLS)となっていますね。Pagespeed Insight のラボデータでは、累積レイアウト変更となっていますね。

CLS(Cumulative Layout Shift)・累積レイアウト変更の違いは、英語表記なのか、日本語表記なのかってところです。両方とも同じ意味みたいですが...よくわからない方にとっては、二つ単語がでてきてビックリしましたよね汗。わたしも、混同しちゃってわからなくなってました。

もっと詳しいことは、デベロッパーの情報サイトを確認しておきましょう!

【参考】Cumulative Layout Shift (CLS)

CLS(Cumulative Layout Shift)は、検証ツールで計測しよう!

CLS(Cumulative Layout Shift)は、ブラウザ「Chrome」の検証ツールで、計測することができます。

CLS(Cumulative Layout Shift)の計測手順
  1. Chrome で、記事上を右クリックして[検証]をクリック
  2. [Performance]タブで、レコーディングボタンを押す
  3. 記事を閲覧する。[STOP]をクリック
  4. [Experience]の項目で CLS がわかる
  5. どの瞬間・場所で CLS が発生したか、スクショでチェック

Twitter で動画を掲載しておきましたので、参考にしてみてください。やっぱり、Chrome の検証ツールは便利ですね。使い方をおぼえたら、これほど強い見方はいませんよ。

問題のある CLS(Cumulative Layout Shift) の箇所を、タイムラインとスクリーンショットで確認できるので、初心者でもどこが問題なのかひとめでわかりますからね。

サーチコンソールの「ウェブに関する主な指標」の解決方法を探る

User ex search thum

サーチコンソールの「ウェブに関する主な指標」の解決方法を、探ってみました。

本格的に導入された健全なユーザー体験のための指標「コアウェブバイタル」ですが...CLS(Cumulative Layout Shift)以外にもあと2つの重要なものがあります。

あたらしい指標の解決策は、もうバッチリでしょうか?まだまだ情報が少ないので、情報を共有できるように記事におとしこんでみました。「LCP」「FID」について、もっと知りたい方は、こちらからどうぞ↓

【関連】サーチコンソールの「ウェブに関する主な指標」の解決方法を探る

追記:CLS に関する問題: 0.25 超(パソコン)が解決できた!!

サーチコンソールを確認したら、「CLS に関する問題: 0.25 超(パソコン):不良」の件数が「0」になりました!!

2020年7月3日に、追記です。2020年6月10日に CLS 問題に対処したので、やっぱり実際に解消される表示がでるまで 1ヶ月必要だったみたいですね。

現時点での表示はこんな感じになりました↓

2020/07/03時点でのCLS に関する問題
  • CLS に関する問題: 0.1 超(パソコン):630
  • 良好 URL:148

改善が必要な URL が減少するのか、維持されるのか、もうすこし様子をみていきたいと思います。不要 URL がなくなっただけで、すごく安心しますね。

わたしが試した解決方法が、記事の上部に掲載してあります。CLS の問題が解決できずに悩んでいる人は、実際に成果のでた方法を試してみてください!!

【解決方法をみる】CLS(Cumulative Layout Shift)と・累積レイアウト変更の解決方法

CLS(Cumulative Layout Shift)と累積レイアウト変更の解決方法まとめ

CLS(Cumulative Layout Shift)・累積レイアウト変更について、実際に検証してみた結果をもとに、解決してみたというお話でした。

「CLS に関する問題: 0.1 超(モバイル):改善が必要」「CLS に関する問題: 0.25 超(パソコン):不良」となっていましたが...今回の改善で、サーチコンソールのエラーがはずれることを、待ち焦がれているところです。

サーチコンソールの診断は、どうやら 30 日間の分析の結果のようですので、気長に待つ姿勢が試されております笑。今後も、Chrome の拡張機能「Web Vitals」を使いながら、常に CLS(Cumulative Layout Shift) のスコアに注視していきたいと思いあmす。

いずれにせよ、CLS(Cumulative Layout Shift) は、基本的にデザインやブログの見た目、操作をするユーザーが違和感をおぼえるところを修正すれば、OK なポイントです。

今回の検証結果を参考にしていただきながら、公式の累積レイアウトシフトの最適化についても、じっくり目をとおしてみてください↓

【関連】Optimize Cumulative Layout Shift

ということで、今回のCLS(Cumulative Layout Shift)と累積レイアウト変更について、わたしなりの解決方法が、あなたのブログ運営のおやくにたてていたらうれしいです!

自分が試したことを忘備録的にまとめてしまったので、今後よりわかりやすく文章など修正していきます。あくまでも、参考程度にごらんいただけましたら幸いです。

サウンドオルビス
サウンドオルビス
そんじゃあ、今回はこの辺で!?

そのほか、WordPress やブログに関する悩みや便利な使い方をまとめた記事がありますので、あわせてこちらもどうぞ!

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

3,316,758 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事