超速本

https://gyazo.com/8e97b724f2cf6689c606e8300cab673c

2017/11/23出版

手にとった動機

最近パフォーマンス系をやっているのと、記事で紹介されていたから

正直Next.js使っていればこの辺の知識はなくても速くなる気はするが、知っているに越したことはないので買った

近くの図書館にあったので借りようと思ったが、緊急事態宣言のせいで今月中(2021/5)は1日も開館してなさそうだったので買った

第1章 Webページの速度

第2章 ネットワーク処理の基礎知識

page loadの話

対象としているのは、HTTP/1.0とHTTP/1.1

通信の多重化と並行リクエスト

HPACKによるヘッダ圧縮

取得リソースの優先度制御

サーバプッシュによる高度なリソース配信

2.2

ネットワーク処理の基本

フロントエンドが鍵を握る

ユーザーの待ち時間の大半はブラウザ上のネットワーク処理

HTMLに応じて発生するリクエスト

ネットワーク処理最適化の3原則

データの転送量を小さくする

データの転送回数を少なくする

データの転送距離を短くする

ネットワークから取得するリソース

テキスト ── HTML，CSS，JavaScript，SVG

画像 ── JPEG，PNG，GIF，WebP

Webフォント ── WOFF，TTF，OTF

クリティカルレンダリングパス

HTMLドキュメントのダウンロードと評価

サブリソースのダウンロードと評価

レンダーツリーの構築とレンダリング

フィルムストリップによるレンダリング過程の確認方法

2.3

ネットワーク処理の調査と計測

ネットワーク処理の確認

ネットワーク処理が発生したリソース

表示するリソースのフィルタ

ネットワーク処理のタイムライン

リクエスト数，受信したデータの合計

DOMContentLoadedイベントとloadイベント ── DOMツリーの構築完了とサブリソースのロード完了

発生したリクエストの詳細確認

リクエスト／レスポンスヘッダの詳細

リソースの生データとそのプレビュー

リクエストに付与されたCookieのプレビュー

ネットワーク処理に要した時間

基本的な対策を確認するチェックリスト型ツール

DevToolsのAuditsパネル ── Webページの全体的な品質を監査するツール

PageSpeed Insights ── 指定URLのコンテンツを解析し改善提案するWebサービス

Webページのロード速度のモニタリング

合成モニタリング ── 定常的な計測と詳細なレポート

リアルユーザーモニタリング ── ユーザーが体験した実測データの収集

Webページのロード速度をモニタリングするサービス

WebPagetest ── Googleが開発するオープンソースの速度計測サービス

SpeedCurve ── より継続的な速度の計測に特化したWebサービス

New Relic ── Webアプリケーションの総合モニタリングサービス

Calibre ── 新鋭の速度計測サービス

ブラウザのさまざまな処理時間を計測するTiming API

User Timing ── 任意のタイミング間の処理時間

Navigation Timing ── Webページへのナビゲーションに関する処理時間

Resource Timing ── サブリース取得時の処理時間

Paint Timing ── Webページのレンダリング状況に関する処理時間

Server Timing ── サーバ内で発生した処理時間

2.4

プロダクトに応じた指標作り

表示速度に対する間接的な指標

ページロードに関わるブラウザイベント

リクエスト数とファイルサイズ

ユーザー体験に基づいた表示速度の指標

First Paint ── ページが表示され始めたとき

First Contentful Paint ── コンテンツが表示され始めたとき

First Meaningful Paint ── ユーザーに意味のある表示になったとき

Time To Interactive ── ユーザーの操作に応答できるようになったとき

Speed Index ── Above the Foldの性能を示すスコア

プロダクトに応じた速度の指標

パフォーマンス予算 ── 運用中に守るべき基準値の設定

2.5

まとめ

第3章 ネットワーク処理の調査と改善

3.1

サイズの大きいリソースの調査と改善

調査方法

サイズの大きいリソース

ダウンロードに時間がかかっているリソース

適切な最小化が行われていないテキストリソース

不必要に大きいサイズの画像

改善方法

テキストリソースの最小化

テキストリソースの配信時圧縮

デバイスに適した画像の取得と最適化

肥大化したJavaScriptファイルの初期化コストの削減

3.2

待機時間が長いリクエストの調査と改善

調査方法

ネットワーク接続のセットアップに時間のかかるリクエスト

