[ 解決済 ] 【機能追加要望】CLSスコアの改善

スライドが1枚だけのサイトであればスライドショーは不要なので

と書きましたが、スライドショーが必要なケースの方が多いと思いますので、
スライドショーを使ったトップページで Cumulative Layout Shift (CLS) スコアを
改善できるかどうかやってみました。

■■■ 結論 ■■■

CLS スコアを大幅に改善することができました。

■■■ CLS スコアが悪くなる理由 ■■■

トップページが表示され始めたときにはスライドショーがまだ表示されていなくて、
その後にスライドショーが割り込んで表示されるような動きをするために、
最初に表示されたコンテンツが下方向にシフトしてしまう (Layout Shift が発生する)。

添付画像をご覧ください。

■■■ Layout Shift が発生しないための対策 ■■■

img 要素の height 指定と同じように、
CSS でスライドショーの高さを指定(確保)すればよい。

■■■ 具体的な対策手順 ■■■

スライドショーの高さは画面幅に応じて変動しますので、
固定数値による指定はできません。

そこで、トップページの [カスタム CSS] に以下の行を追加しました。

@media (min-width: 768px) {
.carousel { height: calc( ( 100vw - 20px ) * ( 600 / 1900 ) + 1px ); }
}
@media (max-width: 767px) {
.carousel { height: calc( 100vw * ( 500 / 1000 ) + 1px ); }
}

• パソコン用の 20px はスクロールバーの幅です。
  ブラウザーによってこの幅は違いますので、余裕を持って 20px にしました。
  このためスライドの下がわずかに欠けることがありますが、誰もそのことに気がつかないと思います。
• 600 / 1900 はパソコン用のスライド画像のピクセルサイズです。
  500 / 1000 はモバイル用のスライド画像のピクセルサイズです。
• 最後の + 1px は border-bottom の分です。

■■■ 改善された CLS スコア ■■■

検証用サイト https://lightning-fort.hp1.work/ で上記の対策を行った結果、
CLS スコアを以下のように大幅に改善できました。

【モバイル】0.367 ⇒ 0.026
【パソコン】0.255 ⇒ 0.054