ネットワーク処理の改善
理想は1秒以内
キャッシュを利用して無駄な HTTP リクエストを抑える
WebPagetest や PageSpeed insights でリソースサイズやキャッシュを確認できる
Web の表示は HTML の取得とサブリソースの取得の2つ分類できる(サブリソースがボトルネック)
最適化の3原則
データの転送量をなるべく小さくすること
データの転送回数をなるべく少なくすること
データの転送距離をなるべく短くすること
レンダリング過程を確認
Performance タブで Screenshot にチェックして cmd + e
ネットワーク処理の確認
Network タブ
shift を推しながらリソースをホバーすると依存関係を可視化できる
select(青)、initiators(緑)、dependencies(赤)
https://gyazo.com/1987d8221794edcf646f3082313a0422
改善方法
gzip で圧縮
デバイスに適した画像の取得
JS を適度なサイズに分割 Code Splitting
画像を遅延ロード(Lazy Load)
静的リソースを結合 e.g. bundle.js bundle.css
非結合だと更新されたファイルのみをダウンロードできるという利点も
サブリソースのロードの最適化
table: script タグの属性
属性 ダウンロード スクリプト処理 特徴
デフォルト DOM 構築処理を一時中断 DOM 構築処理を一時中断 普通の処理
defer DOM 構築処理と並行 DOM 構築完了後 ページのレンダリングが最優先で行われる
script async DOM 構築処理と並行 DOM 構築処理を一時中断 ダウンロード時に DOM の構築をブロックしない