なるほど勉強になります。

まだページに表示されていない範囲の少し下の画像も読まれているなとは気がついていましたが、エラーの出ているAmazon広告はかなり下の方にあり、実際に商品画像はかなりスクロールが進んでから読み込まれていたので、同じ位置に貼られている1ピクセル画像だけが先に読まれているのがよくわからないなぁと思っていました。

Cocoonの高速化やPWAは本フォーラムに投稿するにあたってOFFにしていましたが、ご指摘の通りに全てONにしました。

ありがとうございました。

なぜLazy Load指定しているのに初期表示時に読みに行くのか謎ですが

loading="lazy" は、初期表示（画面に表示されている領域）以外にある画像を読み込まないものではありません。どこまでの画像を読み込むのかは、ブラウザに任せられています。

例えば、Chrome は、以下の領域にある画像を読み込みます。

• 4G などの高速回線の場合は、表示されている領域から、さらに 1250px 下にスクロールした地点まで
• 3G などの低速回線の場合は、表示されている領域から、さらに 2500px 下にスクロールした地点まで

参考：Improved data-savings and distance-from-viewport thresholds

デベロッパーツールのネットワークで見るとエラーにはなるのですが、カルーセルが表示されて少ししてからエラーの表示になります。

net::ERR_CONNECTION_TIMED_OUT エラーだからです。

このエラーは、一般的に 30 秒以内に接続できない時に表示されます。つまり、エラーが表示される 30 秒前から接続ができていないわけです。

全て描画されてから表示するようにJavaScript処理を加えた

わいひらさんが、このようにおっしゃっています。違う言葉で言えば、画像などを含めページが完全に読み込まれてからカルーセルは表示されます。

裏返せば、カルーセルを速く表示するにはページの表示を速くすればいいわけです。そのため、私であれば以下のことを行います。

① コンソールのエラーは全て潰す（ただ、Amazon の画像のエラーの解消は無理）。

② Cocoon 設定 > 高速化にある全ての項目にチェックを入れる。

③ Cocoon 設定 > PWA タブにある「PWAを有効化する」にチェックを入れる。PWA が有効の場合、2 回目以降の表示速度がすごく速くなる。無効時と有効時では全く違う。

なるほど。
お忙しいなか回答頂きありがとうございました。

回答ありがとうございます。

CLSというのは認識がなかったので勉強になりました。

Amazonの広告を待っている訳ではなく、ページの描画全体を待っているのですね。
カルーセルは表示する画像によってサイズが変わるので、ページの初期表示後で画像表示することで、もし要素が動いてしまっても初期表示は終わっているからCLSの計測から逃れるみたいなイメージでしょうか。

見ていただいてありがとうございます。

Amazonの1ピクセル画像は当初問題になっていましたが、Lazy Load指定にしてからカルーセルの表示には影響はないと思います。試しにサイドバーのAmazon広告を撤去してみても挙動はかわりありません。
デベロッパーツールのネットワークで見るとエラーにはなるのですが、カルーセルが表示されて少ししてからエラーの表示になります。
(なぜLazy Load指定しているのに初期表示時に読みに行くのか謎ですが)

「ir-jp amazon」と検索したところ、いくつか情報が出てきます。

https://www.google.com/search?q=ir-jp+amazon

デベロッパーツールのコンソールに大量のエラーが出ます。ただ、何度かページの再読み込みを試したのですが、エラーが出ない時もありました。

今AmazonのバナーにLazyLoadを指定しているのは、初期表示されない位置に移動してみたりを試した時に指定したものがそのままになっています。その状態でchromeの開発者ツールでページの表示時間を見ていたのですが、初期表示しても下に移動してもページの表示時間は変わらなかったので、Amazonのiframeにはなぜか効かないと思った次第なのです。

最初に書きました通り、技術的な興味のほうが質問した理由として大きいので、特に急いで回答して頂く必要はありません。よろしくお願い致します。