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

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

by Lara Callender Hogan, 西脇 靖紘, 星野 靖子
Released June 2016
Publisher(s): O'Reilly Japan, Inc.
ISBN: 9784873117553

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

You might also like

book

Python機械学習クックブック

by Chris Albon, 中田 秀基

Pythonによる機械学習を進める上で、頻繁に遭遇すると思われる200超の問題とその解決策を紹介。データ構造（ベクトル、行列、配列）、数値データ、カテゴリデータ、テキスト、画像、日時データの取り扱いといったデータ分析の基本から、特徴量抽出、次元削減、モデルの評価と選択、線形回帰、決定木、ランダムフォレスト、k-最近傍法、SVM、ナイーブベイズ、クラスタリング、ニューラルネットワーク、訓練済みモデルのセーブとロードなど、幅広い内容をカバー。巻末に日本語版付録「日本語テキストの取り扱い」を収録。「やりたいこと」「困っていること」に答えてくれる一冊です。

book

ハイパフォーマンスPython

by Micha Gorelick, Ian Ozsvald, 相川 愛三

Pythonの高速化技法について一歩踏み込んだプロユースの解説書。ボトルネックの測定方法から、最適なデータ構造の使い分け、CythonやPyPyなどのコンパイラの比較、numpyなどのパッケージの使い方、マルチコアCPUの活用法、メモリ効率を劇的に改善するトライ構造や近似計算まで、シンプルな実例プログラムを用いながらわかりやすく説明します。高性能なプログラムの書き方だけでなく、高性能なシステムの作り方を総合的に学ぶことができるPythonエキスパート必携の一冊です。

book

PythonとJavaScriptではじめるデータビジュアライゼーション

by Kyran Dale, 嶋田 健志, 木下 哲也

Webからデータを取得して、効率よく整理、分析を行い効果的な可視化を実現するには、さまざまなツールとテクニックが必要です。 本書ではPythonとJavaScriptを使い分け、それぞれの言語の強みを最大限利用します。 PythonのBeautifulSoupとScrapyでデータを取得、pandas、Matplotlib、Numpyでデータ処理を行い、Flaskフレームワークを使ってデータを配信、JavaScriptのD3.jsを使ってインタラクティブなWeb可視化を実現します。データの収集からアウトプットまでの全体を視野に入れて解説しているので、実際にコードを追いながら、この一冊でデータ分析プロセスの全体像を理解できます。

book

プログラミングRust

by Jim Blandy, Jason Orendorff, 中田 秀基

RustはMozilla財団の支援下で開発が進められており、Mozillaの次世代ブラウザエンジンの実装にも用いられているシステムプログラミング用言語です。C/C++並みのパフォーマンスと低レベルなメモリ操作機能、型システムを用いたメモリとスレッドの安全性を両立し、さらに安全な並列性も実現した、いま最も注目されている言語です。このRustをテーマにした本書は、Rust特有の所有権、移動、借用といった概念だけでなく、生産性と柔軟性を向上させるジェネリックコード、クロージャ、イテレータ、コレクションといった高度な機能についても詳しい説明を加えており、言語仕様から高度なプログラミング技術までを網羅した決定版です。