jQueryのCDNはどこを使うべきか検討してみた

2018.11.02
2019.01.24
Webスキル

よこのじ（@yokonoji_work）です。

別記事のCDNとは何か？そのメリットも調べてみたでCDNの仕組みをご紹介しました。今回はjQueryとのCDNはどこのを使うべきか？という視点でまとめてみます。

1. 重きをおく選定ポイント
2. jQueryのCDN
- 2.1. 選んだ理由
3. jQuery UIとjQuery Mobile
- 3.1. jQuery UIとは？
- 3.2. jQuery Mobileとは？

重きをおく選定ポイント

CDNを利用するメリットにブラウザキャッシュによるページ表示速度の高速化があります。

自身のサイトで、例えばGoogleのCDNからjQueryを読み込ませていた場合、閲覧者が訪問前に別サイトで同じくGoogleのCDNからjQueryを読み込んでいれば、ブラウザにそのデータが残っているので再利用して読み込みを省略できるというものです。

よって、他のサイトでも使われているであろう提供元であることに重きをおきました。

jQueryのCDN

私はGoogleが提供するCDNを利用することにしました。
Google Hosted Libraries

選んだ理由

私がGoogleのCDNに決めた過程です。

jQuery公式サイトのダウンロードページでは、StackPathというCDNプロバイダーが紹介されており、「その他のCDN」という形で下記のプロバイダーが紹介されています。

Google CDN
Microsoft CDN
CDNJS CDN
jsDelivr CDN

「jQuery CDN」で検索した結果の上位サイトを見てみると、StackPath、Google、Microsoftの利用を勧めていることが多いようです。昔はCDNJS CDNとjsDelivr CDNからの提供がなかったか、公式サイトに記載されていなかったのかもしれません。

そういうわけで、StackPath、Google、Microsoftの利用が多いと考えられます。

次にCDNPerfというサイトでQUERY SPEED（応答速度）を確認してみました。

StackPath CDN　　56.75 ms
Google Cloud CDN　42.05 ms
Azure CDN　　　　38.90 ms※

※上記Microsoft CDNとAzure CDNはどちらもMicrosoftの提供ですが、品質レベルが異なります。Microsoft CDNは有料のAzure CDNより劣ると思われますが、参考として記載しておきます。

Microsoftは不明瞭なので、ここで候補から外します。GoogleとStackPathでは、StackPathがやや劣るように見えます。とはいえたった10msですし、公式に紹介されているCDNでキャッシュが効く確率が高そうなのがStackPathです。

GoogleとStackPathのキャッシュ期間を見てみます。

こちらはGoogle ChromeのデベロッパーツールでHTTPヘッダーのcache-control（キャッシュ規定を指定するもの）を確認したものです。ここで設定されているmax-ageは、この秒数の間キャッシュが有効であり読み込みなしで再利用して良いということを表しています。

HTTPヘッダーは、デベロッパーツール > Network > Name欄より対象ファイルを選択 > Headers で確認できます。今回はjQuery3.3.1で確認しました。

31536000秒は365日です。これだけ長いキャッシュ期間があるのであれば、過去に自身のサイトか他のサイトでキャッシュしてくれているように思えます。

つまり・・・GoogleとStackPathどっちでも良いよね、という結論です。Googleの方が少し早く、馴染みもあるということでGoogleを選択しました。しかし、StackPathはBootstrapが公式サイトでcssとjsの提供元として紹介しているCDNでもあります。信頼できるCDNプロバイダーであることは間違いなさそうです。お好みで選んでも問題はないでしょう。