高速サイトを実現するための14の基本ルールを提示し、世界中のエンジニアから大きな支持を得てベストセラーとなった『ハイパフォーマンスWebサイト』の続編。本書ではAjaxやWeb 2.0技術の浸透といった前著からの技術的なトレンドを反映するとともに、Chromeなど新しく登場したブラウザや他のブラウザの新バージョンにも対応するための情報を追加しました。HTML5、Web Workers、Web Socketsなどの新しい技術、最新のリアルタイムインターネットを支える技術についても言及しています。日本語版ではYahoo! JAPANやMozilla Japan、Google Japanで採用している高速化手法や高速化に関連した最新技術の動向を巻末付録として収録しました。
翻訳者によるサポートページ。
続・ハイパフォーマンスWebサイト
―ウェブ高速化のベストプラクティス
Steve Souders 著 、武舎 広幸、福地 太郎、武舎 るみ 訳
- TOPICS
- Web , HTML/CSS , JavaScript
- 発行年月日
- 2010年04月
- PRINT LENGTH
- 324
- ISBN
- 978-4-87311-446-0
- 原書
- Even Faster Web Site
- FORMAT
目次
目次 訳者まえがき クレジット まえがき 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との一問一答 索引