@hideo1516 さんへ。

添付のGoogle検索フォームが直接的な原因と思われます。
よって、それを解消していただくのが第一かと。

通常の検索フォームウィジェットに置き換えればすぐに解決すると思うのですが、Google検索フォームにしているのは何か理由があるのでしょうか？

参考までに、CLSとは、読み込みの際にレイアウトにズレが生じたときに警告が生じるものとなっています。

• レイアウトシフト(Cumulative Layout Shift)とは？対策・改善方法も紹介！

@yinaba さん

ご返信いただきありがとうございます。お世話になります。

ご教示いただいたことを実施（google検索窓を削除）して確認しましたが、残念ながら、相変わらず<article>タグの部分に「大きなレイアウトシフトがある」という結果になっています。（添付画像：すべてのキャッシュを削除して、Chromeシークレットウィンドウにて確認）

googleの検索窓を使用したのはユーザーが使いやすいと考えたからです。

@hideo1516 さんへ。

ご確認ありがとうございます。
サイドバー側が改善できたようで何よりです。

<article>側ですが、おそらくアイキャッチ画像がCSS側で非表示になっていることが原因と思われます。

本来添付のコード部分の画像やキャプション文が表示されているはずですが、それが表示されていないのでPagespeed側からご指摘を受けているのだと思います。

従って、もしこの非表示の処理が意図的なものでしたら、戻さない限りはスコアも改善しないものと思われます。

※もしアイキャッチ画像を表示させたくないのであれば、設定画面の方から変更をお願いします。

• ブログページのアイキャッチ画像を非表示にしたい | Cocoonテーマに関する質問 | Cocoon フォーラム

添付いただいたファイルを見ると、既に変更してあって掲載すべきでない・・・2022/10/TopImage36.jpgという画像を呼び出しており、？？？となってしまいました。この画像は昨年12月までヘッダー背景画像として使用しており、その後、クリアして新規に現在表示中のヘッダー画像を選択して掲載しました。

更に、驚いたことには、このページのコードを見ると<header>・・・</header>が２か所に存在しています。

私の、cocoon設定ーヘッダー設定（ヘッダー背景画像の変更処理）がマズいのか良くわかりませんが、アドバイスいただけないでしょうか。

@hideo1516 さんへ。

投稿者:: @hideo1516

↑

更に、驚いたことには、このページのコードを見ると<header>・・・</header>が２か所に存在しています。

確かに一番上のメニューと記事タイトル部分にheader要素が2度出てきておりますが、この使い方は特段問題ありません。（ご質問いただく前に、まずはHTMLについてご理解をお願いいたします）

• header タグ - HTML リファレンス - CodeHero

すみません。

アイキャッチ画像は、Cocoon設定で非表示にすると、CSSで非表示にされます。
今そういう状態に見えるのですけれど、違うのでしょうか？

LiteSpeed Cacheの介入を受けているため、素の状態を確認できませんので、分かりにくいのですけれど。
（LiteSpeed CacheがCSSを縮小化しているので）

そして、今回のこととは無関係かと思いますが。

LiteSpeed Cacheで、画像やiframeの遅延読み込み（LazyLoad）を設定なさっているのではないかと思われます。

画像はWordPress 5.5で、iframeはWordPress 5.7で、いずれもWordPress標準でネイティブLazyLoadに対応しています。
プラグイン側で設定しなくても良さそうに思うのですけれど。

@mk2_mk2 様

投稿者:: @mk2_mk2

↑

アイキャッチ画像は、Cocoon設定で非表示にすると、CSSで非表示にされます。
今そういう状態に見えるのですけれど、違うのでしょうか？

自己環境で確認したところ、確かにそうなっておりました。
大変失礼いたしました。

（てっきりHTML側から修正されるとばかり思っており……）

投稿者:: @mk2_mk2

↑

LiteSpeed Cacheで、画像やiframeの遅延読み込み（LazyLoad）を設定なさっているのではないかと思われます。

この辺りの最適化処理（あるいはCSSの最適化や遅延読み込み）も関係しているのかもしれないですね。
時折、MarginやPaddingの反映がほんの少し遅くなっているのを確認しています。

Y.INABAさん

只今スマホで、移動中なもので、とても入力しづらいですが・・・。

