カテゴリー
adsense plugin WordPress

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

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

はじめに

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

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

スポンサーリンク
by Google Ads ID8603
スポンサーリンク
  • 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が邪魔にされるように、下く繰り下げられる様子は、閲覧者としては、気持ちの良いものではありません。

当サイトでは、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/
スポンサーリンク
by Google Ads ID8603

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

解説には、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

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

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

編集履歴

2020/12/23 Mr.HARIKIRI
2021/03/13 追記(CLSについての情報)
スポンサーリンク
by Google Ads ID8603

関連記事

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

Post Views: 22 Google PageSpeed Insightsは、とても良い測サイトだが、使い込んでいくと何がわるいのか、もっと知りたくなってくる。 JavaScriptやCSSのコードの最適化プラグイ […]

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

Post Views: 18 目次1 はじめに2 最初のサイト速度改善は画像圧縮3 その次の対策は・・・4 サイト速度の評価5 GTmetrix.com はじめに サイトのスピード測定には、GTmetrix.comとPa […]

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

Post Views: 12 目次1 サイトのスピード2 関連 サイトのスピード サイトのスピード測定は、「GoogleのPageSpeed Insights」が有名ですが、以下のサイト(EZOIC)でも、サイトアドレス […]

スポンサーリンク
  • by Amazon ID13211
  • 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 ID:11145
  • by Google Ads ID23293
  • by Google Ads ID24747
スポンサーリンク
by Google Ads ID8603

Update ID21920

BIOLOGICS, culture, education
[Bio-Culture] Poloxamer 188 – バイオリアクターの撹拌翼による細胞のダメージを抑制 – ID28021 [2021/02/24]

Post Views: 9 目次1 Poloxamer 1882 毒性2.1 動物の静脈内注射 (Poloxamer)2.2 ヒトの静脈内注射 (Poloxamer 188)2.3 創傷治癒2.4 動物実験2.5 AME […]

KNOWLEDGE
[Kw] コンサル会社 – デロイトトーマツ – ID8628 [2020/02/05]

Post Views: 24 デロイトトーマツ https://www2.deloitte.com/jp/ja.html

Gear
Gear – 電動ノコギリ – 隣宅との間で巨大化した木を切り倒す方法と注意点 – ID15368 [2020/05/07]

1、2年前までは草だと思っていた物が、気が付けば高さ12m(最大の幹直径20cm)の木になっていた。ここまで大きくなった木は、手引きのこではもう切り倒すことはできず、切り倒すための電動ノコギリを購入し切り倒した。その電動ノコギリの選び方、その他必要な備品と切り倒すときの注意点及び実際の作業について記録した

更新された投稿の最新順

スポンサーリンク
by Google Ads ID19417
スポンサーリンク
  • by Amazon ID19245
  • by Amazon ID13339
スポンサーリンク

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

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

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

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

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

Post Views: 18 目次1 はじめに2 Cumulative Layout Shift3 ページのレスポンスを測定するツールサイト4 編集履歴5 関連記事 はじめに 当サイトを立ち上げた頃には、もっぱらplug […]

plugin, WordPress
[WordPress] Widget Logic プラグイン – ID26082 [2020/12/17]

Post Views: 19 目次1 Widget Logicプラグイン2 条件の例 Widget Logicプラグイン 2020/12現在、updateがされておらず、WordPress の最新Version ではテス […]

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

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

最新記事(WordPress, ID:14681)

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

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

スポンサーリンク
by Google Ads ID19417
site setting, WordPress
[Synology] DS920+のblog server – 15時間のアクセス普通について、今回の原因とは、そしてその対応 – ID27934 [2021/02/22]

Post Views: 20 目次1 はじめに2 対応した作業3 編集履歴 はじめに なぜか、RT2600acのポート転送にWeb Serverへの設定が消えていたことで、HARIKIRI-INSIGHTのBlogへのア […]

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

Post Views: 18 目次1 はじめに2 Cumulative Layout Shift3 ページのレスポンスを測定するツールサイト4 編集履歴5 関連記事 はじめに 当サイトを立ち上げた頃には、もっぱらplug […]

plugin, WordPress
[WordPress] Widget Logic プラグイン – ID26082 [2020/12/17]

Post Views: 19 目次1 Widget Logicプラグイン2 条件の例 Widget Logicプラグイン 2020/12現在、updateがされておらず、WordPress の最新Version ではテス […]

security, WordPress
[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16] ID24858

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

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

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID:11145
  • by Google Ads ID23293
スポンサーリンク
by Google Ads ID8603

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

AAV, BIOLOGICS, COGs, production
[Bio-rAAV] rAAV vector製造でplasmidを細胞に導入するトランスフェクション試薬 – ID3336 [2020/07/21]

Post Views: 18 PEI Polyethylenimine (PEI)は、カルシウムよりも安定的に遺伝子を細胞に導入できます。そのトランスフェクション効率についても、研究が進められており、一般的なPEIより、 […]

anime
[アニメ]「Dr.STONE」より,化石の世界から携帯電話をつくる・・・語録,ワインの樽に付着したピンクの粒 + 焼いた海草 + お湯に溶かす → ロッシェル塩; 音を電気に変える/1年後、2期の放送が開始された – ID4383 [2021/01/16]

Post Views: 19 目次1 Dr.STONE2 2期3 1期4 編集履歴 Dr.STONE 2期 2021/01から二期が始まりました。少し撮りためてから視聴しようと思っています。 1期 サイエンティストの血を […]

BIOLOGICS, company, vaccine
気になる企業 – Vaccibody – ID24078 [2020/10/07]

Post Views: 15 Vaccibody HomePage 新しい免疫療法の発見と開発に専念する臨床段階のバイオ医薬品会社 個別化癌新抗原ワクチンの急速に発展する分野のリーダーであり、Vaccibody技術を持つ […]

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

スポンサーリンク
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