[WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – [2020/12/23]

はじめに

当サイトを立ち上げた頃には、もっぱらpluginの追加をすることで、サイトの機能向上に重きを置いたサイト構築を進めていました。ところが、いつもお世話になっている「ホームネットワーク研究所」のプロガーである観音寺さんから、当サイトの読み込み速度が低いことのご指摘を頂きました。それまでノーマークでした。

その後、サイト速度を測定するツールやWebサイトを調べて、測定したところ(PageSpeed Insights by Google)、MobileとPCでそれぞれ、一桁と20~30 (%表示される)でした。自分以外のサイトも指定できるので、比較として測定してみると、レンタル・サーバーでは当然ですが、100%近い値を見ることができました。この結果と受けた衝撃から、当サイトにおけるレスポンス改善活動が始まっています。この話題は、他の記事をご覧ください。

Cumulative Layout Shift

CLSは、遅延表示などで、表示されているところに後から別のエレメント(element)が挿入されたりすることで、最初にあったelementがシフト(shift)する現象を表しています。この現象が多いページは、ユーザーエクスペリエンスが不良とされます。Gooleは、検索スコアとして、2021/03以降から追加すると発表しています。すでに、PageSpeed Insightの測定結果には、「CLS」という項目の測定値を見ることができます。

確かに、一度表示された画面が、次の瞬間からめくりめくようにして、あるelementが挿入されて既存elementが邪魔にされるように、下く繰り下げられる様子は、閲覧者としては、気持ちの良いものではありません。

当サイトでは、WordPressの広告プラグインとして、「Advanced Ads Pro」をインストールしています。このプラグイン・サイトに英語ですが、CLSに関して解説があります。

CLSに関する情報

1)

Cumulative Layout Shift (CLS) and Ads – Advanced Ads プラグイン –

https://wpadvancedads.us10.list-manage.com/track/click?u=d761f7e9c05eb20567b500ddb&id=558703c702&e=615e72e98f

2)

Cumulative Layout Shift (CLS) – web dev –

https://web.dev/cls/

ページのレスポンスを測定するツールサイト

解説には、Googleの「PageSpeed Insights」や「Google Search Console」、Chromeブラウザのプラグインである、「Lighthouse」の紹介があります。当サイトでは、blogメンテ用の端末としてiPadを使用しているため、フル機能のChromeを使用できないので、iPadからWeb siteの「PageSpeed Insights」を多用しています。その他、当サイトで評価したことのある測定サイトも含め以下にまとめました。

• PageSpeed Insights
• Google Search Console
• Lighthouse
• GTmetrix.com
• EZOIC

以下には、その他、ページ・レスポンスを計測できるサイトを紹介している記事ですが、そちらもご参考にしてください。

編集履歴

2020/12/23 Mr.HARIKIRI
2021/03/13 追記(CLSについての情報)

関連記事

[WO] Google PageSpeed Insights以外のPage測定 – WEB PAGE TEST、更なる速度改善サービス:criticalcss ID8245

[WordPress] ブログサイトのスピード測定 – GTmetrix.com [2020/07/24] ID9721

[WordPress] サイトのスピードを測る – EZOIC ID11531