ダウンロード開始までに時間がかかるリクエスト

改善方法

リソースへの事前接続

キャッシュによるリクエスト結果の再利用

CDNからのリソース配信

3.3

リクエスト数の調査と改善

調査方法

発生したリクエストの総数

リクエストの発生要因

改善方法

不必要なリクエストの削除

画像の遅延ロード

静的リソースの結合

SVGスプライトとCSSスプライト

HTTP/1以前のアプローチとHTTP/2

3.4

クリティカルレンダリングパスの調査と改善

調査方法

CSSとCSSOM

スクリプト処理によるブロッキング

スタイリングされずに表示されるコンテンツ

外部スクリプトによる影響

改善方法

サーバプログラムの最適化

サブリソースのロードの最適化

コンテンツに影響しないスクリプトの非同期実行

3.5

Webフォントに関わるリソースの調査と改善

調査方法

Webフォントのファイルサイズ

フォントの切り替えによるチラつき

改善方法

フォントファイルへのキャッシュ適用

フォントファイルの圧縮と適切なロード

フォントファイルのサブセット化

Font Loading APIによるWebフォントのロード

font-displayディスクリプタによる表示ロジックの指定

3.6

まとめ

第4章 レンダリング処理の基礎知識

4.1

スムーズなUIとスムーズでないUIの違い

動きの滑らかさ ── 1フレームあたり10ミリ秒以内

UIの応答速度 ── 100ミリ秒以内

4.2

レンダリング処理の基本

FPSという基準

1フレームの中の処理の内訳

常に変化するFPS

FPSの極端な低下の回避

レンダリング処理最適化の基本指針

1フレーム内の処理を軽減する

ブラウザの内部処理による最適化を活かす

レンダリング処理のパイプライン

スクリプトの処理

スタイルの評価

レイアウトの算出

ペイントの実行

Webのアニメーションの種類と特性

DOMアニメーション ── JavaScriptを使った従来の手法

CSS Transitions/Animations ── CSSによる動きの定義

Web Animations ── 新しいアニメーションAPI

CompositingによるGPUアクセラレーション ── レンダリング処理に特化したGPUの活用

GPU命令による高速処理の恩恵

will-changeプロパティによるCompositingの有効化

CSSハックによるCompositingの有効化

Compositingの副作用

コラム：ブラウザに対する最適化のヒントとCSS Containment

4.3

レンダリング処理の調査と計測

ブラウザ内部アクティビティの確認

アクティビティの記録

FPSの確認

アクティビティ内イベントの種類と色分け

アクティビティの概要と計測集計の確認

Webページをロードしたときのアクティビティの確認

コラム：Long Tasks APIを使った時間のかかっているフレームの調査

アクティビティ記録時のオプション

イベントの詳細や追加情報の記録

低スペックなCPU環境の再現

レンダリングに関係する処理の可視化

ペイント処理範囲の可視化

GPU合成レイヤの可視化

FPSのリアルタイムモニタ

スクロールを阻害する要因の可視化

4.4

まとめ

第5章 レンダリング処理の調査と改善

5.1

レイアウト算出の調査と改善

調査方法

スクロール時のレンダリングが遅い原因

同期的に実行されるレイアウト算出

Forced synchronous layoutとLayout Thrashing ── レイアウト情報の参照によって強制的に発生するレイアウト算出

改善方法

Layout Thrashingの解消

更新するとレイアウトの再算出が必要になるCSS

参照するとレイアウトの再算出が実行されるDOM API

画面内に出入りする要素の管理の効率化

5.2

ペイント処理の調査と改善

調査方法

ペイント処理のプロファイル

CSSの複雑性が及ぼす影響

改善方法

コストが高いスタイルの見なおし

:hoverによって誘発されたペイント処理の抑制

ペイント処理のトリガになるCSSの削減

5.3

意図しないCompositingの調査と改善

調査方法

意図しないCompositing

Compositingが適用された理由

改善方法

スタッキングコンテキストの衝突回避

Compositing対象要素の整理

5.4

アニメーションの調査と改善

調査方法

開始時の遅延 ── Compositingの初期化コスト

再生中の遅延 ── フレーム処理のタイミング

改善方法

Compositingの有効化 ── will-changeプロパティの適用

5.5

まとめ

