CDNでウェブサイトを高速化するためのまとめ

CDNでウェブサイトを高速化するためのまとめ

Posted at June 13,2012 12:55 AM
Tag:[CDN, Google]

CDNでウェブサイトを高速化するためのまとめです。

「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。

認識誤り等ありましたらどこかでつぶやいてください。

1.CDNとは

CDNとは「Contents Delivery Network(コンテンツデリバリネットワーク)」または「Contents Distribution Network(コンテンツディストリビューションネットワーク)」のことで(注)、コンテンツを配信するために最適化されたネットワークを指します。

Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス(企業)が著名な商用CDNサービスを提供しているようです。

また、次のページで有料CDNサービスの一覧を確認できます。

上記に商用CDNサービスをざっと紹介しましたが、なじみ深いのはGoogleのCDNサービス「Google Libraries API」ではないでしょうか。

Google Libraries API
Google Libraries API

ということで、以降は「Google Libraries API」について説明を進めます。

Google CDNサービスの具体的な利用方法は、script要素のURLにGoogleで配信するライブラリのURLを指定するだけです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

各ライブラリのURL(=script要素のコード)は、上記ページのリンク先に掲載されているので、そこから取得するか、6項で紹介する「scriptsrc」から取得してください。

2.CDNを利用するメリット

CDNを利用するメリットはタイトルのとおり、ウェブサイトを高速化できる可能性があることです。

同じサイズのファイルでも自サーバから取得するよりも、CDNを利用した方がダウンロード時間が短くなる可能性があります。結果的にウェブサイトの高速化に結びつきます。

また、多くのユーザーが同じファイルを利用することで、ユーザーのブラウザにキャッシュされる可能性も高くなります。

3.フォールバック

CDNサービスを利用することで2項のメリットを享受できますが、CDNサービスが故障した場合、ウェブサイトが共倒れにならないよう、フォールバックを行うことを推奨します。

フォールバックとは、「代替手段への切替」を意味します。

jQueryの場合、次の2行目の指定を行うことで、(1行目で)CDNサービスからコンテンツを読み込めなかった場合でも、自サーバのコンテンツを読み込むことができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>

4.バージョンの省略指定

Google CDNサービスでは、バージョンの指定を省略することで、最新バージョンを取得することができます。

次のように「1.7」を指定すれば、2012年6月現在の最新バージョン「1.7.2」を取得できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

次のように「1」を指定しても、2012年6月現在では「1.7.2」が取得できますが、「1.8」がリリースされれば「1.7」指定よりさらに最新のバージョンが取得できるはずです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

ライブラリの最新バージョンで動作確認を行いたい場合などは、この指定方法がよいでしょう。

5.バージョン指定によるキャッシュの違い

4項ではバージョン指定を変更することで最新バージョンを取得できる方法を紹介しましたが、マイナーバージョンを指定しないとキャッシュが短くなります。

具体的には、jQueryの場合では「1.7.2」を指定すれば1年キャッシュされますが、「1.7」や「1」を指定すると、24時間しかキャッシュされません。

以下はFirefoxのLive HTTP Headersを使ってキャプチャしたバージョン別指定のHTTPリクエスト・レスポンスです。

「1.7.2」を指定

GET /ajax/libs/jquery/1.7.2/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Thu, 07 Jun 2012 06:25:13 GMT
Expires: Fri, 07 Jun 2013 06:25:13 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Cache-Control: public, max-age=31536000
Age: 461047

「1.7」を指定

GET /ajax/libs/jquery/1.7/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 14:00:22 GMT
Expires: Fri, 08 Jun 2012 19:40:33 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 1891
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

「1」を指定

GET /ajax/libs/jquery/1/jquery.min.js HTTP/1.1
Host: ajax.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.0; rv:13.0) Gecko/20100101 Firefox/13.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
 
HTTP/1.1 200 OK
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Type: text/javascript; charset=UTF-8
Last-Modified: Thu, 29 Mar 2012 18:19:50 GMT
Date: Tue, 12 Jun 2012 13:51:32 GMT
Expires: Fri, 08 Jun 2012 19:39:52 GMT
x-content-type-options: nosniff
Server: sffe
Content-Length: 33673
x-xss-protection: 1; mode=block
Age: 2455
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=3600

また、最新バージョンを取得することで互換性がなくなる可能性もあります。

よって、運用で利用する場合は末端のマイナーバージョンまで指定することを推奨します。

6.CDNのscript要素を簡単に取得できる「scriptsrc」

最後に、Google CDNサービスのscript要素を簡単に取得できる「scriptsrc」を紹介します。

scriptsrc
scriptsrc

Windowsの場合、「copy」をクリックすればscript要素(最新マイナーバージョン指定)がクリップボードにコピーされます。

scriptsrc

これを利用すればscript要素を手入力したり、どこかのサイトからコピーする必要がなくなります。

7.参考サイト

参考サイトは下記です。ありがとうございました。


注:「Contents Delivery Network」が一般的なようですが、Google Libraries API - Developer's Guideの説明には、「content distribution network」と記載されています。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

jQueryをCDNから読み込む方法をまとめてみた from シロのITメモ
色んなブログで色々紹介されているが、 自分なりにシンプルにまとめてみた。個人的には、こうなる。 <script src="//aj... [続きを読む]

Tracked on July 20, 2012 10:03 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)