彦坂明宏のHatena Blog

いろいろなCMSやBLOGサービスを試しています。

CDNを変えたら僅かに速くなりました

無料のCDN jsDelivr

 

BootstrapやjQueryたちをCDN経由で引っ張ることも多いですよね。このCDNを変えたらちょっとだけ速くなった気がします。

BootstrapとjQueryを標準のCDNで

stackpath.bootstrapcdn.comやcode.jquery.comから

上の図は、かなりショボい共用サーバーをlighthouseで見た模様です。画像なんかも無駄に大きくせず、かつ、webpを使うなどすぐできる軽量化は施し済みです。

そして、ふと、そういえばBootstrap 5はCDNが変わっているのを思い出しました。そう、stackpath.bootstrapcdn…ではなくjsDelivrに。

で、初めてjsDelivrが気になって調べたところ、かなり高速なCDNということが分かりました。しかも、BootstrapやjQueryの本元だけでなくプラグイン類まで範疇にしていると。そこでBootstrapとjQueryをjsDelivrから読み込んでみることにしました。

jQueryをjsDelivrから読み込んだ結果

まずjQueryをjsDelivrに変えてみました

jQuery本体のみをjsDelivrから読み込んでみると僅か1ポイントながら嬉しい結果となりました。ただ、このサーバーはへなちょこ共用サーバーなので「Performance」は厳密な一定値を維持できる代物でもありません。次にBootstrapもjsDelivrにしてみました。

BootstrapもjsDelivrから読み込んだ結果

BootstrapもjsDelivrにしてみました

また1ポイントだけ嬉しい結果が得られました! 劇的には変わりませんが効果ありと言えなくはないですね!!

そして、忘れてはいけません。jQueryプラグインCDNから取ってきていましたので、こいつもjsDelivrにしてみましょう。そうすれば2~3ポイントの効果があるかも知れません。ワクワクしてプラグインもjsDelivrにしてみました。

プラグインもjsDelivrから読み込んだ結果

プラグインを含めて全てjsDelivrに

あれ?やっぱり1ポイントです。90台後半を期待していたのでがっかりです。でも、最初から数えると3ポイント上昇ですから喜びたいですよね。

積極的に喜ぶ方法は簡単です。同じ状態をPageSpeed Insightsの「パソコン」で見るだけです!

 

PageSpeed Insights「パソコン」欄

PageSpeed Insights「パソコン」欄

やった!100点です!! これは喜んで良いと思います。ただし「モバイル」で見ると点数は下がります。

PageSpeed Insights「モバイル」欄

PageSpeed Insights「モバイル」欄

94点です。こういうときは、気持ちをパソコンファーストに切り替えつつタブを「パソコン」に切り替えて一旦パソコンを離れましょう。戻ってきたとき出迎えてくれる「100」の文字がまた再び喜びをくれます!