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

html5j パフォーマンス部

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

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

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

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

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

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

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

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

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

Web Performance VS 表示速度 ― Google Trends

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

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

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

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

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

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

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

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

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

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

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

http://motherfuckingwebsite.com

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

実際のWebサイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実際の遅延要因

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

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

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

SSL Negotiation DNS Lookup Content Download Initial Connection First Byte Download Client Time 自社DNSサーバ 負荷 相手先 DNSサー バ負荷 DNS TTL DNS 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

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

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

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

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

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

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

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