slickスライダーがアクセス時にスムーズに表示される方法

slickスライダーを使っているホームページにアクセスした時、画像の読み込みが遅かったり、一瞬巨大な画像で表示されることはありませんか？
画像の読み込みに時間がかかり、ユーザビリティが低下している可能性があります。
改善するにはどうすれば良いのでしょうか。
この記事ではslickスライダーを使用した際に、画像がスムーズに表示される方法をお伝えします。

lazyload機能を使用する

slickスライダーでは「lazyLoadオプション」が標準で用意されています。

slickのスライドですべての画像を一度に読み込むとページ表示完了までに時間がかかってしまいますが、このlazyLoadオプションを利用することで、表示されていない画像は表示時に読み込ませることができます。

使用方法

（1） 遅延読み込みを利用したい画像はdata-lazyで記述します。

＜img alt="それ以外の画像" data-lazy="xxx.jpg" /＞
＜img alt="それ以外の画像" data-lazy="xxx.jpg" /＞
＜img alt="それ以外の画像" data-lazy="xxx.jpg" /＞

 
（2） slickのオプションでlazyload=””を設定します。

$( '.slide_image' ) . slick ( {
lazyLoad: 'ondemand',// or 'progressive'
slidesToShow: 3,
slidesToScroll: 1
} ) ;

lazyload機能を使用するメリット・デメリット

lazyload機能を使用して考えられるメリットは次のものが挙げられます。

メリット

・最初のレンダリングが終わるまでの時間が短くなる
・不要な通信が減るのでユーザーフレンドリー
・スピードアップデート以降のSEO対策として有効
画像が多いページの場合、最初のレンダリングが終わるまでの時間が劇的に短くなります。
さらに、Loadをトリガーにした処理が組み込まれている場合は効果てきめんです。

例えばロード画面が閉じるまで2秒後がいいか、4秒後がいいかを考えてみてください。

デメリット

・読み込まれるまでの間は代替画像や空白で表示される
・画像が読み込まれたときに要素の高さが変わり、以降の要素の座標が変わってしまうことがある(※1)
・クローラーはスクロールイベントを起こさないため、画像を使ったSEOとは相性が悪い(※2)
※1: width属性、height属性を適切に指定するなどの方法で回避できます。

※2: 構造化データに画像URLを含めることで対策が可能です。

まとめ

slickスライダーを使用する上で、lazyload機能を導入することにより、ユーザーフレンドリーとみなされ、SEO対策としても有効になります。
ただし、代替画像や画像の幅や高さ、構造化データなどに気を配る必要がありますので、注意が必要です。