[Swiper] swiper-bundle.min.cssを必要なCSSだけにして軽量化する方法

Swiperは、画像スライダーやカルーセルを簡単に実装できる人気のJavaScriptライブラリです。

Swiperを導入する際、多くの場合は公式の swiper-bundle.min.css をそのまま読み込みます。
しかし、このファイルにはナビゲーションボタンやスクロールバーなど、使用していない機能のCSSも含まれています。
そのため、実際にはページネーションしか使っていない場合でも不要なCSSまで読み込むことになり、ファイルサイズ増加の原因になります。

この記事では、swiper-bundle.min.css の代わりに必要な機能だけのCSSを読み込む方法と、さらに1つのCSSファイルにまとめて運用する方法を紹介します。

Swiper の基本的な読み込み方法

Swiper をCDNで利用する場合は、通常以下のように読み込みます。

この方法が最も簡単ですが、CSSには使用していない機能のスタイルも含まれています。

※ Swiperのバージョンによってファイル構成やパスが変更される場合があります。
利用中のバージョンに合わせて公式ドキュメントや配布ファイルをご確認ください。

swiper-bundle.min.css とは

swiper-bundle.min.css は、Swiperで利用する主要なモジュール用CSSがまとめられたファイルです。

例えば次のような機能のスタイルが含まれています。

• ページネーション
• 前後ナビゲーション
• スクロールバー
• エフェクト系モジュール
• サムネイル機能
• グリッド機能

そのため、スライド機能やページネーションしか使わない、といったケースでも、不要なCSSまで読み込むことになります。

サイト全体の表示速度を少しでも改善したい場合は、必要な機能だけを読み込む構成がおすすめです。

必要な機能だけのCSSに差し替える方法

例えば、
・スライド機能
・ページネーション
のみを利用する場合は、swiper-bundle.min.css の代わりに個別CSSを読み込みます。

コアCSSを読み込む

まずはSwiper本体に必要なコアCSSを読み込みます。

このCSSには、スライダーとして動作するための基本スタイルが含まれています。

ページネーションCSSを追加する

ページネーションを使用する場合は、追加で以下を読み込みます。

最終的には次のようになります。

これにより、使用していないモジュールのCSSを読み込まずに済みます。

個別CSSを1つのファイルにまとめて運用する

このままでも問題ありませんが、CSSファイルが複数になるため管理やキャッシュ運用がやや複雑になります。
また環境によってはリクエスト数増加の影響を受ける場合があります。

そこで、必要なCSSだけを1つのファイルにまとめてしまう方法もおすすめです。

まず以下の2ファイルを開きます。

• swiper.min.css
• pagination.min.css

それぞれの内容をコピーし、1つのCSSファイルへ結合します。
例：swiper-custom.min.css

完成したファイルを自サーバーへ配置します。

/common/js/swiper/ の部分は自サーバのディレクトリに応じて変更します。

こうすることで、

• 必要なCSSだけ読み込める
• リクエスト数を増やさない
• CDN依存を減らせる

といったメリットがあります。

PageSpeed Insightsで「未使用のCSSを削減してください」と表示されている場合、改善要素の一つになる可能性があります。

ただし、実際の改善効果はサイト全体の構成や他のCSS・JavaScriptの状況によって異なります。

なお、Swiperの各CSS・JavaScriptファイルは jsDelivr のファイル一覧ページから確認・ダウンロードできます。

まとめ

• swiper-bundle.min.css には多くのモジュール用CSSが含まれている
• 使用しない機能のCSSまで読み込まれる
• swiper.min.css と必要なモジュールCSSだけを読み込むことで軽量化できる
• 運用時は1つのCSSファイルにまとめると管理しやすい
• PageSpeed Insightsの未使用CSS削減対策としても有効

Swiperを使用するページが多いサイトでは、必要最小限のCSS構成にすることで読み込み効率の改善が期待できます。