民法債権法改正が国会で成立し、品質保証が請負やサービスなど、全てに適用されるようになります。私達が、普段、商品や食品に対して品質保証を求めるように、Webサイト制作や、Webサービスにも品質保証が要求されるのです。「自分達を損害賠償から守るために品質保証をしなくては」というよりも、「自分達の仕事の価値、提供するサービスの価値を高め、差別化するための品質保証」として積極的に活用しませんか？今まで、「テクニック」として語られる事が多かった「Webパフォーマンス」ですが、「品質管理」として本気で取り組みませんか？ このセッションでは、Webサイト制作や、Webサービスの現場で、DevOpsの三本柱の一つである「品質保証」を実行していくために必要な、Webパフォーマンス管理・改善に必要な基礎知識を解説します。 HTML5 Conference 講演資料

1. テクニックではなく
今、本気で取り組むべき
Webパフォーマンス
html5j パフォーマンス部 部長
株式会社Spelldata
竹洞 陽一郎

2. html5j パフォーマンス部

3. html5j パフォーマンス部
• 2014年5月発足
• 部員募集中
• また活動を再開させようかなと

4. 本気で取り組もう！
WEBパフォーマンス
日本も火が点いた

5. 今さら、Webパフォーマンスの重要性
を語るつもりはない。
分かってない人は、多分、このセッ
ションに来てない。

6. 「経営層や、マネジメント層が理解し
てくれなくて、困ってます。」

7. Webパフォーマンスの重要性を理解し
てもらう苦労を分かち合い、
説得材料を提供したい。

8. Webパフォーマンスの重要性を広める

9. Webパフォーマンス計測ツール
200
0
200
1
200
2
200
3
200
4
200
5
200
6
200
7
200
8
200
9
201
0
201
1
201
2
201
3
201
4
201
5
201
6
201
7
201
8
Keynote Systems（since 1995）
Gomez
Dynatrace
Catchpoint Systems
New Relic
SOASTA
ARGOS
Pingdom
Webpagetest
SpeedCurve

10. Webパフォーマンス計測市場規模
• Synthetic Monitoring
（合成計測）のマー
ケット
– 2016年で推定919.2M
ドル（約1102億円）
– 2021年までに2109.7M
ドル(約2362億円)にな
る見込み。
– 年18.1％の伸び
http://www.marketsandmarkets.com/PressReleases/enterprise-synthetic-
application-monitoring.asp

11. 欧米だと普通に定常計測する
• 24時間365日計測するのが当たり前
• Synthetic Monitoring （合成計測）がメイン
– 統計的品質管理で重要なフィッシャー三原則
に基づく計測
– 金が掛かる … ISPマーケットシェア、イン
ターネット人口分布に基づく計測機器の設置
– Actionable Data(実行可能データ)の取得
• 改善に結びつく、ノイズが少ないデータの取得
• “garbage in, garbage out”(ゴミデータからはゴミ
な結果しか出ない)

12. Web Performance VS 表示速度
― Google Trends

13. 何故、計測するのか?
• Webサイト運用の基本だから
• インターネットの中は変わり続ける
• 昨今のWebページには、サードパーティが大量に
入っている
– 普通に20～30、多いと100ぐらい
• 品質管理は、利益の源泉
– ストレートに言うと、品質管理をちゃんとやると
儲かる
• 海外のWebサービスやSaaSだと、普通に、
年間数千万～1億円を計測サービスに使う

14. 何事も分布
「自社は、品質管理の取り組みの分布において、どの位置？」

15. ガラパゴス化日本を脱しよう
• Webパフォーマンスにおいて、世界に比べて、
15年以上遅れてる日本
• 品質管理は、日本のお家芸
– Webサイトも、品質管理やりましょうよ！

16. 民法債権法改正
• 売買、請負についても、品質保証が必須
• Webサイトの制作請負 … 品質テストしてから納
入しないと重過失
• SaaS、Webサービス … SLA（Service Level
Agreement）を明示しないといけない

17. Webサイトの三大品質
Web
の
品質
アクセシ
ビリティ
セキュリ
ティ
パフォー
マンス
JIS Q 20000-2:2013
JIS X 8341-3:2016
JIS Q 27002:2014

18. DevOps
日本のDevOps本
は何故かここを書
かない、外す

