【Webサイト】サイトの高速化（CDNの利用、キャッシュ期間の延長）

　
自分のサイトを早くしてるよー。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

この本を読んでるよ。

jQuerファイルの読み込みにCDNを利用する

jQuery などのライブラリ読み込みは、スケールされたサーバの CDN を利用することで高速化が期待できる。

■変更前

<script src="js/jquery.min.js" type="text/javascript"></script>

■変更後

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

　
jQueryのCDN利用は、マイナーVerまで指定するとキャッシュ期間が延長される。

マイナーバージョンを指定しないとキャッシュが短くなります。
具体的には、jQueryの場合では「1.7.2」を指定すれば1年キャッシュされますが、「1.7」や「1」を指定すると、24時間しかキャッシュされません。

http://www.koikikukan.com/archives/2012/06/13-005555.php

jQueryセレクタの変数化

var no1 = $("#anime1");
var no2 = $("#anime2");

　
あと、jqueryのDeferredメソッドをくくりだして見やすくした。
　
■変更前

.then(
  function(){
    return jQuery.Deferred(function(dfd) {
    setTimeout(function() {
      $("#anime1").show();
     dfd.resolve();
    }, 1000);
   });
  }
).then(
  function(){
   return $("#anime1").animate(
    {marginLeft: left_a + "px",
     marginTop: top_a + "px",
     opacity: 1}, 500, 'swing'
   )
}

　
■変更後

dfd.then(
	function(){return anime(show, 1000, no1);}
).then(
	function(){return anime(slide, 0, no1);}

JavaScript の関数渡しがようやく分かってきた感じ。
詳しくはGitHubを見てね

GAEでのキャッシュ期間の設定

変更のない、画像ファイルについてはキャッシュ期間を延ばす。

expiration
このハンドラで処理する静的ファイルをユーザーのブラウザにキャッシュする期間です。

https://developers.google.com/appengine/docs/python/config/appconfig?hl=ja

- url: /img
  static_dir: com/img
  expiration: "2d"

■実行結果

ほぼ更新はないのだから、"365d"みたいに長期間でもいいと思うけど、
ずっとキャッシュを見続けるといわれると心配にもなる。
将来にわたって「ひび」画像を変えないとは言い切れないし。。

ファイル名にバージョンを付加することでキャッシュの期間を1年にしつつも
変更があった場合は即反映できる（ファイル名自体が変更されるから）けど
そこまでやるのはちょっと大変。

Adobe Edge フォント(Webフォント）をローカルに保存

今はこのようにCDNを利用している。

<script src="http://use.edgefonts.net/rammetto-one:n4.js" type="text/javascript"></script>

でも、キャッシュ期間が指定できない。
Adobeサイトを確認したけれど
やっぱりキャッシュの期間の変更は出来ない

　
字体なんてそんなに変更がないし、他のサイトと被る率も低い
（他サイトですでに利用していることによるキャッシングが期待できない）
ので、ローカルでjsを保持して、キャッシュ期間を設定する方針で行こう。

でもローカルでjsを保持すると、「異なるホストからのダウンロード」ではなくなり、
その結果並列読み込みが出来なくなってしまって、初回表示が遅くなるかも・・？

明日ためそう。

おやすみなさい。
　
　

おまけ。

レスポンスヘッダにCache-controlヘッダをつける

無料版では出来ないみたいだ。

Google App EngineでCache-controlヘッダーを使うと、インスタンスの使用率を劇的に改善することが可能です。
ただし、Paidサービスでしか利用できません。Billingを有効にしてない無料版では使えません。

http://java.akjava.com/gae/cache-control

ざんねん。