Top▲
マーリンアームズ サポート   翻訳   コンサル   講座   アプリ   コラム

続・ハイパフォーマンスWebサイト — ウェブ高速化のベストプラクティス    Steve Souders著    武舎広幸＋福地太郎＋武舎るみ訳

目次


訳者まえがき
クレジット
まえがき

1章 Ajaxアプリケーションとパフォーマンス
  Douglas Crockford●Yahoo!
    1.1 トレードオフ
    1.2 最適化の原則
    1.3 Ajax
    1.4 ブラウザ
    1.5 Wow!
    1.6 JavaScript
    1.7 まとめ

2章 応答性の高いウェブアプリケーション
  Ben Galbraith、Dion Almaer ●Ajaxian.com, Mozilla
    2.1 どれくらい速ければよいのか
    2.2 遅延の測定
        2.2.1 遅延の度合いが悪化するとき
    2.3 スレッド
    2.4 応答性の確保
        2.4.1 Web Workers
        2.4.2 Gears
        2.4.3 タイマー
        2.4.4 メモリ使用が応答時間に及ぼす影響
        2.4.5 仮想メモリ
        2.4.6 メモリ問題のトラブルシューティング
    2.5 まとめ

3章 初期ロードの分割
    3.1 現状の分析
    3.2 分割による節減効果
    3.3 分割位置の特定
    3.4 未定義シンボルと競合状態
    3.5 ケーススタディ −Googleカレンダー

4章 実行をブロックしないスクリプトのロード
    4.1 スクリプトによるブロック
    4.2 スクリプトダウンロードの動作の矯正
        4.2.1 XHR eval
        4.2.2 XHRインジェクション
        4.2.3 iframeスクリプト
        4.2.4 Script DOM要素
        4.2.5 Script Defer
        4.2.6 document.writeによる SCRIPTタグ書き出し
    4.3 ブラウザのビジーインジケータ
    4.4 順序実行の保証
    4.5 結果のまとめ
    4.6 そして勝者は

5章 非同期のスクリプトの組み合わせ
    5.1 コード例 −menu.js
    5.2 競合状態
    5.3 非同期ロード時の実行順序維持
        5.3.1 テクニック 1−ハードコーディングコールバック
        5.3.2 テクニック 2−Window Onload
        5.3.3 テクニック 3−タイマー
        5.3.4 テクニック 4−Script Onload
        5.3.5 テクニック 5−SCRIPTタグの分解
    5.4 複数の外部スクリプト
        5.4.1 管理された XHR
        5.4.2 DOM要素と Doc Write
    5.5 汎用的な解決方法
        5.5.1 単一スクリプトの場合
        5.5.2 複数スクリプトの場合
    5.6 非同期ロードの実例
        5.6.1 Google AnalyticsとDojo
        5.6.2 YUI Loaderユーティリティ

6章 インラインスクリプトの適切な位置
    6.1 インラインスクリプトによるブロック
        6.1.1 インラインスクリプトをページ末尾に移動
        6.1.2 非同期に実行を開始
        6.1.3 Script Deferの利用
    6.2 CSSとJavaScriptの適用順序の維持
    6.3 危険 −スタイルシートに続くインラインスクリプト
        6.3.1 インラインスクリプトのブロック
        6.3.2 スタイルシートによるブロック
        6.3.3 現実の事例

7章 効率的な JavaScriptコード
  Nicholas C. Zakas●Yahoo!
    7.1 スコープの管理
        7.1.1 ローカル変数の使用
        7.1.2 スコープチェーンの拡張
    7.2 効率的なデータアクセス
    7.3 フロー制御
        7.3.1 高速な条件文
        7.3.2 高速なループ
    7.4 文字列の最適化
        7.4.1 文字列の連結
        7.4.2 文字列のトリミング
    7.5 長時間実行されるスクリプトは避ける
        7.5.1 タイマーを使って処理を明け渡す
        7.5.2 処理の明け渡しのためのタイマーパターン
    7.6 まとめ

