ハイパフォーマンスWebサイト

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

主にフロントエンドで出来る負荷軽減の方法。javascriptはソースの最後の方に持ってくるなど今すぐ試せることも多い。ロジックやデータベースの最適化などの前に試すことはあるよという感じ。

1章 ルール1:HTTPリクエストを減らす

複数のJavascriptファイルの結合や、CSSスプライトによって画像ファイルをまとめたり。

2章 ルール2:CDNを使う

Contents Deliverly Networkの使用。本当に大規模なサイトじゃないと難しいかも。

3章 ルール3:Expiresヘッダを設定する

ファイルの賞味期限（いつまでキャッシュするかを）を延ばす。

4章 ルール4:コンポーネントをgzipする

ファイルの圧縮。CSS、jsファイル、HTMLファイルに効果有。ただし、画像やPDFは圧縮してはいけない。

5章 ルール5:スタイルシートは先頭に置く

Headの中に。Googleはこれに加えて、CSSの縮小まで行ってる。

6章 ルール6:スクリプトは最後に置く

7章 ルール7:CSS expressionの使用を控える

CSSプロパティを動的に設定するものらしい。知らんがな。

8章 ルール8:JavaScriptとCSSは外部ファイル化する

外部CSSファイルはキャッシュされる。再利用も出来る。ページビューが少ない場合は、インラインの方が有利。

9章 ルール9:DNSルックアップを減らす

よく分らなかった。

10章 ルール10:JavaScriptを縮小化する

コードの縮小化は、ファイルサイズの削減とロード時間の短縮になる。難読化はそれ以上の効果があるが、リスクがある。gzip圧縮と組み合わせるとさらに短くなる。CSSはあまり効果がない。それよりもCSSを最適化することが重要。

11章 ルール11:リダイレクトを避ける

リダイレクトは表示を遅くする。リダイレクトは避ける。

12章 ルール12:スクリプトを重複させない

同じjsファイルが二度読み込まれていないか確認する。

13章 ルール13:ETagの設定を変更する

ローカルにキャッシュされているものが、サーバーにあるオリジナルと同じものか検証する仕組みらしい。

14章 ルール14:Ajaxをキャッシュ可能にする

Ajaxを使えば、早くなるとは限らない。あとで読み直す。

15章 米国トップ10サイトの分析

FirefoxのAddonであるYSlow(Firebug依存)を使うと簡単に解析が出来る。

ちなみにこのページの評価は以下のとおり。

D	1. Make fewer HTTP requests
F	2. Use a CDN
F	3. Add an Expires header
A	4. Gzip components
B	5. Put CSS at the top
D	6. Put JS at the bottom
B	7. Avoid CSS expressions
B	9. Reduce DNS lookups
F	10. Minify JS
A	11. Avoid redirects
A	12. Remove duplicate scripts
F	13. Configure ETags