アイキャッチは、ファーストビューであり、WordPressやCocoonは、LazyLoadの対象外にしているはずです。

そもそも非表示ですから、本件はあまり関係ないとは思うのですけれど。

プラグインで余計な処理をする必要はないと思ったのです。

ネイティブLazyLoadは優秀なのではないかと。

失礼しました。

htmlに関しても認識が浅く申し訳ありません。

お陰様で「アイキャッチ自動設定を有効にする」の設定で、件の<article>タグ関連のレイアウトシフトに関する指摘頻度は相当に低下しました。

この度は同時に、何がマズいのか意図していないヘッダー背景画像のアイキャッチが、表示される可能性の問題にも気づかされました。まだまだ、殆どほったらかし状態のWeb指標改善には取り組まなければならないレベルです。

google検索窓は元に戻します。

お手数をおかけして、貴重なお時間を浪費させてしまい恐縮です。ありがとうございました。

LiteSpeed Cacheの件、スルーされてしまいましたが、本題とは関係ないでしょうから、それで良いのですけれど。

気づいてしまったので、一応書いておきます。

@mk2_mk2 さん

ありがとうございます。

先の返信に気づかず失礼いたしました。

投稿者:: @mk2_mk2

↑

プラグインで余計な処理をする必要はないと思ったのです。

ネイティブLazyLoadは優秀なのではないかと。

今まで、LiteSpeed Cacheでは画像にのみ遅延読み込みさせておりました。今後は、画像もiframeの遅延読み込み同様にWordPressに任せるように変更しました。

hideo1516さん

いえいえ、お気になさらずに、本題とは外れていますので。
私が気になっただけです。

投稿者:: @hideo1516

↑

画像もiframeの遅延読み込み同様にWordPressに任せるように変更しました。

上記のように対応なさったのこと。

ただ、現在LiteSpeed Cacheのページキャッシュが残っていまして。
（本日の14:23頃のもの）

最新の状態は、確認できないのです。

一度、ページキャッシュを更新（クリア）いただけますと、最新の状態を確認できると思います。

@mk2_mk2 さん

確かに、何故か下記2行が表示されています。

<meta itemprop="width" content="1280">

<meta itemprop="height" content="720">

私が何か意図して設置したものではなく、登場原因はわかりません。

そもそも、この部分に登場する<img・・・/2022/10/TopImage36.jpg"・・・>は、表示サイトからはクリア（削除）済みのヘッダー画像なのですが、どうして残ってしまうのか、どうしても解せないのです。

hideo1516さん

LiteSpeed CacheのLazyLoadは外れましたね。

hideo1516さん

投稿者:: @hideo1516

↑

<img・・・/2022/10/TopImage36.jpg"・・・>は、表示サイトからはクリア（削除）済みのヘッダー画像なのですが、どうして残ってしまうのか、どうしても解せないのです。

添付の部分は、アイキャッチですので。

例えば、no image画像に設定なさっていませんか？

【追記】
該当固定ページのアイキャッチにはないのですよね？

【追記2】
やはり、no image画像の可能性が高そうに思います。
（「Cocoon設定」－「画像」）

現時点では、結局のところ、当初の「<article>タグ部分にCLSの指摘あり・・・」のフォーラムへの質問投稿時点の状態に戻ってしまいました。

確認時にキャッシュのパージを失念していた時があり、確認ミスがあったように思いますので、再度、確認して報告させていただきます。なお、PSIの検査では時々は「レイアウトシフトの指摘がないケース」もあり、結果は安定的ではありません。

1. まず、「google検索窓の削除」後の時点ではすべてのキャッシュを削除して、シークレットウィンドウで確認しておりますが、好転は確認できませんでした。
2. その後、「アイキャッチ画像の表示」については「アイキャッチ画像の自動表示を有効にする」設定としました。現状はその設定のままですが、安定的な好転は確認できておりません。
3. LiteSpeed Cacheにて、lazyload「画像の遅延読み込み」を「オンからオフ」に変更しました。現状はそのまま「オフ」にしていますが、好転は確認できていない状態です。

時間のあるときで結構ですから、今後も参考になりそうなコメントを頂ければ幸いです。

とりあえず、先程のPageSpeed Insightsで確認してみましたので、結果をリンクしておきます。

