1.
先入観とバイアスを考慮した
Webサイトパフォーマンス改善
株式会社Spelldata
竹洞 陽一郎
yoichiro.takehora@spelldata.co.jp

2.
自己紹介
• 株式会社Spelldata 代表取締役社長
• ACM(Association for Computing Machinery)会員
• CMG(Computer Measurement Group)会員
• ISACA(Information Systems Audit and Control Association)会員
• 日本統計学会賛助会員
• 日本マーケティング学会会員
• html5j パフォーマンス部部長
• 統計学を基礎から学ぶ! 中西塾主催
• Instart Logic Performance Evangelist
• Webサイトパフォーマンスに関係する仕事を始めて、もう13年目
• やってきた事
• VMware … 日本人初のVCPトレーナー
• Akamai … プロフェッショナルサービス
• Verizon Business … プリンシパルコンサルタント
• Keynote Systems … 日本代表
• Catchpoint Systems … 日本代表

3.
日本の現状
相変わらず遅い

4.
現在の世界基準
• 表示開始時間 … 0.5秒以内
• Webブラウザ上に最初の1ピクセル目が表示された時間
• 表示完了時間 … 2秒以内
• DOM Complete
• DOM処理が終わって、ユーザが操作可能になった時間
• エラー率 … 3%未満

5.
アメリカのEコマースサイトのパフォーマンス
Dynatrace ― https://www.dynatrace.com/en/benchmarks/view-benchmarks.html

6.
日本のEコマースサイトのパフォーマンス
Dynatrace ― https://www.dynatrace.com/en/benchmarks/view-benchmarks.html

7.
先入観とバイアスだらけ
科学の時代の非科学的な日本

8.
寒いマンション

9.
なぜ、木造建築を見直すべきか
http://www.nikkeibp.co.jp/sj/2/column/d/08/index.html

10.
寒さ・暑さ対策といえば断熱材?

11.
熱はどこからやってくる?
http://www.earth-lab.org/item/refrec/post-6.html

12.
伝導熱とは
• 物質の中を熱が伝わること
• 固体→液体→気体の順に熱が伝わりやすい

13.
対流熱とは
• 熱を蓄えた気体や液体が移動することで、熱を他の物
質に伝えること
• お風呂のお湯が上層は熱くて、下層はぬるい
• 部屋の温度が、天井付近は高くて、床付近は低い

14.
輻射熱とは
• 熱が電磁波として物体から物体へ直接伝えられる現象
• 空気のない真空状態でも熱が伝わる

15.
輻射熱と放熱の問題
• 押さえておきたい3つの要素
• 蓄熱
• 放射熱（輻射熱）
• 放熱