8章 Comet
  Dylan Schiemann●SitePen
    8.1 Cometの原理
    8.2 トランスポート処理の手法
        8.2.1 ポーリング
        8.2.2 ロングポーリング
        8.2.3 永久フレーム
        8.2.4 XHRストリーミング
        8.2.5 将来のトランスポート処理
    8.3 クロスドメイン
    8.4 Cometを実装した場合のアプリケーションに対する効果
        8.4.1 接続の管理
        8.4.2 パフォーマンスの測定
        8.4.3 プロトコル
    8.5 まとめ

9章 gzip圧縮再考
  Tony Gentilcore●Google
    9.1 なぜこれが問題か
    9.2 原因
        9.2.1 圧縮の指定
        9.2.2 犯人捜し
        9.2.3 一般に見られるタートルタッピングの例
    9.3 非対応ユーザーの救済方法
        9.3.1 非圧縮時のページサイズを最小化するページ設計
        9.3.2 ユーザーへの周知
        9.3.3 gzipサポートの直接検知

10章 画像の最適化
  Stoyan Stefanov●Yahoo!
  Nicole Sullivan●CSS Ninja
    10.1 画像最適化を単純にするための 2ステップ
    10.2 画像の形式
        10.2.1 背景知識
        10.2.2 画像ファイル形式の特徴
        10.2.3 PNGの詳細
    10.3 可逆な画像最適化の自動化
        10.3.1 PNGのチャンクの削除
        10.3.2 JPEGのメタデータの削除
        10.3.3 GIFから PNGへの変換
        10.3.4 GIFアニメーションの最適化
        10.3.5 Smush.it
        10.3.6 プログレッシブ JPEGとファイルサイズ
    10.4 透過度 −AlphaImageLoaderの使用を避ける
        10.4.1 透過度の効果
        10.4.2 AlphaImageLoader
        10.4.3 AlphaImageLoaderの問題点
        10.4.4 プログレッシブエンハンスメント
    10.5 スプライトの最適化
        10.5.1 スーパースプライトとモジュール式スプライト
        10.5.2 高度に最適化された CSSスプライト
    10.6 その他の画像最適化
        10.6.1 画像のサイズを変更しない
        10.6.2 生成した画像の圧縮
        10.6.3 ファビコン
        10.6.4 Appleタッチアイコン
    10.7 まとめ

11章 主ドメインの細分化
    11.1 クリティカルパス
    11.2 誰が細分化を行うか
    11.3 HTTP/1.0へのダウングレード
    11.4 細分化の実際
        11.4.1 IPアドレスとホスト名
        11.4.2 ドメイン数の問題
        11.4.3 リソースの分散法
        11.4.4 最新のブラウザ

12章 ドキュメントのフラッシュ
    12.1 先頭のフラッシュ
    12.2 出力のバッファリング
    12.3 チャンク形式エンコーディング
    12.4 フラッシュと gzip
    12.5 その他の介在システム
    12.6 ドメインのブロックとフラッシュ
    12.7 ブラウザ −最後の障害
    12.8 PHP以外の言語
    12.9 フラッシュに関するチェックリスト

13章 iframeの取り扱い
    13.1 もっともコストのかかる DOM要素
    13.2 iframeによる onloadイベントのブロック
    13.3 iframeと並列ダウンロード
        13.3.1 iframeより前に置かれたスクリプト
        13.3.2 iframeより前に置かれたスタイルシート
        13.3.3 iframeより後に置かれたスタイルシート
    13.4 ホスト名当たりの接続数
        13.4.1 iframeにおける接続の共有
        13.4.2 複数のタブとウィンドウにわたる接続の共有
    13.5 iframeのコストに関するまとめ

14章 CSSセレクタの単純化
    14.1 セレクタの種類
        14.1.1 IDセレクタ
        14.1.2 クラスセレクタ
        14.1.3 タイプセレクタ
        14.1.4 隣接兄弟セレクタ
        14.1.5 子供セレクタ
        14.1.6 子孫セレクタ
        14.1.7 ユニバーサルセレクタ
        14.1.8 属性セレクタ
        14.1.9 擬似クラスと擬似要素
    14.2 CSSセレクタを効率的にするためのポイント
        14.2.1 右端が最初
        14.2.2 効率的な CSSセレクタの記述
    14.3 CSSセレクタのパフォーマンス
        14.3.1 複雑なセレクタのパフォーマンスへの影響
        14.3.2 使用を控えるべき CSSセレクタ
        14.3.3 リフロー時間
    14.4 実際のウェブサイトにおける CSSセレクタの働きの測定

