新年度迎えてブログの点検。
サーチコンソールの
エクスペリエンス - ページ エクスペリエンスをみたら
「ウェブに関する主な指標」が「失敗したURL」だらけになっていた。
不良0だが良好も0。
みな「改善が必要」になっていた。

詳細は「CLSに関する問題:0.1超」。
CLS 累積レイアウト・シフト
CLSはウェブバイタル Web Vitalsと呼ばれる3つの主要指標のうちの1つ。
残り2つはLCPとFID。
LCPはページ表示時間の指標で、以前取り上げた。
FIDはFirst Input Delay(初回入力までの遅延時間)の略で、読み込みの応答性の指標。
CLSはCumulative Layout Shift(累積レイアウト・シフト)の略で、ページ内の視覚要素がどのくらい移動しているか、レイアウトの不安定性の指標。
例えば、ホームページにアクセスして、本文中のリンクをクリック(タップ)しようとしたら、少し遅れて画像が読み込まれたために本文中のリンクではなく上から下がってきた画像をポチッと押してしまうことがある。いわゆる誤クリック。
ユーザーに不快感を与える。
特に自分のブログを確認する場合、広告を自分でクリックしかねないので、極めて危険。
※ CLSの説明ページ(web.dev/cls/)
CLSの値が0.25超だと不良。
0.1超は良好ではないが、深刻でもない---
と思ったが、少し気になって該当ページをいくつか確認してみたところ
広告が本文中のあらぬところにいくつも挿入されて、追尾広告のようになっていた。
以前確認した時はさほど目障りではなかったが、いつの間にか暴れていた。
原因はコレかも知れない---。
検索して調べてみたら
対処法は大きく2つあった。
1つは、
画像要素でwidth(幅)とheight(高さ)を明示的に指定すること
もう1つは、
Googleアドセンスの自動広告の見直し。
前者の画像のほうは、
HTMLのimgタグに幅と高さを指定しておけば
(ブラウザで)画像が読み込まれる前にあらかじめ表示領域が確保されるのでレイアウトが移動しない、
という理屈。
これまで指定せずに使い続けてきたので、今更大半のページ(193ページ)みな指定する必要があるのだろうか……とゾッとしたが、
幸いWordPressが自動で指定してくれているらしい。
確かにGoogle PageSpeed Insights(pagespeed.web.dev/)で指摘されていたのはヘッダーロゴだけだった。
本文中の画像、アイキャッチ画像、プロフィール画像については「明示的に指定」のお咎めなし。
ヘッダーロゴについては
Cocoon設定 - ヘッダーの
ヘッダーロゴサイズに幅と高さの値を入れたら、
デスクトップ(パソコン)のほうは問題解消。
携帯電話(モバイル)は未解消。
なお、CSSで一括して
img{
max-width:100%;
height:auto;
}
とする例示もあったが、
(WordPressのCocoon)テーマエディターから覗いてみたら、既にそうなっていた。
参考サイト
- ドッド工房ブログ - CLSに関する問題を改善する方法を具体的に解説【SEO対策】(atelierdodd.com/improve-cls/)
AdSense広告変更その2
その1は、
何もいじっていないのに大半のページが一斉に良好になったり良好でなくなったりしているのは、
やはり自動広告がCLSに影響を及ぼしているのだろう。
ずっと自動広告お任せ状態だったが、
暴れていってしまうこともあるようで、
制御できないのが難点。
ということで、Googleアドセンスの自動広告は、
ページ内広告をオフにした。

Cocoonテーマを新しいバージョンに更新したら
Cocoon設定 - 広告の
アドセンス設定 - アドセンス表示方式で、
「アドセンス自動広告のみ利用」と「マニュアル広告設定(自前で位置を設定)」
の項目がなくなっていた。
※ Cocoonテーマのアップデート情報 v2.4.2(wp-cocoon.com/2-4-2/)によると『「AdSense自動広告」を削除しマニュアルオンリーに変更』。
結局、
自動広告オン、ページ内広告オフ
+
マニュアル広告設定
に落ち着いた。
ついでながらWordPress5.8以降、ブロックエディタ化して、なかなか使い慣れなかったウィジェットが、元のクラシックに戻っていた。
WordPressが戻したわけではなくCocoonテーマ側の対応。助かる。
メモ)
2022年4月 www.mitsumatado.com/zen
Google PageSpeed Insights
携帯電話(モバイル) 63
デスクトップ(パソコン) 96
GTmetrixのグレードは依然C