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

Book description

Webサイトのパフォーマンスは、「9:1でフロントエンド側のパフォーマンスが重要」だと言われています。パフォーマンスの向上には、インフラ側だけでなくフロントエンドの設計が大いに影響します。そこで本書は、Webサイトのパフォーマンス向上についてデザイン面からのアプローチに特化し、日々の業務に取り込めるCSS、HTMLのコーディングテクニックや、Webサイトで使用する画像を作成する際のヒントを紹介しています。また、デザイナーだけでなく、サイト運営に携わるすべてのスタッフがパフォーマンスへの意識を高めるための効果的な取り組みについても解説します。

Table of contents

  1.  大扉
  2.  原書大扉
  3.  クレジット
  4.  賞賛の声
  5.  推薦の言葉 
  6.  推薦の言葉
  7.  はじめに
  8.   本書の構成
  9.   表記上のルール
  10.   意見と質問
  11.   謝辞
  12.  監訳者まえがき
  13.  第1章 サイトパフォーマンスはユーザエクスペリエンス
  14.   1.1 ブランドに与える影響
  15.    1.1.1 ユーザの再訪問
  16.    1.1.2 検索エンジンの順位
  17.   1.2 モバイルユーザへの影響
  18.    1.2.1 モバイルネットワーク
  19.    1.2.2 モバイルの利用形態
  20.    1.2.3 モバイルハードウェア
  21.   1.3 デザイナーがパフォーマンスに及ぼす影響
  22.  第2章 表示速度の基礎
  23.   2.1 ブラウザがコンテンツを表示する方法
  24.    2.1.1 リクエスト
  25.    2.1.2 コネクション
  26.   2.2 ページ容量
  27.   2.3 ユーザ体感速度
  28.    2.3.1 クリティカルレンダリングパス
  29.    2.3.2 ジャンク
  30.   2.4 表示速度に影響するその他の要因
  31.    2.4.1 地理的要因
  32.    2.4.2 ネットワーク
  33.    2.4.3 ブラウザ
  34.  第3章 画像の最適化
  35.   3.1 画像形式の選択
  36.    3.1.1 JPEG
  37.    3.1.2 GIF
  38.    3.1.3 PNG
  39.    3.1.4 画像圧縮
  40.   3.2 画像リクエストの置き換え
  41.    3.2.1 スプライト
  42.    3.2.2 CSS3
  43.    3.2.3 データURIとBase64エンコード
  44.    3.2.4 SVG
  45.   3.3 画像に関する計画と反復作業
  46.    3.3.1 ルーティンチェック表の記入
  47.    3.3.2 スタイルガイドの作成
  48.    3.3.3 他の画像制作者への啓蒙
  49.  第4章 マークアップ言語とスタイルの最適化
  50.   4.1 HTMLのクリーンアップ
  51.    4.1.1 Divitis
  52.    4.1.2 セマンティクス
  53.    4.1.3 アクセシビリティ
  54.    4.1.4 フレームワークとグリッド
  55.   4.2 CSSのクリーンアップ
  56.    4.2.1 未使用のスタイル
  57.    4.2.2 スタイルの結合と縮小
  58.    4.2.3 スタイルシートから呼び出される画像のクリーンアップ
  59.    4.2.4 詳細度の削除
  60.   4.3 Webフォントの最適化
  61.   4.4 流用可能なマークアップの作成
  62.    4.4.1 スタイルガイド
  63.   4.5 マークアップに関する追加の検討事項
  64.    4.5.1 CSSとJavaScriptの読み込み
  65.    4.5.2 縮小化とgzip
  66.    4.5.3 ファイルのキャッシュ
  67.  第5章 レスポンシブWebデザイン
  68.   5.1 コンテンツの計画的な読み込み
  69.    5.1.1 画像
  70.    5.1.2 フォント
  71.   5.2 アプローチ
  72.    5.2.1 プロジェクト仕様書
  73.    5.2.2 モバイル・ファースト
  74.    5.2.3 すべてを測定する
  75.  第6章 パフォーマンスモニタリングの継続的な実施
  76.   6.1 ブラウザツール
  77.    6.1.1 YSlow
  78.    6.1.2 Chrome DevTools
  79.   6.2 シンセティックモニタリング
  80.   6.3 リアルユーザモニタリング
  81.   6.4 時間経過による変化
  82.  第7章 外観とパフォーマンスの両面を考慮するには
  83.   7.1 バランスを見つけだす
  84.   7.2 パフォーマンスをワークフローの一部に組み込む
  85.   7.3 パフォーマンスの目標値を決めてからデザインに取り掛かる
  86.   7.4 パフォーマンスを考慮したデザインへの試み
  87.  第8章 組織の風土を変えていく
  88.   8.1 「パフォーマンス警察」と「パフォーマンス管理人」
  89.   8.2 上層部を説得する方法
  90.    8.2.1 ビジネスの成果指標に与えるインパクト
  91.    8.2.2 サイトの速度を体感してもらう
  92.   8.3 デザイナーや開発者との連携
  93.    8.3.1 スタッフの教育
  94.    8.3.2 意思決定力を育成する
  95.  付録A HTTP/2の概要とWebパフォーマンスデザインの最適化
  96.   A.1 はじめに
  97.   A.2 HTTP/2とは
  98.   A.3 HTTPの歴史
  99.   A.4 HTTP/1の欠点
  100.   A.5 HTTP/1におけるWebパフォーマンスデザイン
  101.   A.6 HTTP/2の機能
  102.    A.6.1 HTTP/2の主要機能 1:多重化(ストリーム)
  103.    A.6.2 HTTP/2の主要機能 2:ストリームの優先度
  104.    A.6.3 HTTP/2の主要機能 3:コネクションの利用ルールの変更
  105.    A.6.4 HTTP/2の主要機能 4:ヘッダー圧縮
  106.    A.6.5 HTTP/2の主要機能 5:サーバプッシュ
  107.   A.7 HTTP/2をWebサイトで利用するために
  108.    A.7.1 WebパフォーマンスデザインをHTTP/2に最適化
  109.   A.8 最後に
  110.   A.9 参考・引用文献一覧
  111.  付録B 外部タグとサイトパフォーマンス 〜3rd Party Tagとの付き合い方〜
  112.   B.1 はじめに
  113.   B.2 外部タグとは?
  114.   B.3 外部タグを計測する
  115.   B.4 外部タグが及ぼすリスク
  116.    B.4.1 リスク1:ページ読み込み時間の増加
  117.    B.4.2 リスク2:外部タグがSPOFになる
  118.    B.4.3 リスク3:スクリプト読み込みとイベント発火の遅延発生
  119.    B.4.4 リスク4:サイトの可用性への影響
  120.    B.4.5 リスク5:ユーザ端末への負荷
  121.   B.5 Facebookの障害にみる外部タグの影響
  122.   B.6 外部タグのマネージメント
  123.   B.7 外部タグの導入計画
  124.    B.7.1 導入前
  125.    B.7.2 導入後
  126.   B.8 最後に
  127.   B.9 参考・引用文献
  128.  著者紹介
  129.  奥付

Product information

  • Title: パフォーマンス向上のためのデザイン設計
  • Author(s): Lara Callender Hogan, 西脇 靖紘, 星野 靖子
  • Release date: June 2016
  • Publisher(s): O'Reilly Japan, Inc.
  • ISBN: 9784873117553