試しに改善版をアップしてみました（※あくまで試作版なので完全な状態ではないかもしれません。採用するかもまだ未定です）。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
上記でアップデート後、PageSpeed InsightsをするとCLSのスコアは幾つになりますでしょうか。

僕の環境では、0.1強ぐらいには変わったようです。

わいひらさん、早速の対応ありがとうございます。

開発版を適用してみました。

こちらのサイトでも、CLSの数値が0.011に大幅改善しました。

ありがとうございます！

結果を添付します。

試しに改善版をアップしてみました（※あくまで試作版なので完全な状態ではないかもしれません。採用するかもまだ未定です）。

試作版について、heightを196pxで固定してしまうのは様々な不具合の原因になり得ると思います。

カルーセル内の個々のカードリンクは縦幅が決まっているわけではないので、

• モバイルでの表示（レスポンシブ）
• サムネイル画像の縦横比率
• 記事タイトルの長さ

なども確認しないといけません。

ご確認ありがとうございます。

投稿者:: @lococo

試作版について、heightを196pxで固定してしまうのは様々な不具合の原因になり得ると思います。

もちろん、それは承知していて、いつもだったら書かないような以下のようなことを書きました。

試しに改善版をアップしてみました（※あくまで試作版なので完全な状態ではないかもしれません。採用するかもまだ未定です）。

自分の環境以外でも、有効な手段かどうか確認したくて。
あとは、これをどう落とし込むかなんですけど、今のところこれだという方法は思いついていません（これが思いついてないので現在の仕様になっているともいえます）。
とりあえず、GitHubは一旦Revertしておくつもりです。

とりあえず今後、考えてみます。

自分の環境以外でも、有効な手段かどうか確認したくて。

昨日はざっとコードを見ただけで投稿したので説明不足だったかもしれませんが、以下で説明したような項目またはCLSに関するドキュメントを確認していただければ分かる通り、CLS対策としては誤った修正方法だと思います。

カルーセル内の個々のカードリンクは縦幅が決まっているわけではないので、

• モバイルでの表示（レスポンシブ）
• サムネイル画像の縦横比率
• 記事タイトルの長さ

なども確認しないといけません。

https://github.com/yhira/cocoon/commit/4a001dfa192dda20c1082174cc060618e53b3f8e

時点での修正ではまだカルーセル前後の正しいCLS数値を測定するのは困難なのと、fadeInに対して

.carousel-in {
  display: none;
}

とでもした後にカードの高さを固定するのに詰まります。

カルーセルにおけるCLSの問題は、このfadeInによってCSSのdisplayプロパティの値をnone⇒blockにしている点なので、CLSの数値を優先させるならば、表示時の高さが保持できるCSSアニメーション等で書き換えるのが正しい対策ではないでしょうか。

実際に、修正前の状態で

.carousel {
  display: none;
}

を削除し、

$('.carousel').fadeIn(1000);

の動作がなくなるだけで数値的には改善するはずです。

ちいラボ氏と同じように、カルーセルのCLSに悩まされておりました。

ろこ氏の意見に同意でなるほどと思いました。

改善されることを願っております。

確かに。元々はそういう仕様だったんですよね。
ただ、画面表示時に添付画像のような表示状態になるのが嫌だと言われて、現在も仕様にしたんでした。
計測してみたら数値はかなり改善しているので、その方向に戻してみようと思います。
ありがとうございます。

GitHubの方も変更しておきました。
https://github.com/yhira/cocoon

確認しました。

ただ、画面表示時に添付画像のような表示状態になるのが嫌だと言われて、現在も仕様にしたんでした。

表示時にフェードインのようなエフェクトが必要なのであれば、前回の返信でも書いたようにCSSアニメーション等で表現するのがよいのではないでしょうか。

.carousel {
  animation: fade-in 1.5s ease-in-out;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

飽くまでサンプルですが、このような方法だと高さの位置ズレはなくなるので、CLSの数値が著しく悪化することはないと思います。

アニメーションは過去に試してみたのですが、添付画像のようになってしまって前回の仕様にした感じです（環境はWindowsのChrome）。
アニメーションの時間を仮に、3秒とか長くしてもあまり変化なくて 😥 

私はカルーセル機能は使用しておらず、ローカルにある同じ条件下の開発環境でテストを行いましたが、添付画像のような現象は再現できませんでした。

上記のコードは飽くまでサンプルなので、CSSのみなら

.carousel {
  opacity: 0;
  animation: fade-in 0.5s ease-out 1s forwards;
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

のように実行タイミングを遅らせたアニメーションや、JSで

$(window).load(function(){
  $('#carousel').addClass('loaded');
});

読み込み後にカルーセル表示を実行するようにし、

.carousel {
  opacity: 0;
  transition: all 1s ease-out;
}

.carousel.loaded {
  opacity: 1;
}

クラスの追加前後で表示を変えるアニメーションなどは試してみましたか？

そこまではやってませんでした。
読み込んだ後にやるというのは、ほんと、その通りですよね;
開発版にも適用しておきました。
今までで、一番綺麗な表示になったと想います。
ありがとうございます！！