webサイト高速化の方法をまとめた。制作者やクライアント側でできることのみに絞って調べたので、サーバ側についてはまた別の機会にまとめる。以下は実際に自分で計測したわけではなくて、確実に早くなると言えるわけではないけど知識として知っておくと役立つかもしれない内容。環境によって効果が出たり出なかったりすると思う。
・画像の数を減らすか使わない
CSS spriteで複数画像をまとめてサーバへのリクエスト回数を減らすか、CSSで装飾する。画像を使うなら圧縮してファイルサイズを減らす。
・ファイルの外部化
CSS、JSはhtml内に直接書くのではなく、別ファイルにして読み込んで使う。外部化されたファイルはブラウザでキャッシュされるので二回目以降はキャッシュされたものが使われる。
・不必要なものを削除
JavaScriptとCSSを圧縮・軽量化するオンラインツール集を使うなどして改行や空白などの不要なものを削除する。でもメンテナンスが難しくなるのでメンテナンス方法を考えないといけない。
・キャッシュ
キャッシュマニフェストファイルでブラウザのキャッシュを制御してどのファイルをキャッシュするかを明示する。どちらかというとモバイル向け？対応していないブラウザもあるけどWebKitブラウザなら大丈夫。キャッシュの問題点は内容が更新されていないけどなんで？と社内外から問い合わせがくること。
・JSファイルの読み込み、実行のタイミング
JSの解析でページの読み込みが止まるのを防ぐために</body>タグの直前で読み込む。もしくは非同期で読み込むライブラリを使う。自分でやるならdocumentの読み込みが完了したら<script>タグを動的に生成して読み込む。
・CDNから読み込む
うまく説明できないけど、データ配信に最適化されたネットワークからデータを読み込むと無駄な通信時間が発生しない。googleが各種ライブラリをホストしてるのでそこから読み込むといいよ。
・ライブラリの性能
同じライブラリでも書き方によっては処理にかかる時間が違う。jQueryの場合だとこうらしい。いろいろ抽象化しすぎて結局はプレーンなJSが一番いい、ということもある。
・CSSセレクタの書き方
セレクタは右から左に解析されるらしいので、余計なセレクタは書かずに極力短くする。
いろいろあるけど、高速化はサーバとの通信回数とデータ転送量を減らすことだと思うので、画像の削減やキャッシュは効果的！あとはfacebookやtwitterのプラグインを読み込むとやっぱり遅くなるからあまりいろいろ置かないほうがいい。
参考：
Web ページを高速化する
