Swiper.jsはオプションが豊富で魅力的なスライダーライブラリの一つですが、一つだけ弱点としてファイルサイズが大きく、入れるとサイトが重たくなるという事が挙げられます。
当記事ではこのSwiper.jsの唯一の弱点を解消すべく読み込みコストをゼロにする方法を記します。
Swiper.jsは重たい
Swiper.jsはよく重たいと言われますが、本当に重たいのでしょうか。
他の人気のスライダーライブラリと比較してみました。
| ライブラリ | バージョン | ファイルサイズ |
|---|---|---|
| Swiper | 11 | 146KB |
| Slick | 1.9.0 | 43KB |
| Splide | 4.1.4 | 30KB |
| Glide | 3.6.0 | 27KB |
確かに重たいみたいで、他のライブラリの3~5倍のファイルサイズになっています。
ファイルサイズが大きいと読み込みに時間がかかるので、結果としてサイトの表示速度が遅くなってしまいます。
しかし、この記事で紹介する方法を使えば、Swiper.jsの読み込みコストをゼロにすることができます。
①通常のSwiperスライダーを作成する
わかりやすいように通常のSwiperスライダーのコードを記述してそこから変更を加えていきましょう。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/sample1.png"></div>
<div class="swiper-slide"><img src="img/sample2.png"></div>
<div class="swiper-slide"><img src="img/sample3.png"></div>
</div>
</div>
<script>
new Swiper('.sample-slider', {})
</script>②実行時にライブラリを読み込むようにする
scriptタグでライブラリを読み込むと、レンダリングが一時停止して表示速度が遅くなってしまうので、まずこれを削除します。
次にLazySwiperというクラスを定義し、スクロールされたときに動的にライブラリを読み込みSwiperインスタンスを生成するようにします。
<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> --> <!-- 削除 -->
<!-------- ↓ 追記 ↓ -------->
<script>
class LazySwiper {
constructor(selector, option) {
const path = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'
const createSwiper = () => import(path).then(m => new m.Swiper(selector, option))
window.addEventListener('scroll', createSwiper, { once: true })
}
}
</script>
<!-------- ↑ 追記 ↑ -------->今回のようにSwiper.jsをインポートして使う場合は、通常とURLが違うので注意が必要です。
※Swiper11からは統合されたようです。
※Swiper11からは統合されたようです。
③実行部分の記述を変更する
new Swiperの部分を書き換えて、先ほど定義したLazySwiperを読み込むようにします。
これだけで、Swiperライブラリの読み込みコストがゼロになるのでぜひ試してみてください。
// new Swiper('.sample-slider', {}) // 削除
new LazySwiper('.sample-slider', {}) // 追加ソースコード全文
最後にソースコードを全文載せておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/sample1.png"></div>
<div class="swiper-slide"><img src="img/sample2.png"></div>
<div class="swiper-slide"><img src="img/sample3.png"></div>
</div>
</div>
<script>
class LazySwiper {
constructor(selector, option) {
const path = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'
const createSwiper = () => import(path).then(m => new m.Swiper(selector, option))
window.addEventListener('scroll', createSwiper, { once: true })
}
}
new LazySwiper('.sample-slider', {})
</script>以上、Swiper.jsの読み込みコストをゼロにする方法でした。
