前回に引き続き「Webフロントエンド ハイパフォーマンスチューニング」読んでよかったところ要点まとめ。
今回は「URL叩く → Loading → Scripting → Rendering → Painting（画面表示）」のレンダリング一連の流れの中でLoading工程の実際にできる速度改善方法。Loading工程の改善方法は、比較的導入しやすいかつ効果的な方法が多いので、環境構築時にも頭の隅においておきたい。
読み込むリソースの容量と数を減らす
HTML,CSS,JSを最小化する
タスクランナーの設定で自動化できそう
画像サイズを縮小する
これもタスクランナーの設定で自動化できそう
レンダリングをブロックする読み込みを減らす
CSSの@importを避ける
そのまま。
JSを非同期で読み込む
JS読み込みタグに以下のどちらかを設定する
async - DOMツリー構築後、
defer - DOMツリー構築後、
デパイスピクセル比ごとに画像を切り替える
画像読み込み時に「secset」を使用することによって、Retinaディスプレイみたいな高解像度のディスプレイとそれ以外のディスプレイで別々の画像サイズを設定できる
メディアクエリを適切に設定する
CSS読み込み時にlink要素のmedia属性を用途ごとに正
CSSスプライトをつかって複数画像を一枚にまとめる
タスクランナーの設定で自動化できそう
ブラウザとサーバ間の遅延を減らす
名前解決されたドメインのIPアドレスをキャッシュに格納する
DNSプリフェッチ - 名前解決をバックグラウンドで処理するよう設定できる
次のリソースを事前読み込みすることによってキャッシュに格納す
prefetch - Webページのレンダリングをバックグラウンドで行う
「次へ」ボタンのリンク先とかに良さそう
Gzip圧縮設定を有効にする
サーバ側の設定を有効にするだけ。
リソースをCDN経由で配信する
CDNのオプションとして用意されていることの多い、
リダイレクトしない
URLの最後に”/”
ブラウザのキャッシュを活用する
ブラウザのキャッシュ設定
Expiresヘッダー、Cache-Controlヘッダーを設定することによって指定した期限までキャッシュを保持する。このキャッシュが有効になるとHTTPリクエストを送信しなくなる、いわゆる「強いキャッシュ」。少し前まではブラウザによって対応が別れていたため両方設定する必要があったが、今は基本的にCache-Controlヘッダーのみ設定するだけでOK
画像やCSSファイルJSファイル等のキャッシュ設定
ファイルの末尾にトークンをつけることによってキャッシュ設定、変更することによってキャッシュクリアができる。これもタスクランナーの設定で自動化できそう