第6章 スクリプト処理の基礎知識

6.1

あらゆるブラウザ処理に関わるJavaScriptの実行

ページロードにおけるスクリプト処理

ランタイムにおけるスクリプト処理

6.2

スクリプト処理の基本

スクリプト処理最適化の基本指針

UIブロッキングにつながる長大な処理を避ける

メモリリークを回避し，メモリを節約する

重いスクリプト処理とUIブロッキング

シングルスレッドで行われるブラウザ処理

メモリリークとGC

GCによって解放されないメモリ

世代別GCのしくみ

6.3

スクリプト処理の調査と計測

スクリプト処理のプロファイル

スクリプト処理のフレームチャート

時間を要しているスクリプト処理

ヒープ領域のスナップショット

ページに存在するJavaScriptオブジェクトの一覧

オブジェクトとそれが参照しているオブジェクトも含めたメモリの比較

オブジェクトの参照ツリー

メモリのスナップショットどうしの比較

ヒープ領域の状態の時系列での解析

スクリプト実行に伴うメモリ状態の変化

時間の経過とオブジェクトの推移

解放されないメモリと世代別GC

6.4

まとめ

第7章 スクリプト処理の調査と改善

7.1

重いスクリプト処理の調査と改善

調査方法

ボトルネックになっているスクリプト処理

1フレームに占めるスクリプト処理

重い処理

改善方法

非同期化による処理実行の並列化

throttle()，debounce()関数による実行間隔の間引き

requestIdleCallback()メソッドによるアイドル待ち

Workerスレッドへの委譲

7.2

メモリリークの調査と改善

調査方法

メモリ使用量の推移

ヒープのスナップショットの比較

HTMLから切り離されたDOMツリー

改善方法

オブジェクトへの参照の消去

7.3

高頻度で実行されるGCの調査と改善

調査方法

GCの発生頻度

改善方法

メモリ管理の明示化

7.4

未解放のイベントリスナとタイマーの調査と改善

調査方法

意図せず実行され続けるタイマー

イベントリスナ数の推移

改善方法

明示的なイベントリスナとタイマーの解除

7.5

まとめ

第8章 画像の最適化に役立つテクニック

画像の形式や種類について概説があるのはありがたい

まとめが適度な量

が、パフォーマンスと関係ない話も多い

画像の最適化

画像最適化ライブラリ

GUIアプリケーションの利用

macOSで使えるアプリケーション

Windowsで使えるアプリケーション

コマンドラインツールの利用

imagemin ── Node.js製の最適化ツール

タスクランナーとの連携

CIとの連携

バージョン管理ツールとの連携

8.5

画像リソースの効率的なレスポンシブWeb対応

Media QueriesによるCSSの適用条件の制御

メディアクエリの記法

CSSファイルのロード分岐

CSSセレクタの条件分岐

ブラウザの対応状況

<picture>要素やsrcset属性による画像ロードの制御

画像リソースのレスポンシブなロード

ブラウザの対応状況

HTTP Client Hintsによる返却リソースの制御

デバイス情報のリクエストへの付与

ブラウザの対応状況

8.6

まとめ

第9章 ネットワーク処理の効率化に役立つポイント

9.1

Service Workerとは何か

バックグラウンドで動作するWorker

HTTPS環境でのみ利用可能

ブラウザの対応状況

Service Workerで実現されるネットワーク機能

リクエストへの割り込みとレスポンス制御

サーバプッシュの受信

バックグラウンド同期

Service Workerの登録とリクエストの制御

Service Workerの登録

インストール ── installイベント

アクティベーション ── activateイベント

リクエストの検知と割り込み処理 ── fetchイベント

Service Workerを使ったキャッシュ戦略

installイベント時の優先度の高いリソースのキャッシュ

fetchイベント時の選択的キャッシュ

9.2

Resource Hintsによるリソースの先読み

先読みしたいリソースのヒント

ほかの処理を阻まない投機的な取得

ブラウザの対応状況

Resource Hintsで行う投機的な処理

DNS PrefetchによるDNSの事前ルックアップ

PreconnectによるTCPの事前接続

Prefetchによるリソースの事前ダウンロード

コラム：Preloadによるリソースの優先的な事前ダウンロード

Prerenderによる事前レンダリング

9.3

まとめ

コラム：高速なモバイルWeb体験のためのAMP