Swiper.js is one of the attractive slider libraries with abundant options.
However, its only weakness is its large file size, which can make the website heavier.
This article describes a way to eliminate the only weakness of Swiper.js by reducing the loading cost to zero.
Table of Contents
Swiper.js is heavy
Swiper.js is often said to be heavy, but is it really?
We compared it with other popular slider libraries.
| Library | Version | File Size |
|---|---|---|
| Swiper | 11 | 146KB |
| Slick | 1.9.0 | 43KB |
| Splide | 4.1.4 | 30KB |
| Glide | 3.6.0 | 27KB |
It certainly seems to be heavy, with a file size 3~5 times larger than other libraries.
The larger file size takes longer to load, resulting in slower site display speed.
However, with the method introduced in this article, it is possible to reduce the loading cost of Swiper.js to zero.
①Create a normal swiper slider
For clarity, let’s start by writing the code for a simple Swiper slider, and then we’ll make modifications from there.
<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>②Load the Library at runtime
Loading the library by the script tag will cause the rendering to pause and slow down the display speed, so remove this first.
Next, define a class named LazySwiper to dynamically load the library and create a Swiper instance when scrolled.
<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> --> <!-- removed -->
<!-------- ↓ added ↓ -------->
<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>
<!-------- ↑ added ↑ -------->※It seems to have been integrated since Swiper 11.
③Change the code for the execution part
Load the LazySwiper class defined earlier instead of the Swiper class.
With just this change, the loading cost of the Swiper library will be reduced to zero, so please give it a try.
// new Swiper('.sample-slider', {}) // removed
new LazySwiper('.sample-slider', {}) // addedThe full text of source code
In the end, we put the full text of source code.
<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>That is all, it was about how to reduce the loading cost of Swiper.js to zero.
