第1章 Webページの速度
1.1 Webページの速度とは何か
- ページロードの速度–ページが表示されるまでの速度
- ランタイムの速度–ページ上での操作に対するUIの応答速度
1.2 Webページの速度の重要性
ビジネスへの影響（コンバージョン率）
デバイスやネットワークの多様化（モバイルのネットワークは非力）
技術や表現の変化（コンテンツのリッチ化）
1.3 Webフロントエンド高速化ポイント
Webフロントエンドから改善する意義
高速なリソース配信はWebページの速度を高めるために必要だがブラウザによるリソースの取得はWebページを表示するプロセスの中のほんの一部。Webページを表示するプロセスのうち残りの大半を閉めるフロントエンドの観点から改善するアプローチが重要。
サーバサイドがいかにHTMLを速くレスポンスしたとしても、Webフロントエンドに不備があればWebページの速度をすべて台なしにしてしまう。
Webフロントエンドを高速化する3つのポイント
- ネットワーク処理──HTMLドキュメントやサブリソースの取得
- レンダリング処理──ディスプレイへの表示
- スクリプト処理──JavaScriptによる演算やDOM操作
1.4 Webフロントエンド高速化の取り組み肩
推測するな、計測せよ
計測や原因の調査もせずにやみくもにコードを修正するのはよろしくない。ただの当てずっぽうで再現可能なエンジニアリングではないので。
継続的な計測と改善が重要
Webページ速度は色々な要因で遅くなるので日々計測し日々改善することが重要。
開発者の特殊なハイスペック環境
一般ユーザの環境とは違うということを自覚すべし。
目標にすべき速度の具体的基準
エンジニアリングだけでは解決できない問題
速度の問題はエンジニアだけでなくデザイナー、プランナー、マネージャーなど同じプロダクトと向き合うメンバー全員の共通認識とされるべき問題。
Webページの調査に必要なブラウザの開発者ツール
Chromeなどの検証ツール