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

よこのじ(@yokonoji_work)です。

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

重きをおく選定ポイント

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-stackpayh-header

こちらは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プロバイダーであることは間違いなさそうです。お好みで選んでも問題はないでしょう。

jQuery UIとjQuery Mobile

CDNの選択候補にjQuery UIとjQuery Mobileという文字があり、何のことかと困惑しませんでしたか?jQueryを使うだけであれば不要ですが、これらも興味深いライブラリです。

jQuery UIとは?

jQuery UIは、Webサイトにアニメーションやマウスのドラッグ&ドロップの機能を実装できるライブラリです。jQueryに加えて、jQuery UIを読み込むことで利用できます。

こちらのサイトでjQuery UIの一部機能を体験できます。

jQuery【 jQuery UI 】UI の導入と使用方法

jQuery Mobileとは?

jQuery Mobileは、タッチ操作を行うスマートフォン向けのWebサイトの開発が行えるライブラリです。こちらもjQueryと合わせて読み込む必要があります。

例えば、数値を指定するときのスライダー機能はスマホらしい操作方法ではないでしょうか。その他の機能もjQuery Mobile Demosでチェックできます。