JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話
JavaScriptのCDN※といえば、Google Hosted Librariesあたりが有名でしょうか。
うちの会社では業務系のWebシステムをメインに扱っているため、たまに一般向けサイトの案件が持ち込まれるとデザイン部分は専門の会社に外注しているのですが、この前納品されたHTMLを見たら、普通にGoogle Hosted Librariesのコードが含まれていて驚きました。納品物に使われるくらいメジャーになっているんですねえ。
Google Hosted Librariesは快適だが数が少ない
そんな便利なCDNのJavaScriptライブラリですが、Googleで配信されているのは鉄板の有名どころに限られているため、17個くらい。※2018年12月現在
画像を拡大表示する際によく使われるLightbox（このブログではLity）や、スライド表現によく使われる FlexSlider や BxSlider などはGoogleでは配信されていないのです。
cdnjsなら3000以上のJavaScriptライブラリがある
cdnjsはオープンソースコミュニティで運営されているCDNサービスで、3,000を超えるJavaScriptライブラリを配信しています。※2018年12月現在
https://cdnjs.com/
スポンサーにCLOUDFLAREが入っており、サーバーも同社のものを使っているため、GoogleやMicrosoft等の超優良企業がホストするCDNと比べると信頼性が一段劣るのは否めません。
実際、4～5年くらい前だったか、ぼく自身もCLOUDFLAREは使っていたのですが、たまに…月1回数分から一番ひどいときで数十分程度だったと思いますが…ともかく、気がつくと落ちていることがあり、あんまり信頼性が高くないなぁと思い使うのをやめました。
ただ、それからずいぶん時間が経っていますし、利用者数も増え、ここ最近は安定しているようです。
CDNサービスの安定性の調べ方
CDNPerfというサイトが便利です。
https://www.cdnperf.com/
RUM UPTIMEという手法を取っているそうで、UPTIME（＝稼働時間）はわかるのですが、RUMってなんじゃろ、と調べてみたら Real User Metrics の略だとか。
つまり、機械的に（pingを送ったりhttpリクエストしたりして）稼働時間を計測するのではなく、実際のユーザーがブラウザで閲覧した状態を計測してパフォーマンスや稼働時間を計測しているのだとか。
計測サーバーみたいなのを用意すると常に同じ回線、同じ手順になっちゃいますから、実際のユーザーからのデータを収集するというのは統計情報として信頼性が高いでしょう。しかもその数は世界中で1日300万以上。マジかよ。誰がどうやってそんなユーザー集めてるんだよ、と思いますが、まぁそこは本筋と関係ないのでスルーしておきます。
ともあれ、このCDNPerfによると2018年11月の統計はこんな感じです。
■パフォーマンス比較
| Google Cloud CDN | 37.50ms |
| Azure CDN | 40.00ms |
| Cloudflare CDN | 42.60 ms |
| jsDelivr CDN | 37.70ms |
■稼働時間比較
| Google Cloud CDN | 98.87％ |
| Azure CDN | 98.82％ |
| Cloudflare CDN | 98.82％ |
| jsDelivr CDN | 98.92％ |
ん……んん？！
Cloudflare(cdnjs)はGoogleに比べるとわずかに遅いけど、Azure(Microsoft)と同等レベルですねー、という論調で記事を進めていこうと思っていたのですが、jsDelivrが思ってたよりすごくてびっくり。11月以外の月の統計情報を見ても同じような結果です。
あれれぇ… うちで使っているcdnjsのコード、jsDelivrに変えようかな…。
jsDelivrは2012年でProspect Oneという会社で開発されたCDNサービスで、cdnjsと同じくオープンソースで提供されています。
https://www.jsdelivr.com/
ライブラリの総数はちょっとよくわからなかったのだけれど、軽く検索した感じではLightbox、Lity、Flexslider、BxSlider等の人気どころは網羅しているし、cdnjsより多いかもって言う人もいるくらいなので数は問題なさそう。
バックボーンはcdnjsと同じくCLOUDFLAREも使っているのだけれど、StackPathやfastlyというCDNも使っていて、要するにマルチCDNサービスという仕組みみたい。だからUPTIMEも長く、読み込み速度も早いんですかね。
なんか名前の覚えやすさからcdnjsばかり使っていましたが、今後はjsDelivrも試してみたいと思いました。
世界の速度なんか知らん。自分とこでどうか知りたい。
という人向け？にJavaScriptの読み込み速度を計測するPHPスクリプトを書いてみました。
（言い回しはややこしいけど、コードは簡単）
<?php
checkLoadTime('jQuery本家', 'https://code.jquery.com/jquery-3.3.1.min.js');
checkLoadTime('Google', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
checkLoadTime('Microsoft', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js');
checkLoadTime('cdnjs', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
checkLoadTime('jsDelivr', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js');
function checkLoadTime($title, $url, $max = 5) {
$total_time = 0;
for ($i = 0; $i < $max; $i++) {
$start_time = microtime(true);
file_get_contents($url);
$total_time += (microtime(true) - $start_time);
}
//試行回数の平均値を表示
echo '<span style="display:inline-block;width:100px;">'.$title.'</span>';
echo number_format($total_time / $max, 4).'秒<br>';
}
?>なんのことはなく、file_get_contentsで5回ずつ読み込んで、かかった時間の平均値を表示しているだけです。
ちなみに我が家の環境で上記のPHPスクリプトを実行するとこんな感じ。
| jQuery本家 | 0.5876秒 |
| 0.0765秒 | |
| Microsoft | 0.2825秒 |
| cdnjs | 0.0824秒 |
| jsDelivr | 0.0480秒 |
平日の昼間に測定したのですが、時間帯によっても変わってくるでしょう。
なお、レンタルサーバー上にJavaScriptを設置した場合はどうなるかというと、こんな感じ。
バリューサーバー
 | 0.1487秒 |
mixhost
 | 0.1468秒 |
格安レンタルサーバーの場合はCDNサービスのJSライブラリを使ったほうが良さそうです。
（jQuery本家とMicrosoftのCDNは除く）
まとめ
とりあえず、jQuery本家とMicrosoftのCDNは考慮する必要もなさそうです。
この中ではやはりjsDelivrが輝いていますね。Googleより早いじゃん…。
レンタルサーバーについては月額1000円以下の格安プランを契約していることもあり、まぁ、微妙です。DNSのリクエスト回数が減るというメリットはあるので、もっと良いレンタルサーバーを借りている人は自分のとこにJSライブラリを置いたほうが良いでしょう。
GoogleさんもDNSリクエストは少なければ少ないほど良いとおっしゃっていますしね。
ぼくのように格安サーバーを誤魔化し誤魔化し使っている方はいっそのことjsDelivrにまとめてしまうのも手かも。
