slick.jsで作成したスライダー読み込み時のレイアウトずれ対策

#css #seo #slickjs #carousel

トップページなどによく見られるスライダー（カルーセルパネル）は、画像が読み込まれるまで高さが計算できず、コアウェブバイタルのContent Layout Shift (CLS)に影響を与えます。

今回はよく使用されるスライダーのライブラリであるslick.jsでこの問題に対応する方法をご紹介します。

例として以下のようなスライダーのHTMLを考えます。

<ul class="slider">
  <li>
    <img src="/image1" />
  </li>
  <li>
    <img src="/image2" />
  </li>
  <li>
    <img src="/image3" />
  </li>
</ul>

liタグのに設定した画像をスライダーで表示する簡単なHTMLです。

まずCLSの対策では画像に対してwidthおよびheight属性を指定することが重要です。
これらを指定することで画像の縦横比を予め計算でき、画像が表示される箇所に同等のサイズのスペースを確保しておくことができます。これによりユーザーの意図しないレイアウトのズレが解決できます。

<ul class="slider">
  <li>
    <!-- サイズを指定 -->
    <img src="/image1" width="1000" height="400" />
  </li>
  <li>
    <img src="/image2" width="1000" height="400" />
  </li>
  <li>
    <img src="/image3" width="1000" height="400" />
  </li>
</ul>

ただしslick.jsを使用している場合、スクリプトの読み込みが完了するまでは全ての画像が表示されるため、余計なスペースが確保されてしまいます。
更にスクリプトが読み込まれると１つ目以外の画像が非表示になるため、ユーザーの意図しないレイアウトのズレが発生してしまいます。

これを解決するために、以下のスタイルを当てます。

ul.slider > li:not(:first-child) {
    display: none;
}

これは1つ目以外の画像を予め非表示にしておくスタイルです。

これではスクリプト読み込み後でも2つ目以降の画像が表示されないままなのでは？と思うかもしれませんが、slider.jsではスライダーを作成する際にulタグとliタグの間にdivタグを挟み込みます。
上記のスタイルではulタグの直下のliタグに対してスタイルを当てているため、スクリプト読み込み後はセレクターの対象から外れ、スライダーに画像が表示されるようになります。

これにより、スクリプト読み込み前は1つ目の画像のスペースだけが確保され、読み込み語は1つ目の画像のみが表示されるため、レイアウトのズレが発生しなくなります。