付録A パフォーマンス関連ツール
    A.1 パケットアナライザ
        A.1.1 HttpWatch
        A.1.2 Firebugの［接続］パネル
        A.1.3 AOL Pagetest
        A.1.4 VRTA
        A.1.5 IBM Page Detailer
        A.1.6 Webインスペクタの［リソース］パネル
        A.1.7 Fiddler
        A.1.8 Charles
        A.1.9 Wireshark
    A.2 ウェブ開発ツール
        A.2.1 Firebug
        A.2.2 Webインスペクタ
        A.2.3 IE Developer Toolbar
    A.3 パフォーマンスアナライザ
        A.3.1 YSlow
        A.3.2 AOLPagetest
        A.3.3 VRTA
        A.3.4 neXpert
    A.4 その他のツール
        A.4.1 Hammerhead
        A.4.2 Smush.it
        A.4.3 Cuzillion
        A.4.4 UA ProfilerとBrowserscope

付録B Yahoo! JAPANが実践する Webの高速化
  岡部和昌、黒田真澄、由衛朋久、高林貴仁、木村尚敬 ●ヤフー株式会社
    B.1 CSSスプライト −事例： Yahoo! JAPANトップページ
        B.1.1 画像フォーマット
        B.1.2 スプライト内画像の並べ方
        B.1.3 スプライト画像の読み込み方法
        B.1.4 CSSスプライトを利用する際の手順
    B.2 画像の軽量化 −事例： Yahoo!ニュース
        B.2.1 PNG形式の減色
        B.2.2 JPEG形式の画像
        B.2.3 サーバサイドの画像圧縮
    B.3 FirstByte−事例： Yahoo! JAPANウェブ検索ページ
        B.3.1 FirstByteの実装例
    B.4 消費リソースの分析 −事例： Yahoo!検索のフロントエンド
    B.5 効率的な開発とパフォーマンスを意識した運用
        B.5.1 役割分担
        B.5.2 制作フェーズ
        B.5.3 運用フェーズ

付録C ブラウザの最新技術を活用したWebの高速化
  浅井智也 ●一般社団法人 Mozilla Japan
    C.1 プラットフォームとしてのブラウザ
    C.2 JavaScriptエンジンを意識した高速化
        C.2.1 JITコンパイラについて
        C.2.2 関数のインライン展開はほどほどに
        C.2.3 ループ処理となるように記述する
        C.2.4 クロージャの使用は最小限に
        C.2.5 DOMプロパティへのアクセス
        C.2.6 argumentsの使用に注意する
    C.3 ブラウザの処理を意識した高速化
        C.3.1 DOM要素やプロパティのキャッシュ
        C.3.2 ブラウザのリフローを意識する
        C.3.3 Selectors APIを利用する
        C.3.4 ネイティブメソッドを利用する
    C.4 ブラウザの最新機能を活用した高速化
        C.4.1 リンクプリフェッチ
        C.4.2 DNSプリフェッチ
        C.4.3 画像ファイルを減らして高速化する
        C.4.4 WebGL−Webで3次元グラフィックス
    C.5 ユーザー体験を意識した高速化
        C.5.1 HTML5の<video>を使う場合の注意
        C.5.2 ドラッグ＆ドロップでファイルアップロード

付録D Web高速化に対するGoogleのアプローチ
  及川卓也 ●Google
    D.1 Webの高速化
        D.1.1 Google Chromeにおけるブラウザの高速化
    D.2 Web標準採用/推進による高速化の利点
    D.3 Web SocketsとSPDY
        D.3.1 Web Socketsとは
        D.3.2 Web Socketsの実装状況
        D.3.3 SPDYとは
    D.4 Steve Soudersとの一問一答
索引