Webページ速度改善ガイド 1-2章

『超速！ Webページ速度改善ガイド』のメモ

超速！ Webページ速度改善ガイド ──使いやすさは「速さ」から始まる：書籍案内｜技術評論社

1章 Webページの速度

1.1 Webページの速度とは何か

  • ページロード：ナビゲーション開始（URLの入力など）からページが表示されるまで
  • ランタイム：（表示後の）インタラクションにかかる時間　例：スクロール、アニメーション

1.2 Webページの速度の重要性

速度改善は以下の観点で重要

  • ビジネス：速度改善により収益増を見込める
  • デバイス：モバイル環境はマシンスペック、回線ともにPCより不利　モバイルでも快適なページにする必要がある
  • コンテンツ：高速化により、よりリッチなコンテンツを提供できる　例：音声・動画

1.3 Webフロントエンド高速化のポイント

ページ速度へのインパクトが大きいのはフロントエンド

フロントエンドの速度改善のポイントは以下の3つに分けられる

  1. ネットワーク：配信されるリソースをダウンロードする処理
  2. レンダリング：リソースを表示する処理
  3. スクリプト：javascriptを実行する処理

1.4 Webフロントエンド高速化の取り組み方

Measure, Don't Guess（推測するな、計測せよ）

やみくもに実装を変更するのではなく、計測 -> 分析 -> 改善 の順番で進める

普段の開発環境だけでなく、低スペックな環境などいろいろな環境でチェックする

応答時間の基準

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

2.1 ページロードの速度を左右するネットワーク処理

ネットワーク処理の速度に影響を与える要素

  • リソースの大きさ
  • リクエストの回数
  • 通信経路の距離

HTTP/2の特徴

  1. 通信の多重化：1つのTCPコネクション内で複数のリソースをリクエストできる
  2. ヘッダ圧縮：ヘッダがテキストでなく、HPACKというアルゴリズムで圧縮されている
  3. リソースの優先度制御：クライアントの制御する優先度によって配信を制御する
  4. サーバプッシュによる先読み：クライアントからのリクエストを待たずにリソースを送信する

2.2 ネットワーク処理の基本

ネットワーク処理の最適化のポイント

  1. 転送量を小さくする
  2. 転送回数を少なくする
  3. 転送距離を短くする

配信されるリソース

  • テキスト
    • HTML, CSS, JSなど
    • 空白・改行を削るなどのいわゆるminify処理を行う
  • 画像
    • 圧縮する
    • リソースの50%をしめるとゆわれる
  • webフォント
    • 日本語の場合重い

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

  1. HTMLのダウンロードと評価
  2. サブリソースのダウンロードと評価
  3. レンダーツリーの構築とレンダリング

2が終わるとDOMツリー・CSSOMツリーが構築され、レンダーツリーが構築される

3以降は開発者が関与する部分はほとんどない、2までを速くする

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

モニタリングには以下の2種類ある

  1. 合成(synthetic)モニタリング
    • 計測用の環境を用意し、定期的に繰り返し計測する
    • メリット
      • 計測の揺らぎを抑えられる
      • 詳細なレポートを得られる -> 改善の手がかりになる
    • デメリット
      • 実際のユーザーの環境とずれる
  2. リアルユーザーモニタリング
    • クライアントサイドで時間を計測し、集計サーバに投げて収集する
    • メリット、デメリットは合成モニタリングの逆

メリットデメリットがあるので両方モニタリングできると良い

モニタリングのサービス

  • WebPagetest
  • SpeedCurve
  • New Relic
  • Calibre

Timing API

ブラウザのいろいろな処理時間をjsのAPIから取得できるように策定が進められている

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

間接的な指標

  • ブラウザイベント
    • DOMContentLoaded: DOMツリーの構築完了
    • Load: サブリソースのダウンロードと評価完了
  • リクエスト数・ファイルサイズ

直接的な指標

  • First Paint (Start Render): ページの何らかが表示され始めた時
  • First Contentful Paint: コンテンツ（画像・テキストなど）が表示され始めた時
    • First Paintと共に、Paint Timingで仕様が策定されている
  • First Meaningful Paint: ユーザーにとって意味のある状態になった時
    • アプリケーションによって異なる曖昧さがある
  • Time To Interactive: ユーザーが操作可能になった時
  • Speed Index: Above the fold（スクロールせずに閲覧可能な領域）における表示速度のスコア

感想など

  • TCPコネクションの同時接続数どう決まってるか調べる
  • 優先度の制御、どれくらい効果があるのか気になる
    • すでにブラウザでかなり制御されてそう
  • マイクロサービスだと先読みの制御が難しそう