みなさま明けましておめでとうございます。
マカオ行きの旅のおともに持って行ったハイパフォーマンスWebサイトの本のまとめをここに。(どこぞやのbugcloudに頼まれたので。)
この本、2010年頃の出版なので若干情報が古い。ただ、やる事に関しては特に変わりがないので特に問題なし。
ザクっと読んだ印象はHTML5やCSS3が、どうこうではなく、サイトを制作する上で基本的なところをちゃんと押さえる、という感じ。
なのでここには気になった部分だけ書いて行きます。
Javascriptまわりで勉強したい部分が多かった。
大きなまとめは
「フロントエンドを改善していった方が、改善の時間もサイトのレスポンスも早くなるよ」
とのこと。
で、読んだ感じ大きくまとめてザクっと4つ。
1.HTTPリクエストの話
2.Javascriptの話
-JavaScriptを分割して最初のロードを最小限にして、あとから残りのJavaScriptをロードする「遅延ロード」を推奨(これに関してはどのやり方が良い、というのはなく、場合によってやり方を変える、等で紹介されていました。)
その他紹介されていたテクニックもいくつか
-Javascriptはローカル変数の読み書きがもっとも高速
-for-inは遅いので使用しない方が良い
などなど、細かい部分や気になったところは後日載せます。
3.CSSの話
-セレクタはなるべく単純にする。これは個人的にスッキリしている方が好きだったのであまりズラっと書いていなかったけれど、確かに言われてみればセレクタを右から解析して左にいくわけだから、 ズラズラと書いていればいるほど、処理が多くなるな、と。
4.画像の話
1.CDNを使う → CloudFlareとかかな
2.gifはなるべく使わずpng(png8)を使用する。(この方が画像サイズが軽くなるらしい。 )
3.アイコン系やボタン系を一つの画像にまとめbackgroundで配置
4.ツールを使用し、jpgからMETAデータを削除する。
最適化ツール→PNGCRUSH
でもこれは正直web用に保存で十分なのでは？と思うけど違うのかな。
5.favicon(apple iconも)の読み込みは絶対発生するので必ず用意すること
[掲載してあった高速化をする14のルール]
ルール1 : HTTPリクエストを減らす
ルール2 : CDNを使う
ルール3 : Expiresヘッダを設定する
ルール4 : コンポーネントをgzipする
ルール5 : スタイルシートは先頭に置く
ルール6 : スクリプトは最後に置く
ルール7 : CSS expressionの使用を控える
ルール8 : JavaScriptとCSSは外部ファイル化する
ルール9 : DNSルックアップを減らす
ルール10 : JavaScriptを縮小化する
ルール11 : リダイレクトを避ける
ルール12 : スクリプトを重複させない
ルール13 : ETagの設定を変更する
ルール14 : Ajaxをキャッシュ可能にする
最後に関連サイト