CDNとレンタルサーバー読み込みどっちがいい?

Javascriptライブラリの読み込みCDNとダウンロードを検証

Planet20xxPC用バナー Planet20xxモバイル用バナー

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

CDNとは

CDNとサーバーの読み込みイメージ

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

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

CDNサーバー 各社比較

CDNのパフォーマンス速度を表したグラフ
CDNのプロバイダ稼働時間を計測したグラフ

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

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

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

CDNパフォーマンス比較

CDNパフォーマンス順位ラム稼働時間順位
CDNetworks25.79ms185.22%20
jsDelivr CDN37.99ms298.69%1
Cloudflare CDN46.72ms396.07%10
Azure CDN58.04ms497.35%6
Google Cloud CDN61.97ms597.58%4

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

つながらないのは困るから、ラムの稼働時間も重要
AzureとGoogleは大手だけあって、安心感があるね

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

メリット

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

デメリット

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

まとめ

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

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

ラム稼働時間85.22%は不安。スピードとるか安定とるか…。

いかがだったでしょうか?CDN読み込みは負荷の分散になることでサイト表示が速くなる反面、サーバーに不具合があると読み込めないといったリスクがあります。結局のところ、自分のサイトの環境にあわせて使い分けるのがいいのかなあと思います。

以上、jsファイルの読み込みレポでした( ´ ▽ ` )ノ

【関連記事】

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP