「続・ハイパフォーマンスWebサイト」を読んだ

frontend

http://www.oreilly.co.jp/books/9784873114460/
PDF版を買って読みました。

※経緯１：PVを増やす対策のひとつとして、知っておいた方が良いと思ったので。
「Yahoo!: 0.4秒遅くなると、ページのトラフィックが 5 〜 9 % 落ちます。」
（ref. http://www.slideshare.net/xcgfly2sky/velocity-wpo20101207-stevesouders
「ハイパフォーマンスWebサイト」本著者の発表スライドより）

※経緯２：先日、body閉じタグ前にインラインスクリプトを置くべきか、すべて外部ファイル化するべきか、で意見が割れて、１０分くらい問答になったことがあり。デプロイが半手動で（PHP系はrsyncでリリース、staticコンテンツはFTPでupしてからrsync）、１日１０回くらいそのリリース作業を普通にやったりしているので、全部外部ファイル化して手動デプロイすることは、無理なのです。デプロイの自動化というテーマがまず先にあって、これが自作で作ろうとすると一手間で。。。


で、担当サイトのHTTPウォーターフローを分析したのですが、「これをやったら劇的に改善できる」というようなポイントは、無かった・・・。いろんな項目が「ちょっとずつ」悪くて（サーバサイドの処理時間、ファイル本数、画像最適化、etc）、それらの総体として、「速くはないな」という状態でした。地道に積み上げるしかない。


これから試してベンチを取ろうと思ったことメモ。
1. キャッシュの見直し

サーバサイド。アプリケーションキャッシュ設計が最適化されているか、全体的に見直す。
jQueryのAjaxを使っているところは、jQueryのキャッシュオプションを効かせる。

2. 非同期ロード

script dom element を使ってみる。

 var ga = document.createElement('script');
 ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ?
    'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(ga, s);

このようにスクリプト生成すると、ブロックされない。おなじみgoogle analyticsコードでの実例。

http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/
http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Twitterも使っているらしいLAB.js。
http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/loading-and-blocking-javascript-labjs/
Lab.jsは、部分利用用途ではないもよう。やるなら全部これに置き換えたいので、新規で何か作る機会があった時に使ってみたい。

3. FirstByte

日本語版の特別付録で付いていた、Yahoo!Japan の事例で、そんなやり方があったのかと思った。headタグだけ先に出力フラッシュする。headタグ内に書かれた内容の解析をブラウザがページロード待ちの時間を使って先にやってくれるケースがあるというもの。まあでもここまで凝ったことは普通やらなくて良いかもしれない。

    • -

メモ１：chrome と FF で計測結果をhar形式で保存できる。保存結果を後から har viewer で見ることもできる。
http://weble.org/2012/04/24/network-export
メモ２：リクエスト本数を削る、という意味で、CSSもUnifyした方が良い、ということを↓このスライドを見て思い出した。
http://www.slideshare.net/DeNA_open_events/frontend-optimization-denacreativeseminar
メモ３：この分野の素晴らしいまとめが。
http://d.hatena.ne.jp/absj31/20120929/1348929687