CDNでウェブサイトを高速化するためのまとめ: 小粋空間

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

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

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

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

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

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

１．CDNとは

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

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

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

最適なＣＤＮサービスを手早く導入しよう

上記に商用CDNサービスをざっと紹介しましたが、なじみ深いのはGoogleのCDNサービス「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要素のコード）は、上記ページのリンク先に掲載されているので、そこから取得するか、６項で紹介する「scriptsrc」から取得してください。

２．CDNを利用するメリット

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

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

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

３．フォールバック

CDNサービスを利用することで２項のメリットを享受できますが、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>

４．バージョンの省略指定

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>

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

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

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

具体的には、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

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

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