最近、業務でフロントエンドの開発をすることが多いのですが、表示速度といったパフォーマンスの改善をしたく、以前から気になっていたこの書籍を読みました。簡潔に概要と感想を書き残しておきます。
＊構成
１. Webページの速度- Webページの速度とは何か
- Webフロントエンド高速化のポイント
- Webフロントエンド高速化の取り組み方
- Webページの調査に必要なブラウザの開発者ツール
- Webページのリソース最適化に必要なNode.js
- ページロードの速度を左右するネットワーク処理
- ネットワーク処理の基本
- ネットワーク処理の調査と計測
- プロダクトに応じた指標作り
- サイズの大きいリソースの調査と改善
- 待機時間が長いリクエストの調査と改善
- リクエスト数の調査と改善
- クリティカルレンダリングパスの調査と改善
- Webフォントに関わるリソースの調査と改善
- スムーズなUIとスムーズでないUIの違い
- レンダリング処理の基本
- レンダリング処理の調査と計測
- レイアウト算出の調査と改善
- ペイント処理の調査と改善
- 意図しないCompositionの調査と改善
- アニメーションの調査と改善
- あらゆるブラウザ処理に関わるJavaScriptの実行
- スクリプト処理の基本
- スクリプト処理の調査と計測
- 重いスクリプト処理の調査と改善
- メモリリークの調査と改善
- 高頻度で実行されるGCの調査と改善
- 未開放のイベントリスナとタイマーの調査と改善
- 画像がWebページの速度に及ぼす影響
- 画像の基本
- 主要な画像形式
- 画像の最適化
- 画像リソースの効率的なレスポンシブWeb対応
- Service Workerによるネットワークリソースの制御
- Resource Hintsによるリソースの先読み
＊補足
ネットワーク処理最適化の3原則として、下記の原則に従ってWebページを改善することが大切です。- データの転送量をなるべく小さくすること
- データの転送回数をなるべく少なくすること
- データの転送距離をなるべく短くすること
＊所感
Webページの基本的なレンダリングの仕組みから始まり、順を追って具体的なWebページの改善方法を DevTool の写真と共に説明してくれているので、DevTool を使いこなせていない私にとっても大変わかりやすかったです。また、その他にWebページのロード速度を計測するツールやモニタリングするツールの紹介もされていました。
DevTool を使いこなせていない人がこの内容全てを頭に入れるのは難しいので、書籍を読みながら業務で実践していくのに向いていそうです。フロントエンドの開発者として必読かつ手元に置いておきたい一冊でした。
Sign up here with your email
ConversionConversion EmoticonEmoticon