jsファイルの読み込みはCDNとダウンロードどっちがいい？

PagespeedInsightでスコア改善を図っていると、必ず出てくるJavascriptライブラリの読み込み。表示速度がちょっとでも速くなるなら、当然対応しなくちゃいけませんよね。そうなるとCDN読み込みとレンタルサーバー読み込みって、どっちがいいの？ってなったので、比較してみました。同じ疑問を持ったなら、ご一読ください。
( ´ ▽ ` )ﾉ

【INDEX】－目次－

CDNとは
CDNサーバーの比較
CDNのメリット・デメリット
結局どっちがいいかまとめ

CDNとは

CDNとはContents Delivery Networkの略で、ファイルや画像といったWEBコンテンツを配信するために最適化されたネットワークのことです。サーバーが世界各地に分散していて、アクセス元から一番近くのサーバーへ接続するため、最適なパフォーマンスを訪問者に提供することができます。

jsファイルを実行するにはCDNを利用する以外に、予めダウンロードしたファイルをレンタルサーバーに設置して使用する方法もあります。CDNが不安定な場合や、つながらない場合でも安定して読み込むことが出来ますが、レンダリングの際に自分サーバーへの負荷が集中してしまうため、Pagespeedinsightの改善できる項目に該当してしまいます。

CDNサーバー　各社比較

※画像をクリックすると拡大出来ます。

そんな数あるCDNですが、各社CDNのパフォーマンスをCDNPerfで調べることができます。CDNPerfは、世界中のユーザーからのRUM（Real User Metrics）データに基づいて、毎日3億件のデータを分析しているサイトです。

そこで実際に、アジア圏におけるCDNパフォーマンスを表にしてみました。パフォーマンスとは、ユーザーがCDNから500バイトのイメージをダウンロードするのにかかった時間、ラムはCDNプロバイダーの稼働時間を示しています。

CDNパフォーマンス比較

CDN	パフォーマンス	順位	ラム稼働時間	順位
CDNetworks	25.79ms	1	85.22％	20
jsDelivr CDN	37.99ms	2	98.69％	1
Cloudflare CDN	46.72ms	3	96.07％	10
Azure CDN	58.04ms	4	97.35％	6
Google Cloud CDN	61.97ms	5	97.58％	4

※Azure CDNはマイクロソフト、Cloudflare CDNはCDNjsです。

つながらないのは困るから、ラムの稼働時間も重要

AzureとGoogleは大手だけあって、安心感があるね

CDNを利用するメリット・デメリット

メリット

負荷の分散および通信速度向上が見込める
自分のサーバーにjsファイルを設置する必要がない
他のサイトでキャッシュされている可能性がある

デメリット

CDNサーバーに不具合があると読み込めない
オフラインだと動作しない

IT系、Webに特化した転職なら

IT系のエンジニア、Webデザイナーの方々向けに特化したエージェント型の転職サービス。独立支援も展開

まとめ

CDNでのjquery読み込みは、大手で高速かつ安定していることから「Google Cloud CDN」がおススメです。ただGoogle Cloud CDNはライブラリ数が少ないので、ほかのjsファイルの読み込みはCDNjsやjsDelivrを利用するか、ダウンロードしてサーバーに設置して利用するかになります。

うちのサイトではLightboxファイルの読み込みを、jsDelivrが優秀だったので乗り換えようかと思ったのですが、jsファイルがあってもcssがなかったりと揃わないので断念しました。自分サーバーも貧弱なので、結局CDNjsを利用してます。