16.
各素材の熱の伝わり方
厚さ(cm) 熱伝導率
[W/(m℃]
容積比熱
[kJ/(立法メート
ル℃)]
コンクリート 20 1.4 1,900
断熱材 5 0.026 50
アスファルト 5 0.11 920
土壌 45 1.5 3,100
窓ガラス 1 0.8 1,900

17.
熱管理で最も重要なのは遮熱対策

18.
何故、アルミニウムが使われるのか?
• 輻射＝赤外線の放射＝光の一種
• 輻射率
1. 銀
2. 金
3. 銅
4. アルミニウム
• 経済性を考えると、銀、銅、アルミニウムの三択
• 銀と銅は反射特性が、アルミニウムの2～10倍良い
• しかし、銀は酸化、硫化で黒く変色しやすく、性能がガタ落
ちする
• そこで、銅やアルミニウムが使われる

19.
理想 ― 魔法瓶
https://www.tiger.jp/b2b/about_dannetsu.html

20.
内断熱 VS 外断熱
• 内断熱 … 日本の工法
• 外断熱 … 海外の工法
http://www.stojapan.com/stothermclassic/outside_insulation.html

21.
日本では外断熱工法は普及しているのか？
• 全体の1%もない
• 康和地所株式会社(1992年～2009年3月破産)
• 大手ディベロッパーは、未だに内断熱工法のまま

22.
内断熱工法マンションの問題
• 寒い・熱い
• 省エネの観点で問題
• 健康被害
• 建築物としての寿命が短くなる
• 環境負荷の高さ
• 熱帯夜の原因
• 建築物としての寿命の短さ→廃棄物

23.
科学的知識やノウハウが活かされていない
• これを「建設・建築業界は何をやってるんだ？」と批判
できますか？
• Web業界、IT業界も、状況は似たり寄ったり

24.
エンジニアであるならば…
• 科学知識を理解し、科学的アプローチを取るべきなの
ではないでしょうか？

25.
先入観とバイアスに塗れた
Webサイトパフォーマンス改善
どこがおかしいか、わかりますか？

26.
「知らない」という事を認識しよう
私達は、計測してみるまでは、実際のところは、ボトルネックを知らない

27.
Don’t guess, measure!
（推測するな、計測せよ！）

28.
ボトルネックを特定せよ
• プログラミングにおける悪の根源は、早まったコンポー
ネントの最適化である。
― Donald Knuth
• ボトルネックをきちんと把握しないで高速化することは、
伝導熱や対流熱ばかりを気にして、熱伝導の75％を占
める輻射熱を放置するのに等しい

29.
非科学的手法は、業界のために駆逐する

30.
「科学的手法」とは?
• 科学的方法とは、物事を調査し、結
果を整理し、新たな知見を導き出し、
知見の正しさを立証するまでの手
続きであり、かつそれがある一定の
基準を満たしているもののことであ
る。
• 実験と、そのデータの統計分析が
主に用いられる。
1. 仮説の設定
2. 実験の計画
3. 実験による検証
4. 実験データの分析・解釈、推論
https://ja.wikipedia.org/wiki/科学的方法

31.
非科学的手法の例

32.
1. Google PageSpeed Insights

33.
モバイルフレンドリーテスト
Google PageSpeed Insightsの反省から、もう表示速度については、分析されていない。
（海外では、かなり揉めた）

34.
2. Chromeの開発者ツール

35.
カバー率（経路）の問題

36.
カバー率（時間）の問題

37.
3. Webpage Test
計測環境を知ってますか？＝変数は何をどこまで「止めて」ますか？

38.
1時間のデータ

39.
6時間のデータ

40.
24時間のデータ

41.
1週間のデータ

42.
2週間のデータ

43.
パフォーマンスの数値は一意に定まらない

44.
統計学を学ぼう！
• 文科省が一生懸命、国の競争力強化のために、統計
教育を推進中
• 2014年から、高校一年で統計学を学ぶ
• 2020年から、小学校の算数に統計学が入る

45.
高速化の見立て
その策は、追加か、交換か、削除か？

46.
パフォーマンス改善とは
• 抽象的には、計算量を減らす事。
• 計算量には、サーバ側、クライアント側（ブラウザ側）のCPU
の処理だけが含まれるのではない。
• ネットワークの通信も、中身を見れば、ネットワーク機器に搭
載されているASIC（特定用途向け集積回路）の計算が入る。
• これを念頭に置くと、高速化の策を考えるときにぶれな
い。

47.
高速化の3つの方策
• 追加
• リソースの投入によって、1CPUあたりの計算量を軽減する。
• 例）サーバの追加、CPUの追加・アップグレード、メモリの追加
• 交換
• 現状の実装とは別の実装、別の方策を取ることで、相対的に計算量を軽
減する。
• 例）HTTP1.1からHTTP/2へ移行、WordPressのプラグインを入れる、アルゴ
リズムの改善、PHPのバージョンアップ、画像からHTML＋CSS3への書き
換え
• 削除
• その計算そのものをしなくて良いようにする。
• 例）必要のないサードパーティコンテンツを外す、バナーを外す、情報の
価値が低いコンテンツ要素を外す

48.
それぞれの方策についてのポイント
• 追加
• お金がかかる。
• 費用対効果は明確。
• リソースを追加しても、効果は逓減していく。
• 交換
• 論理的な熟考をすべき。
• 交換前・交換後で、検証もすべき。
• 思い込みでやると、見事に失敗するので注意。
• 削除
• 最も効果が高い。
• 日本の企業の文化としては、一番難しい。追加するのは容易。削減は難
しい。
• 実際にやると、効果が高いので、周囲の理解を後から得られる。

49.
「画像の圧縮」と一言で言いましても…
• 画質を粗くして、容量を減らす
• 画質を高解像度のまま、容量を減らす
• 脳・神経科学の研究成果を反映
• 人の認知できる「違い」の差を活用
• 認知できない違いの部分の信号を、数学的理論（知覚品質アルゴリズム）で削除し、
容量を削減する
• CDNが実装・サービス提供を始める
• Akamai Image Manager
• Instart Logic SmartVision
• RIOT … Free Software
• 画像をデバイスのサイズや表示領域に応じて出し分けする
• HTML5.1の<picture>
• pixivのImageFlux

50.
一番困る記事
• 「WordPressを高速化する10のプラグイン」みたいな記
事
• プラグインを入れることで、その分の計算量は増える
• プラグインを入れた事で、どれだけの計算量が減るのか？
• 「プラグインの計算量 ＜ Web配信システム全体として減らせ
る計算量」
であるかどうかの検証は絶対必要。
そうでなければ、逆に遅延する。

51.
法律での品質の瑕疵担保責任
の追及の変化
「仕様」の実現から「目的」の実現へ

52.
従来の民法の規定
• 第634条
仕事の目的物に瑕疵があるときは、注文者は、請負人
に対し、相当の期間を定めて、その瑕疵の修補を請求
することができる。ただし、瑕疵が重要でない場合にお
いて、その修補に過分の費用を要するときは、この限
りでない。

53.
今度の改正案
• 第570条
売主が種類又は品質に関して契約の内容に適合しない目
的物を買主に引き渡した場合において、買主がその不適
合を知った時から１年以内にその旨を売主に通知しないと
きは、買主は、その不適合を理由とする履行の追完の請求、
代金の減額の請求、損害賠償の請求及び契約の解除をす
ることができない。ただし、売主が引渡しの時にその不適合
を知り、又は重大な過失によって知らなかったときは、この
限りでない。

54.
瑕疵担保期間が無くなった
• 従来の瑕疵担保期間の規定
• 第637条
前三条の規定による瑕疵の修補又は損害賠償の請求及び
契約の解除は、仕事の目的物を引き渡した時から一年以内
にしなければならない。
• この条文が削除された。

55.
新設された第570条のポイント
• 品質に関して、買主が、不適合だと知った時から1年以内であれば、色々要
求できる。
• 直せ！改善しろ！（履行の追完）
• 値引きしろ！（代金の減額）
• 品質が悪いから損した! 弁償しろ！（損害賠償請求）
• 契約は無かったことにする！（契約の解除）
• 但し、売主が引渡しの時に、以下の状況の場合は、この一年の規定は適用
されないよ。
（ずっとですよ）
• その不適合を知っていた（品質検査したけど黙ってた）
• 重大な過失によって知らなかった（品質検査してない、正しい品質検査ではない）
• 「売主は、品質を検査して、問題があったら、買主に報告しようね」という事。

56.
一番怖いのは、「損害賠償請求」
• 今までは、品質が適合していない事で、機会損失が生じて、本来であ
れば稼げたお金は、「逸失利益」として請求するのが難しかった。
• 製造物責任法の施工によって、逸失利益の請求が楽になり、そこをカバーす
る保険に製造業はみんな入った。
• 例）製造工程で使う部品を納入していて、その品質が悪くて故障したために、
本来であれば、生産できたであろう商品数に対する、ライン停止の損害賠償
請求
• 特に、ECサイトなどで、速度遅延によって、コンバージョン率が落ちた
として、その分の利益を損害賠償請求されたら、どうするのか？
• 構築費用より、遥かに大きな賠償責任を負う。

57.
製造物責任法第3条
• 第三条
製造業者等は、その製造、加工、輸入又は前条第三
項第二号若しくは第三号の氏名等の表示をした製造
物であって、その引き渡したものの欠陥により他人の
生命、身体又は財産を侵害したときは、これによって生
じた損害を賠償する責めに任ずる。ただし、その損害
が当該製造物についてのみ生じたときは、この限りで
ない。

58.
製造物責任法第3条
• 無体物は動産ではない
• コンピュータ・プログラムは本法の対象にはならない
• 欠陥があるプログラムを組み込んだハードウェアの使
用により損害を被った場合
• 動産たるハードウェアに欠陥があるものとして本法の対象に
なる
• 元々無保証とされているオープンソースソフトウェアを
組み込んだハードウェアを製造販売する際にはより一
層の注意が必要

59.
「仕様の実現」から「目的の実現」へ
• 民法の条文に「品質」という言葉が入る
• 従来の瑕疵担保責任 … 発注者側が指示した「仕様」を実現して
いるかどうか
• 新しい民法での瑕疵担保責任 … 発注者側が意図している「目
的」を実現しているかどうか
• 非機能要件に対する責任が、これからは契約上入っていなくて
も、自動的に責任を負う
• 契約書でこの条項を逃れる項目を入れても上書きできない
• 任意規定と強行規定の違い
• 「契約の自由の原則」に基づく特約は、強行規定については無効

60.
契約時に定めるべき非機能要件
• 配信品質（表示速度や可用性）について、瑕疵である
かどうかの閾値をどこに定めるか？
• 平均を使わない…最大値・最小値の情報が消える
• パーセンタイルを使う…非対称型分布になるため
• 契約書で明記したい非機能要件の定義
• 表示開始時間…0.5秒以内
• 表示完了時間…2秒以内
• エラー率…3%未満
• 上記の数値は目安。
• 契約時に配信品質の数値を交渉で決めておけば良い。
• 契約時の品質の取り決めについては、製造業の契約が参考になる。

61.
万が一、裁判になったときに、証拠として使える
品質標本のデータかどうかが勝負

62.
Q&A