【Slick slider】画像が一瞬大きく表示されてしまう原因について

[uru]

Slick sliderが主な原因でCLSの評価が下がっていると考えています。

そのため表題の件について解決策をいただけますと有り難く存じます。

現在、下記の記述を追加し、スライダーに使用している画像を読み込み終わるまで非常時にしている状態です。

<style>
/* JavaScriptが有効な場合、対象を隠す */
html.enable-javascript .key-slider__wrap{
visibility: hidden;
}
/* 画像すべてを読み終えたら、対象を表示する */
html.enable-javascript.window-load .key-slider__wrap{
visibility: visible;
}
</style>

<script>
(function(){
var html = document.getElementsByTagName('html')||[];
html[0].classList.add('enable-javascript');
window.addEventListener("load", function(){
html[0].classList.add('window-load');
}, false);
})();

$(function(){
$(window).load(function(){
$('.key-slider__wrap').slick({
autoplay: true,
// fade: true,
accessibility: false,
infinite: true,
autoplaySpeed: 500,
centerMode: true,
variableWidth: true,
});
});
});
</script>

【教えてほしいこと】

１：ページスピードインサイトのCLSを改善するには、表題について解決すれば良いのか？

２：もしそうであれば、どのように記述を修正したら良いか？

slickの実装は他の方が行ったため、自分で一から作り直すことも検討しております。

（slickではなくswiperの方が、サイトが軽くなるのかも悩み中です・・・）

よろしくお願いいたします。

[st_mh]

スライダー画像のサイズが384pxで固定なのであれば、要素に対して高さを設定するのはいかがでしょう。

/* SP */
.key-slider__wrap{
  min-height: 102.4vw;
}

/* PC */
.key-slider__wrap{
  min-height: 384px;
}

また、スライダーが実行されるまで、エリアが真っ白です。

それが気になるなら、ローディング用gif画像を背景に設置するなど。

※ visibility: hidden;の記述は外してください。

.key-slider__wrap{
  background: url(ローディングgif画像) no-repeat center center;
}

（参考）ローディング画像の素材など

https://www.benricho.org/loading_images/transparent01.html

あとは、スライダーの課題は画像の読み込みですね。

サイトの読み込み速度を速めるならば、lazyloadのオプションを追加すると良いです。

$('.key-slider__wrap').slick({
autoplay: true,
// fade: true,
accessibility: false,
infinite: true,
autoplaySpeed: 500,
centerMode: true,
variableWidth: true,
lazyLoad: 'progressive'
});

（参考）

https://tr.you84815.space/slick/settings/lazyLoad.html

 仮にswiperに乗り換えるにせよ、こちらでもlazyloadのオプションが使えます。

[uru]

丁寧なご説明ありがとうございます！

教えていただいたことを参考に色々試してみます！