超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる（技術評論社） [電子書籍]

超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる（技術評論社） の 商品概要

• 本書では「超速！」と銘を打って，Webページの速度を改善するためのノウハウを紹介します。Webページの速度は，みなさんのビジネスにおけるWebの価値を大きく左右します。
  Webページを構成する要素としてネットワーク処理，レンダリング処理，スクリプト処理の3つを取り上げ，これらを詳しく説明することで高速化に関する知識を網羅します。各テーマについては，基礎知識の章と，実践的な問題の調査と改善の章の2本立てで解説を進めます。これにより，調査によって個別の問題に分解して把握する力と，それに対する適切な改善を実行する力を身に付けられます。
  

• 目次

  第1章　Webページの速度
  1.1
  Webページの速度とは何か
  ページロードの速度 ── ページが表示されるまでの速度
  ランタイムの速度 ── ページ上での操作に対するUIの応答速度
  1.2
  Webページの速度の重要性
  ビジネスへの影響
  Webページの遅延によるユーザー体験の悪化
  GoogleとMicrosoftの事例 ── 遅延による収益の悪化
  アメリカ大統領選挙の事例 ── ロードの高速化によるコンバージョン率の向上
  Netflixの事例 ── ネットワーク転送量の削減によるコストの削減
  自分たちのビジネスと速度の関係
  デバイスやネットワークの多様化
  非力なモバイルデバイスの台頭
  低速なモバイル回線の普及
  低スペックを前提とした高速化が必要
  技術や表現の進化
  コンテンツのリッチ化によるネットワークの圧迫
  実装技術の高度化と要求スペックの向上
  求め続けられる高速化
  1.3
  Webフロントエンド高速化のポイント
  Webフロントエンドから改善する意義
  サーバサイドに期待できるのはリソース配信のみ
  Webページの速度はフロントエンドが一番重要
  Webフロントエンドを高速化する3つのポイント
  ネットワーク処理 ── HTMLドキュメントやサブリソースの取得
  レンダリング処理 ── ディスプレイへの表示
  スクリプト処理 ── JavaScriptによる演算やDOM操作
  1.4
  Webフロントエンド高速化の取り組み方
  推測するな，計測せよ
  計測結果を前提にする必要性
  継続的な計測と改善の重要性
  不特定多数の環境で実行されることへの配慮
  開発者の特殊なハイスペック環境
  想像を超えて不安定な実行環境
  速度の肌感を得るためのチェック
  目標にすべき速度の具体的基準
  ユーザーが待てる応答時間の限界
  RAILモデル ── アプリケーションの各タイミングにおける応答時間の基準
  エンジニアリングだけでは解決できない問題
  1.5
  Webページの調査に必要なブラウザの開発者ツール
  Chromeの開発者ツール（DevTools）
  本書で利用するバージョン
  DevToolsの起動方法
  DevToolsの基本機能
  Firefoxやその他ブラウザの開発者ツール
  1.6
  Webページのリソース最適化に必要なNode.js
  Node.jsとWebフロントエンドのビルドプロセス
  Node.jsのインストール
  npmを使ったNode.jsパッケージの管理
  npmの基本的なコマンド
  package.jsonの使い方
  1.7
  まとめ
  第2章　ネットワーク処理の基礎知識
  2.1
  ページロードの速度を左右するネットワーク処理
  ページロード時間の理想は1秒以内
  ネットワーク処理の速度に影響を与える要素
  リソースの大きさ
  HTTPリクエストの数
  ネットワークの通信距離
  ネットワーク処理の流れ
  ホスト名の名前解決
  TCP接続の確立
  HTTPリクエストとレスポンス
  HTTP/2によるネットワーク処理の効率化
  通信の多重化と並行リクエスト
  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章　レンダリング処理の基礎知識
  
  第5章　レンダリング処理の調査と改善
  
  第6章　スクリプト処理の基礎知識
  
  第7章　スクリプト処理の調査と改善
  
  第8章　画像の最適化に役立つテクニック
  
  第9章　ネットワーク処理の効率化に役立つポイント
  

超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる（技術評論社） の商品スペック