カテゴリー
adsense plugin WordPress

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

[WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – [2020/12/23]
スポンサーリンク
by Google Ads ID24747

ID26235

スポンサーリンク
by Google Ads ID8603

はじめに

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

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

スポンサーリンク
  • Synology DS517 by Amazon ID:22173
  • Synology DS920+ by Amazon ID:22172
  • オムロン BY50S用パック by Amazon ID:22171
  • オムロン BY50S by Amazon ID22170
  • Synology 高機能無線ルーター 800Mbps + 1,733Mbps(11a/b/g/n/ac対応) 高セキュリティ VPN Plus対応 RT2600ac by Amazon ID24327
  • エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタ ホワイト LD-GPA/WH5 by Amazon ID24327

Cumulative Layout Shift

スポンサーリンク
by Rakuten ID:15895

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

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

スポンサーリンク
by Google Ads ID19417

当サイトでは、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についての情報)

関連記事

スポンサーリンク
  • by Amazon ID19245
  • by Amaozn ID13196
スポンサーリンク
  • 【Amazon.co.jp 限定】HP USBメモリ 128GB USB 3.1 スライド式 金属製 HPFD796L-128 GJP by Amazon - ID 24751
  • 3Dプリンター ダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513
  • 3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|3F1AWXJP00F - XYZプリンティングジャパン by AMAZON ID21511
  • ABS使用可 造形サイズ175×175×175mm オープンフィラメント可 オートキャリブレーション機能付き レーザー刻印機能拡張可 金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
  • zedela 5-in-1 USB-Cハブ【3ポート5Gbps by Amazon - ID 24751
スポンサーリンク

用語の解説、関連タグ付き投稿の抽出

スポンサーリンク
by Google Ads ID24747

Update ID21920

BIOLOGICS, mRNA, vaccine
[Bio-Edu] mRNAワクチンの剤形 – LNP; Lipid Nano Particle – △[2021/12/05]

Post Views: 126 ID15607 目次1 はじめに2 参考文献よりLNPを解説3 LNPの組成4 LNPを作る装置5 編集履歴 はじめに mRNAワクチンの細胞内への伝達としてLNP技術が用いられます。Li […]

スポンサーリンク
by Google Ads ID19417
WordPress
[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16] ID24858

Post Views: 58 目次1 はじめに2 基本的な設定方法3 WordPress プラグイン別3.1 Content of Table Plus はじめに AMPプラグインをインストールしている場合、投稿/ページ […]

ITC, security
[サイバー攻撃] 最近のサイバー攻撃対策をCanonのESETソリューションの解説から理解する ID26175 [2020/12/20]

Post Views: 65 目次1 サイバー攻撃2 1. 基本的防御2.1 CanonのESETソリューション3 2. プラスアルファ防御3.1 ESETソリューション4 事後対策4.1 ESETソリューション5 予防 […]

更新された投稿の最新順

スポンサーリンク
  • by Amazon ID13339
  • by Amazon ID13211
スポンサーリンク

スポンサーリンク
by Google Ads ID24747

最新記事(WPプラグイン,ID:14818)

plugin, WordPress
[WP-Plugin] WP-Optimizeのキャッシュ機能はW3 Total Cacheに変更 ID19320 [2021/10/25]

Post Views: 11 ID19320 目次1 キャッシュ プラグイン2 再検討の理由3 編集履歴 キャッシュ プラグイン サイト読み込みの高速化にはキャッシュを使用することが1つの方法です。約1年前にW3 Tot […]

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているように見えても最終目的はブレないスタイルはある – ID30216 [2021/05/30]

Post Views: 54 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

スポンサーリンク
by Google Ads ID19417
plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 36 パンクズリスト パンクズリストは、サイトで移動した履歴です。表現形態は、フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法 […]

plugin, site setting, WordPress
Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 46 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、 […]

Page: 1 2 20
スポンサーリンク

スポンサーリンク
by Google Ads ID24747

最新記事(WordPress, ID:14681)

WordPress
[WordPress] ページスピード評価に使うPageSpeed Insightsの測定指標について – 少し解説

Post Views: 1 目次1 初めに2 測定すべき重要な指標3 編集履歴 初めに 2021/12/04サイトのスピードを評価するには、GoogleのPage Speed Insights (PSI)が使われます。P […]

plugin, WordPress
[WP-Plugin] WP-Optimizeのキャッシュ機能はW3 Total Cacheに変更 ID19320 [2021/10/25]

Post Views: 11 ID19320 目次1 キャッシュ プラグイン2 再検討の理由3 編集履歴 キャッシュ プラグイン サイト読み込みの高速化にはキャッシュを使用することが1つの方法です。約1年前にW3 Tot […]

Synology, WordPress
[Synology] Let’s Encription 証明書をインポートで設定が失敗した結果、遠隔ログインができなくなった場合の対処法 [2021/10/18]

Post Views: 17 ID32737 目次1 はじめに2 証明書のImportに失敗3 証明書なしで接続する4 最後の手段5 Fire Fox6 その他の接続方法7 編集履歴 はじめに Synology NASで […]

site setting, Synology, WordPress
[Synology] RT2600ac – FAQ – アクセスログが残っていない – ID30977 [2021/08/12]

Post Views: 30 RT2600ac管理FAQ アクセス・ログが残っていない 考えられる理由は以下の通り ログの保管場所が設定されていない 外部メモリ(SDカード、USBメモリ)を変更した 編集履歴 2021/ […]

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているように見えても最終目的はブレないスタイルはある – ID30216 [2021/05/30]

Post Views: 54 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

スポンサーリンク
by Google Ads ID19417
plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 36 パンクズリスト パンクズリストは、サイトで移動した履歴です。表現形態は、フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法 […]

Page: 1 2 24
スポンサーリンク

スポンサーリンク
by Google Ads ID24747

その他記事(ALL-RANDOM, ID:16786)

LIFE
[Life] 生駒山上遊園地90周年記念 令和元年 ファイヤーイリュージョン (夏花火) – 毎年行っています – ID1208

Post Views: 61 2019/08/08 大阪と奈良の県境による生駒山上遊園地には毎年花火を見に訪れる。今回もまたやってきた。

スポンサーリンク
by Google Ads ID19417
english
今日の英語 – as well as- and 接続詞の類型と考える – と応用も広がる – ID15360 [2020/05/07]

Post Views: 53 A and B are compatible.AとBは、同等である。 as well as は、接続詞と考えれは、用途が広がります。「and」の代わりに、より情報を盛り込んだ、接続詞として使 […]

english
今日の英語 – 偽りの生活 – life of falsehoods – [2021/11/21]

Post Views: 2 ID35054 life of falsehoods life of falsehoods: 偽りの生活 falsehood 偽り、誤り、lieと異なり意図的でいない。 アニメ「世界最高の暗殺 […]

スポンサーリンク

スポンサーリンク
by Google Ads ID:11143(2)

- 以下のツールに敬意を示します -
Support to AMP (Accelerated Mobile Pages) by official AMP plugin for WordPress, and compatible powered by
Post viewing : Flex Posts - Widget and Gutenberg Block