CDNでウェブサイトを高速化するためのまとめです。
「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。
認識誤り等ありましたらどこかでつぶやいてください。
1.CDNとは
CDNとは「Contents Delivery Network(コンテンツデリバリネットワーク)」または「Contents Distribution Network(コンテンツディストリビューションネットワーク)」のことで(注)、コンテンツを配信するために最適化されたネットワークを指します。
Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス(企業)が著名な商用CDNサービスを提供しているようです。
また、次のページで有料CDNサービスの一覧を確認できます。
上記に商用CDNサービスをざっと紹介しましたが、なじみ深いのはGoogleのCDNサービス「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」を紹介します。
Windowsの場合、「copy」をクリックすればscript要素(最新マイナーバージョン指定)がクリップボードにコピーされます。
これを利用すればscript要素を手入力したり、どこかのサイトからコピーする必要がなくなります。
7.参考サイト
参考サイトは下記です。ありがとうございました。
注:「Contents Delivery Network」が一般的なようですが、Google Libraries API - Developer's Guideの説明には、「content distribution network」と記載されています。