https://pagespeed.web.dev/analysis/https-www-ltkensyu-com/3t3yr9qih8?form_factor=desktop

CLSに関する部分

@mk2_mk2 さん

お世話になっております。

たまたまご確認いただいているページがホームなのですが、確かにこのページに限って、アイキャッチ画像を設定しておりませんでしたので、たった今、設定しました。

しかし、以前から設定している他の例えば、

https://www.ltkensyu.com/supplemental/3-3/

でも、ソースコードの表示様式は異なりますが、現時点で、当初と同じく<article>タグ部分のレイアウトシフトが指摘されています。（現時点でのキャッシュ削除、シークレットウィンドウで確認）

投稿者:: @hideo1516

↑

LiteSpeed Cacheにて、lazyload「画像の遅延読み込み」を「オンからオフ」に変更しました。現状はそのまま「オフ」にしていますが、好転は確認できていない状態です。

こちらについては、CLSに対してではなく。

プラグインで処理する必要はないのではということで、書かせていただきました。
（WordPress標準で対応していますので、主なブラウザは標準でLazyLoadの処理ができるのに、わざわざプラグインが出力するJavaScriptで処理する必要はないのではという意味合いです。JavaScriptは増えれば増えるほど重くなるような気がします）

ましてや、アイキャッチはファーストビューです。
LazyLoadする意味はないと思うのです。
（CSSで非表示にはなっていますけれど）

@mk2_mk2 

こんばんは中途参加になりますが、LiteSpeedとLiteSpeed cacheについて軽く補足させていただきます。
遅延読み込みに関してmk2さんのご指摘の通りです。

しかし、ながらPSIで指摘される次世代フォーマット画像に関しては特殊で
LiteSpeed　cacheにはクラウドサービス上でwebpに変換する機能がプラグインに付帯しています。

また、このプラグインが使えるのものLiteSpeedまたはOpenLite speed Serverの特徴です。
ですので私では、この恩恵を生かすべく画像の置換と自動変換のみ有効にすることが多いです。

他の高速化に関する設定は、テーマや別のプラグインとの兼ね合いで無効化することは多々にあります。

@hideo1516

CLSの要因は画像サイズが明示（明らかにされていない）為にブラウザー側で表示処理を行う際に
再計算されているのかと思います。

なお、これはPSI（Googleエミュレーション結果）に基づくデータなのでフィールドデータを持っている場合は
Googleのランキングシグナルとするときフィールドデータ（実際のユーザーの平均値）
が優先して使用されるはずなので一度元の設定に戻して遅延読み込みを解除し、
Webp置換のみを行う設定にしてみることをお勧めします。

参考になるご意見をありがとうございました。

当分の間、現状のままで気にしないことにします。

今回、何故、質問させていただいたのか、ご説明しますと、

実は、以前からSearchCosoleから度々CLSが大きいとの指摘があり、「AdSense自動広告を設置しているから仕方がない」と思っていました。しかし、自動広告を停止してもCLSが改善されなかったため、サイト側に問題があると考え、今回の質問に至りました。

まあ、実際は自分でアクセスしても大して問題だと感じませんので、気にしなくても良いと思っています。

ただ、「サイト内検索」は当サイトが文字ばかりの性格で、ユーザーによってはサイト内の用語の検索が必須との要望もあり、使いやすいGoogle検索窓を設置しています。

@hideo1516 

本題とは少々それますが自動広告のインテント広告機能は活用されてますか？
今のAdsenseは検索エンジンと紐づけることができないので検索広告から収益を得るのであれば
インテントチップ、インテントアンカー、インテントリンク、関連検索のいずれかになります。

marisachi　さん

ありがとうございます。

投稿者:: @marisachi

↑

一度元の設定に戻して遅延読み込みを解除し、
Webp置換のみを行う設定にしてみることをお勧めします。

現在、LiteSpeed Cacheは、「遅延読み込みを解除し、Webp置換のみを行う設定」にしております。

@marisachi さん

ご教示ありがとうございます。

投稿者:: @marisachi

↑

広告ユニットを作成する時に「検索エンジン」と言う項目がある場合はカスタムサーチと紐づけることができます。

大分前から、ありましたが、利用しておりませんでした。

いずれ調べてトライしてみます。