19. DevOps Tool Chain
計測：パフォーマ
ンス、UX

20. 元リクルート 民間人中学校長
藤原和博氏
• 中学生に稼ぐとは何
かを教える
• 時給800円のマクドナ
ルドの仕事、時給8万
円のマッキンゼーの
仕事、何が違うの
か？

21. 希少性の違い
「君たちは、レアカードになれ！」
ポケモンSSレア（伝説級）「フリーザ」

22. きちんと品質管理をする＝レア
• 日本では、Webサイトの品質管理、特にパ
フォーマンスについては、できているところが
殆どない
• パフォーマンス管理をきちんとやることで、レ
アになれる

23. そもそもWebは速い
• 遅くしているのは、我々です。

24. http://motherfuckingwebsite.com

25. パフォーマンスエンジニアの求める
Web

26. 実際のWebサイト

27. 実際は技術の問題ではなくて、人の問
題
• 「コンサルタントの
第二法則」
– 一見どう見えようと
も、それは常に人の問
題である。

28. 管理しきれないルール無視の人々
• 「ルールは破るためにある」
• 社内の主義・主張の対立
• 予算の主導権
• KKD法（勘・経験・度胸）で進む事業
• 協力会社、外注先に依存している
• 部門間の責任回避
• 信奉者 … 〇〇を使っていれば大丈夫

29. 関係者の感情や思惑を無視すると、背
後から刺されて、プロジェクトが頓挫
するので、注意すること。
→ 技術より、関係者との関係を上手く
取りまとめていく方が改善においては
重要な要因。
何故なら、遅延は、根本的には「設計
ミス」だから。

30. 高速化の基本
テクニックではない

31. 一旦、テクニックを忘れる
• 遅延の原因さえ分かれば、解決に至る道は複数
ある。その中から最適・妥当なものを選べば良
い。

32. たったひとつの冴えたやりかた
必ずしも、一つとは限らない。

33. 「無知の知」
• 「知らないということを知っている」
(I know that I know nothing)
– ソクラテス

34. 思い込みをやめる
• 「きっと画像」、「きっとJavaScript」、
「きっとCSS」という思い込みで始めると、全
て無駄な努力となる。

35. まずは、計測、それが全ての基本

36. 第一フェーズ ― 全数調査
ページに計
測用
JavaScriptの
実装
ページをカ
テゴリ化し
て層別で分
析
データを、
都道府県や
ISP、国別
で層別して
分析
遅延してい
るページ、
ISPや都道
府県を把握
第二フェー
ズの計画
目的：把握していない遅延を捉える

37. 第二フェーズ ― 改善のサイクルをどんどん回します
計測
データ
分析
原因の
アタリを
つける
詳細調査
改善案
策定

38. 高速化とは
高速化とは、本質的には、計算量を減らすこと

39. アムダールの法則
• 最大速度向上 ≦
𝑝
1+𝑓∗(𝑝−1)
https://ja.wikipedia.org/wiki/アルダームの法則

40. ノーフリーランチ定理
「コスト関数の極値を探索するあらゆるアルゴリ
ズムは、全ての可能なコスト関数に適用した結果
を平均すると同じ性能となる。」
― Wolpert and Macready, 1995
組み合わせ最適化の領域の定理

41. ノーフリーランチの意味
• かつて酒場で「飲みに来た客には昼食を無料で
振る舞う」という宣伝が行われたが、「無料の
昼食」の代金は酒代に含まれていて実際には
「無料の昼食」なんてものは有る訳がない

42. 代償を支払う能力と覚悟なき者は
何も得られない、得る資格がない

43. ノーフリーランチ定理(続き)
「あらゆる問題で性能の良い汎用最適化戦略は理
論上不可能であり、ある戦略が他の戦略より性能
がよいのは、現に解こうとしている特定の問題に
対して特殊化（専門化）されている場合のみであ
る」
― Ho and Pepyne, 2002

44. Google PageSpeed Insightsの問題
レンダリング関係については問題解決のヒントとなるが、レンダリングはWeb
パフォーマンスの問題の一部でしかない。

