book

パフォーマンス向上のためのデザイン設計

by Lara Callender Hogan, 西脇靖紘, 星野靖子

June 2016

Beginner

236 pages

2h 55m

Japanese

O'Reilly Japan, Inc.

Read now

Unlock full access

　　本書の構成　　表記上のルール　　意見と質問　　謝辞
　　1.1　ブランドに与える影響　　　1.1.1　ユーザの再訪問　　　1.1.2　検索エンジンの順位　　1.2　モバイルユーザへの影響　　　1.2.1　モバイルネットワーク　　　1.2.2　モバイルの利用形態　　　1.2.3　モバイルハードウェア　　1.3　デザイナーがパフォーマンスに及ぼす影響
　　2.1　ブラウザがコンテンツを表示する方法　　　2.1.1　リクエスト　　　2.1.2　コネクション　　2.2　ページ容量　　2.3　ユーザ体感速度　　　2.3.1　クリティカルレンダリングパス　　　2.3.2　ジャンク　　2.4　表示速度に影響するその他の要因　　　2.4.1　地理的要因　　　2.4.2　ネットワーク　　　2.4.3　ブラウザ

　　3.1　画像形式の選択　　　3.1.1　JPEG　　　3.1.2　GIF　　　3.1.3　PNG　　　3.1.4　画像圧縮　　3.2　画像リクエストの置き換え　　　3.2.1　スプライト　　　3.2.2　CSS3　　　3.2.3　データURIとBase64エンコード　　　3.2.4　SVG　　3.3　画像に関する計画と反復作業　　　3.3.1　ルーティンチェック表の記入　　　3.3.2　スタイルガイドの作成　　　3.3.3　他の画像制作者への啓蒙
　　4.1　HTMLのクリーンアップ　　　4.1.1　Divitis　　　4.1.2　セマンティクス　　　4.1.3　アクセシビリティ　　　4.1.4　フレームワークとグリッド　　4.2　CSSのクリーンアップ　　　4.2.1　未使用のスタイル　　　4.2.2　スタイルの結合と縮小　　　4.2.3　スタイルシートから呼び出される画像のクリーンアップ　　　4.2.4　詳細度の削除　　4.3　Webフォントの最適化　　4.4　流用可能なマークアップの作成　　　4.4.1　スタイルガイド　　4.5　マークアップに関する追加の検討事項　　　4.5.1　CSSとJavaScriptの読み込み　　　4.5.2　縮小化とgzip　　　4.5.3　ファイルのキャッシュ
　　5.1　コンテンツの計画的な読み込み　　　5.1.1　画像　　　5.1.2　フォント　　5.2　アプローチ　　　5.2.1　プロジェクト仕様書　　　5.2.2　モバイル・ファースト　　　5.2.3　すべてを測定する
　　6.1　ブラウザツール　　　6.1.1　YSlow　　　6.1.2　Chrome DevTools　　6.2　シンセティックモニタリング　　6.3　リアルユーザモニタリング　　6.4　時間経過による変化
　　7.1　バランスを見つけだす　　7.2　パフォーマンスをワークフローの一部に組み込む　　7.3　パフォーマンスの目標値を決めてからデザインに取り掛かる　　7.4　パフォーマンスを考慮したデザインへの試み
　　8.1　「パフォーマンス警察」と「パフォーマンス管理人」　　8.2　上層部を説得する方法　　　8.2.1　ビジネスの成果指標に与えるインパクト　　　8.2.2　サイトの速度を体感してもらう　　8.3　デザイナーや開発者との連携　　　8.3.1　スタッフの教育　　　8.3.2　意思決定力を育成する
　　A.1　はじめに　　A.2　HTTP/2とは　　A.3　HTTPの歴史　　A.4　HTTP/1の欠点　　A.5　HTTP/1におけるWebパフォーマンスデザイン　　A.6　HTTP/2の機能　　　A.6.1　HTTP/2の主要機能 1：多重化（ストリーム）　　　A.6.2　HTTP/2の主要機能 2：ストリームの優先度　　　A.6.3　HTTP/2の主要機能 3：コネクションの利用ルールの変更　　　A.6.4　HTTP/2の主要機能 4：ヘッダー圧縮　　　A.6.5　HTTP/2の主要機能 5：サーバプッシュ　　A.7　HTTP/2をWebサイトで利用するために　　　A.7.1　WebパフォーマンスデザインをHTTP/2に最適化　　A.8　最後に　　A.9　参考・引用文献一覧
　　B.1　はじめに　　B.2　外部タグとは？　　B.3　外部タグを計測する　　B.4　外部タグが及ぼすリスク　　　B.4.1　リスク1：ページ読み込み時間の増加　　　B.4.2　リスク2：外部タグがSPOFになる　　　B.4.3　リスク3：スクリプト読み込みとイベント発火の遅延発生　　　B.4.4　リスク4：サイトの可用性への影響　　　B.4.5　リスク5：ユーザ端末への負荷　　B.5　Facebookの障害にみる外部タグの影響　　B.6　外部タグのマネージメント　　B.7　外部タグの導入計画　　　B.7.1　導入前　　　B.7.2　導入後　　B.8　最後に　　B.9　参考・引用文献