MS Access Tips/Sample and VBA and Blog customize etc...

CDNサービスのレスポンスを計測してみた

タイトル画像

WEBページでよく使われるファイルを配信するCDNサービスはいろいろありますが、どれを使ったらいいのか迷いますよね。そこで、各サーバーのレスポンスを計測してみました。

計測したCDNサービスとファイル

下記の有名なものと本家のものをリストアップしてみました。

Open Source Software CDN
Open Source Software CDN by MaxCDN

Microsoft CDN
Microsoft Ajax Content Delivery Network | The ASP.NET Site

Google CDN
Hosted Libraries  |  Google Developers

CDNJS CDN
cdnjs.com - the missing cdn for javascript and css

jsDelivr CDN
jsDelivr - Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more

jQuery CDN
Download jQuery | jQuery

Font Awesome CDN
Get Started with Font Awesome

Bootstrap CDN
Bootstrap CDN by MaxCDN

CDNを使用せずにブログにアップロードしたファイルも比較のために計測しました

ダウンロードしたファイルは、当ブログで使用している下記のもの。現時点(2015/08/20)での最新バージョンです。

ファイルタイプバージョン
Font Awesomecss4.4.0
jQueryjs2.1.4
jQueryjs1.11.3
jQuery Migrate Pluginjs1.2.1

測定方法

下記のようなHTMLファイルを作成してサイト(ブログ)にアップロードしてブラウザで開く。

最新jquery2.x の場合

上記のページヘアクセスしてブラウザ付属のツール(またはプラグイン)を使用して、レスポンスを計測します。

IE(Egde)の場合

F12押下で、F12開発者ツールを起動します。
[ネットワーク]タブをクリック。
コンテンツの種類で[スクリプト]にチェック。
ツールバーの[常にサーバーから更新する]を選択しておきます。
ブラウザ上でCtrlを押したままF5キー(または右クリック[最新の情報に更新])で更新します。

IE(F12開発者ツール)

Chromeの場合

F12押下で、Developer Tools を起動します。
[Network]タブをクリック。
[Filter]ボタンをクリックして[Script]を選択。
[Disable cache]にチェックを入れる。
ブラウザ上でCtrlを押したままF5キー(または右クリック[再読み込み])で更新します。

Chrome(Developer_Tools)

FireFoxの場合

プラグインのFirebugを事前にインストールしておきます。
F12押下で、Firebugを起動します。
[ネット]タブをクリック。
▼をクリックして[ブラウザキャッシュを無効化]にチェック
[JavaScript]を選択。
ブラウザ上でCtrlを押したままF5キー(または右クリック[再読み込み])で更新します。

FireFox(FireBug)

計測結果

Firebugの結果の画像を提示します。何回か試しましたが、その都度微妙に結果が異なりますので、この画像はあくまでひとつの例です。ブラウザやネット環境にも依存すると思いますので、各自の環境で何度か試して平均を取るなどして判断してください。

jQuery2.1.4
jQuery2.1.4

jQuery1.11.3
jQuery1.11.3

jQuery Migrate 1.2.1
Migrate1.2.1

code.jquery.com と oss.maxcdn.com がほぼ同じ結果なのは、jQuerykのページに、下記の記述があるので、同じMaxCDNのサーバーを使用しているからでしょう。

jQuery's CDN provided by MaxCDN

Font-awesome.css 4.4.0
Font-awesome.css4.4.0

oss.maxcdn.com と maxcdn.bootstrapcdn.com がほぼ同じ結果。これも同じMaxCDNのサーバーのようです。

何回か試してみましたが、MaxCDNのサーバーは常に遅いですね。FC2プログのサーバーより遅いので、これではCDNの意味がないです。本家ということで選択しがちですが、今回の結果からは選択肢からは外したほうがよさそうです。

それ以外のCDNはほとんど差がなく、その都度、順位が入れ替わります。性能としては、ほぼ同じと考えていいでしょう。

CDN選択の基準

第一に、サーバーのレスポンスが良いものを選択すべきですが、MaxCDN以外はほぼ互角と言っていいでしょう。

その場合は、より多くのサイトで使用されているCDNを選択すべきです。複数のサイトを訪れた時、おなじファイルを使用している場合、2回め以降はブラウザのキャッシュを利用する事ができるので、非常に高速になります。

いろいろなサイトで紹介されているCDNリンクは、GoogleCDN が多いように思います。ということから、おそらくGoogleCDN が一番人気でしょう。

ただ、GoogleCDN は、メジャーなものしかなくマイナーなファイルは置いていないです。当ブログで利用しているものだと、jQuery Migrate と Font Awesome がないです。

CDNJS CDN と jsDelivr CD は、マイナーなものまで置いてあります。当ブログで使用している4つのファイルもすべて網羅しています。

複数のCDNを使い分けるのではなく、CDNを統一すると、DNSキャッシュを利用できるという利点があります。

インターネット10分講座:DNSキャッシュ - JPNIC

ということで、下記の2つの選択肢が考えられます。

jQuery2.x(または jQuery1.x)は人気の Google CDN、jQuery Migrate と Font Awesome は、CDNJS CDN または jsDelivr CD を使用。

すべて、CDNJS CDN または jsDelivr CD に統一する。

前者は、ブラウザキャッシュが最大限有効利用できるのが期待できます。後者は、DNSキャッシュが有効利用できるのが期待できます。

私には、ブラウザキャッシュとDNSキャッシュのどちらがより効果があるのか判断できる知識がないので、ファイルサイズの大きいjQueryファイルでブラウザキャッシュが利用できたほうがいいような気がしたので、前者を選択することにしました。

jQuery2.x と jQuery1.x をブラウザで切り替える

jQueryには、IE6/7/8のサポートを切り捨てた2.x系と、 それらのIEもサポートする1.x系の2系統のバージョン(最近3.0)があります。ファイルサイズは2.xの方が10%ほど小さくなっていますし、動作も高速になっています。

当プログのユーザーで、IE8以前のユーザーはグーグルアナリティクスによると8.88%です。10人に1人ということですが、これは無視するには、まだ忍びないですね。そこで、htmlの条件付きコメントで切り替えることができます。

まとめ

最終的に当ブログのCDNからの読み込みのHTMLコードは下記のようになりました。

jQuery は google から、それ以外は、jsdelivr で統一しました。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/475-fe69a149
該当の記事は見つかりませんでした。