45. Google PageSpeed Insightsの但し書き
ただし、ネットワーク接続のパフォーマンスは大きく変動
するため、PageSpeed Insights では、ページのパフォー
マンスのうちネットワークに依存しない部分（サーバー設
定、ページの HTML 構成、画像やJavaScript、CSS など
の外部リソースの使用方法）のみを考慮します。
提案された解決策を実装すれば、ページの相対的なパ
フォーマンスは改善されるはずです。
ただし、それでも、ページの絶対的なパフォーマンスは
ユーザーのネットワーク接続に左右されます。
https://developers.google.com/speed/docs/insights/about?hl=ja-JP

46. 実際の遅延要因

47. 高速化の三つの方策
• 追加
– 計算リソースの追加
• 交換
– 計算量のより少ない方法へ
• 削除
– 計算量を減らす

48. 高速化の原則
• 80:20の法則
– 全体の8割の遅延を占める2割の原因を解決す
る
• まずは秒の世界の改善、そしてミリ秒の世界の
改善

49. システムの5つ基本要素
Function Point
External Input
(外部入力)
External Output
(外部出力)
External Inquiries
(外部参照)
Internal
Logical Files
(内部論理
ファイル)
External
Interface
Files
(外部接続
ファイル)

50. SSL
Negotiation
DNS Lookup
Content
Download
Initial
Connection
First Byte
Download
Client Time
自社DNSサーバ
負荷
相手先
DNSサー
バ負荷
DNS
TTLDNS
TTL
DNS攻撃負
荷
接続負荷
Keep Alive設定
同時接続数
ページ滞留時
間
ページあたり
のオブジェク
ト数
ページあたり
の容量
DNSラウンドロ
ビン
暗号化方
式
瞬間鍵処
理能力
暗号化対
象
プログラミング言
語
型類
推
C
P
U
メモ
リ
Webサーバ処
理時間
ハードウェア性
能
IOP
S
動的生
成処理
サーバサ
イド
キャッ
シュ
DBサーバ処
理時間
DBタイプ
ACID特性データ量
データ
モデリン
グWebサー
バ
MO
D
プロセ
ス優先
度
ディスク接続方式(Fibre Channel, iSCSI,
SATA)
ファイルシス
テム
C
P
U
ディスクアク
セス
競合制御方式
ストレージ種別(SSD, HDD, Hybrid)
パーティ
ション
サイズ
暗号強
度
ロバストネス
性
ディ
スク
使用
量
キャッシュメモリ動作方式(Write Through, Write
Back)
Webブラウザの種
類
ブラウザキャッシュ
設定
キャッ
シュ有効
期限
アクセ
スパ
ターン
圧縮配
信
事前圧
縮
C
P
U
Web
サ
イ
ト
パ
フ
ォ
ー
マ
ン
ス
DOM処理特
性
HTTP同時接続
数
独自実装
接続の順番
自社接続ドメイン
数
3rd Party接続ドメイ
ン数
ネットワーク
状態
レイテンシ 経路
JavaScript
処理性能
HTMLドキュメン
ト構成
HTML記
述
文法エ
ラー divネスト構
造
DOMオブジェク
ト数
ネットワーク
状態
帯域 経路
レイテンシ
CSS定義構
造
読み込みファイル
数
Override定義
数
文法エ
ラー
SSL通信検査
JavaScript
コード
処理効率
バグ含有
率
接続応答
性
複雑
度
接続方式
実装方
式
特性要因図
50

51. 調査は下から上に
ネットワーク
ハードウェア
OS
アプリケーション
言語
実装

52. やってくる5Gネットワーク
全てを変える

53. 5Gネットワークの目玉
• ネットワークスライス
• 指向性アンテナ（ビームフォーミング）
• Mobile Edge Computing
• Mobile Web/Applicationの全てを変える
– 既存の技術(PWA、AMP)は、5G登場までの繋
ぎとなる

54. ネットワークスライス
https://www.nttdocomo.co.jp/info/news_release/2016/06/images/1
3_00.jpg

55. 指向性アンテナ
http://www.fujitsu.com/jp/Images/g5-requirements-030_tcm102-
1576573.jpg

56. Mobile Edge Computing
https://youtu.be/O2dDxQcuY-0

57. html5j パフォーマンス部のWebinarでお
会いしましょう。
• 「Webパフォーマンスを変える、5Gネットワー
クの技術概要」
– 近日開催予定