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

O'REILLYから出ているハイパフォーマンスWebサイトを読んでいる。

サイトを高速にする14個のルールが章ごとにわかりやすく書かれている。

あんまりWebサイト構築したことないからかなり勉強になる。

まず最初に結構びっくりする内容があったのでメモがてら書いておく。

・レスポンスにかかっている時間のほとんどはフロントエンドでの処理である
高速にするという作業は、DBのインデックスチューニングであったり、
レスポンスのアルゴリズムといったことに考えがいきがち(少なくとも私は)だが、
実際には8-9割がフロントエンドの処理に費やされている。
つまりブラウザに表示する時間がかかっているということ。

高速なサイトを実現するためには、ブラウザでの処理を高速化させることが重要だとおいうことらしい。

読んで良かったところを抜粋しておく。

1章 HTTPリクエストを減らす
・イメージマップやCSSスプライトを利用して画像をまとめる
・スクリプトやスタイルシートを結合する
・ファイルをまとめてリクエスト数を減らす

>なるほどという感じ。
とにかく1リクエストにかかるオーバーヘッドはかなりのものらしい。


3章 Expiresヘッダを設定する
・クライアントにキャッシュさせるようにHTTPヘッダにExpiresを設定させる
・ファイル名にバージョンをつけることで変更をブラウザに認識させる

>クライアントにキャッシュさせるっていうのは当たり前な気がしていたが、
ファイル名にバージョンつけて変更を通知するっていのは賢い。
たしかニコニコ動画がそうやってるって何かに書いてあった。


5章 スタイルシートは先頭に置く
・最後に置くとスタイルシートが読み込まれるまで表示されない
6章 スクリプトは最後に置く
・スクリプトが読み込まれている間はレンダリングが中断される

>外部ファイル関係。
レンダリングが逐次実行されることで、見ている人のストレスが低くなるらしい。
レンダリングが中断されないようにするためには
スタイルシートは先頭にスクリプトは最後に置くのが吉とのこと


Webやっている人には当たり前のTipsだったりするんですかね。
あーWebやりたいす。