Core Web Vitals(CWVs)を意識するとカルーセルのライブラリは何を使うべきか

Core Web Vitalsを意識してPage Speed Insightsとにらめっこしていると、CDNで読み込んでいる外部のライブラリから受ける影響は極力少なくしたい気持ちが湧いてきます。
サイトの仕様として、トップ画面に鎮座するカルーセル（スライダー）を無くすことは難しいケースが多いと思いますので、せめて影響の少ないライブラリはどれかという観点でスコアを測定してみました。

レギュレーション

どういった形での計測が望ましいか迷いましたが、今回は「ライブラリ以外の要因を極力排除」という方向を目指し、下記のレギュレーションで比較します。

・ライブラリ以外のCSS、JSはHTML内に記述し、外部リソースはライブラリに関連するものだけにする
・影響を少なくするためにカルーセル内の画像はPreload
・HTMLからカルーセル以外の要素は排除
・ライブラリのオプションは公式サイトの「デモ」に準拠

測定する項目としては、次の通りです。

・Page Speed Insightsのモバイルスコア
（思ったよりブレがなく、3回ずつ計測してすべて同じスコアでした）
・画像を除いた転送サイズ
・画像を除いたリクエスト数

Slick（JQuery依存）

日本語解説記事の多さからも、恐らく一番実績が多いのではないかと思われるSlickですが、今回比較したライブラリの中で唯一JQueryを使用しているので、その分遅くなっちゃってるんじゃないかと個人的前評判からの測定です。
公式サイト：https://kenwheeler.github.io/slick/

結果
・スコア：98
・転送サイズ：50.6KB
・リクエスト数：7

もっとJQueryが足を引っ張るかと思いましたが、思ったよりも悪くない印象です。

Swiper（非JQuery）

アンチJQueryの方々に根強い支持を集めている（と勝手に思っている）Swiperですが、JQueryを使用していない分アドバンテージがあるのではないでしょうか。
公式サイト：https://swiperjs.com/

結果
・スコア：96
・転送サイズ：143KB
・リクエスト数：11

個人的にはSlickに負けることは無いだろうと思っていたので、この結果は驚きでした。リクエスト数、転送サイズも飛びぬけて多い印象です。

Flickity（非JQuery）

比較的後発のライブラリですが、HTML内にdata属性を追加してあげるだけで実装できるという簡便さもあり、今後最も熱いのではないかと踏んでいるライブラリです。
公式サイト：https://flickity.metafizzy.co/

結果
・スコア：99
・転送サイズ：17.5KB
・リクエスト数：5

転送サイズが圧倒的に小さく、スコアも伸びました。

CSSのみで実装

IE非対応のプロパティ「scroll-behavior」と今まで使い処が分からなかったプロパティ「scroll-snap-type」を使用した例です。
IEを捨てる覚悟があればCSSだけで実装してみるという判断もあるかもしれません。
参考サイト：https://css-tricks.com/css-only-carousel/

結果
・スコア：100
・転送サイズ：1.6KB
・リクエスト数：1

当たり前ですが圧倒的な結果を残しました。infinite的な挙動ができない等制限はありますが、CSSの理解に自信があり、挙動的に許すのであれば選択肢に入れて良いと思います。

総合評価

JQueryを使用しているSlickの結果が一番悪くなるだろうという予想で計測を始めましたが、以外にも最も悪影響の大きいライブラリはSwiperでした。
当然、外部のライブラリを使用しないという手段が最も悪影響が少ないですが、時間的コスパを考えるとFlickityが圧倒的にバランスが良いと感じました。
CSSだけで実装する方法も、メインビジュアル的に使用するのではなく、例えば商品の一覧やレコメンドを横スクロールで見せるという程度の要件であれば十分に検討の余地があると思います。

別の角度から、ライブラリの比較ではなく「カルーセルライブラリそのものに対する是非」という意味では、1点2点の削減が必要なミッションを課せられない限りは使用をためらる必要はないという結果になりました。
もちろん、カルーセルを使用することで「画像の点数」は増える傾向になりますので画像のPreloadや容量の低減、レイアウトシフト対策などが必要にはなってくるでしょう。

思い付きから始めた調査でしたが、個人的には有意義な結果が得られたと思います。