jQueryのCDNにGoogleを選んだ理由！表示速度のメリットを考えるならしっかり検討しよう

よこのじ（@yokonoji_work）です。

jQueryは成熟しきった技術ですが、WordPressにおいては未だ必須です。

このjQueryを最適な形で読み込めば、Webサイトにおける売上・コンバージョンを最大化する一つの要素となり得ますので、しっかりと検討するべきだと考えます。

今回はjQueryとのCDNはどこのを使うべきか？という視点でまとめてみます。

CDNの仕組みについては「CDNとは？メリット・デメリットを調べてみた！CSSやJavaScriptライブラリはどう読み込む？」を参考にしてください。

CDNならブラウザキャッシュで高速表示できる

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

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

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

jQueryのCDN読み込みはGoogleがおすすめ

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

GoogleのCDNを選んだ理由

私が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は、この秒数の間キャッシュが有効であり、読み込みなしで再利用して良いということを表しています。

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でチェックできます。

表示速度はWebページの直帰率にも影響しますよ
注目記事：平均値まで下げたい！高い直帰率・離脱率を下げるための改善方法

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

created by Rinker

• Kindle
• Amazon
• 楽天市場