内容紹介
表示速度とデザインの両立を図るための実践的アプローチ手法！
Webサイトのパフォーマンスは9：1でフロントエンド側のパフォーマンスが重要だと言われています。そこで本書ではWebサイトのパフォーマンス向上についてデザイン面からのアプローチに特化し、コーディングや画像を作成する際のテクニックや、パフォーマンスを測定するためのさまざまな手段を紹介しています。また、組織内の全スタッフにパフォーマンス意識を高めてもらうために、今すぐ始められる取り組み方にもふれています。
このような方におすすめ
・組織やチームでサイトパフォーマンスを取り組もうとしているユーザー・WEBサイトパフォーマンスに取り組むデザイナー・WEBサイトのフロントエンジニア・開発エンジニアや、取り組みの推進者
目次
詳細目次
賞賛の声
推薦の言葉
はじめに
監訳者まえがき
1章 サイトパフォーマンスはユーザエクスペリエンス
1.1 ブランドに与える影響
1.1.1 ユーザの再訪問
1.1.2 検索エンジンの順位
1.2 モバイルユーザへの影響
1.2.1 モバイルネットワーク
1.2.2 モバイルの利用形態
1.2.3 モバイルハードウェア
1.3 デザイナーがパフォーマンスに及ぼす影響
2章 表示速度の基礎
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章 画像の最適化
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章 マークアップ言語とスタイルの最適化
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章 レスポンシブWebデザイン
5.1 コンテンツの計画的な読み込み
5.1.1 画像
5.1.2 フォント
5.2 アプローチ
5.2.1 プロジェクト仕様書
5.2.2 モバイル・ファースト
5.2.3 すべてを測定する
6章 パフォーマンスモニタリングの継続的な実施
6.1 ブラウザツール
6.1.1 YSlow
6.1.2 Chrome DevTools
6.2 シンセティックモニタリング
6.3 リアルユーザモニタリング
6.4 時間経過による変化
7章 外観とパフォーマンスの両面を考慮するには
7.1 バランスを見つけだす
7.2 パフォーマンスをワークフローの一部に組み込む
7.3 パフォーマンスの目標値を決めてからデザインに取り掛かる
7.4 パフォーマンスを考慮したデザインへの試み
8章 組織の風土を変えていく
8.1 「パフォーマンス警察」と「パフォーマンス管理人」
8.2 上層部を説得する方法
8.2.1 ビジネスの成果指標に与えるインパクト
8.2.2 サイトの速度を体感してもらう
8.3 デザイナーや開発者との連携
8.3.1 スタッフの教育
8.3.2 意思決定力を育成する
付録A HTTP/2の概要とWebパフォーマンスデザインの最適化
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 外部タグとサイトパフォーマンス ～3rd Party Tagとの付き合い方～
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 参考・引用文献
索引
続きを見る