先入観とバイアスを考慮したWebサイトパフォーマンス改善
•
16 likes•4,054 views
2017年2月22日開催第68回 HTML5とか勉強会「Webパフォーマンス」で講演した際の資料です。 現状の日本における、非科学的なWebサイトのパフォーマンス改善へのアプローチについて警鐘を鳴らし、具体的な問題点を明らかにしています。 また、高速化する際の、3つの抽象化した方策の見方について解説しています。 更に、2019年に施行されるであろう民法債権法改正の影響も解説しています。
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to 先入観とバイアスを考慮したWebサイトパフォーマンス改善
Similar to 先入観とバイアスを考慮したWebサイトパフォーマンス改善 (20)
More from Yoichiro Takehora
More from Yoichiro Takehora (10)
先入観とバイアスを考慮したWebサイトパフォーマンス改善
- 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 … 日本代表
- 4. 現在の世界基準 • 表示開始時間 … 0.5秒以内 • Webブラウザ上に最初の1ピクセル目が表示された時間 • 表示完了時間 … 2秒以内 • DOM Complete • DOM処理が終わって、ユーザが操作可能になった時間 • エラー率 … 3%未満
- 8. 寒いマンション
- 10. 寒さ・暑さ対策といえば断熱材?
- 13. 対流熱とは • 熱を蓄えた気体や液体が移動することで、熱を他の物 質に伝えること • お風呂のお湯が上層は熱くて、下層はぬるい • 部屋の温度が、天井付近は高くて、床付近は低い
- 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倍良い • しかし、銀は酸化、硫化で黒く変色しやすく、性能がガタ落 ちする • そこで、銅やアルミニウムが使われる
- 20. 内断熱 VS 外断熱 • 内断熱 … 日本の工法 • 外断熱 … 海外の工法 http://www.stojapan.com/stothermclassic/outside_insulation.html
- 21. 日本では外断熱工法は普及しているのか？ • 全体の1%もない • 康和地所株式会社(1992年～2009年3月破産) • 大手ディベロッパーは、未だに内断熱工法のまま
- 22. 内断熱工法マンションの問題 • 寒い・熱い • 省エネの観点で問題 • 健康被害 • 建築物としての寿命が短くなる • 環境負荷の高さ • 熱帯夜の原因 • 建築物としての寿命の短さ→廃棄物
- 28. ボトルネックを特定せよ • プログラミングにおける悪の根源は、早まったコンポー ネントの最適化である。 ― Donald Knuth • ボトルネックをきちんと把握しないで高速化することは、 伝導熱や対流熱ばかりを気にして、熱伝導の75％を占 める輻射熱を放置するのに等しい
- 30. 「科学的手法」とは? • 科学的方法とは、物事を調査し、結 果を整理し、新たな知見を導き出し、 知見の正しさを立証するまでの手 続きであり、かつそれがある一定の 基準を満たしているもののことであ る。 • 実験と、そのデータの統計分析が 主に用いられる。 1. 仮説の設定 2. 実験の計画 3. 実験による検証 4. 実験データの分析・解釈、推論 https://ja.wikipedia.org/wiki/科学的方法
- 31. 非科学的手法の例
- 32. 1. Google PageSpeed Insights
- 34. 2. Chromeの開発者ツール
- 35. カバー率（経路）の問題
- 36. カバー率（時間）の問題
- 38. 1時間のデータ
- 39. 6時間のデータ
- 40. 24時間のデータ
- 41. 1週間のデータ
- 42. 2週間のデータ
- 44. 統計学を学ぼう！ • 文科省が一生懸命、国の競争力強化のために、統計 教育を推進中 • 2014年から、高校一年で統計学を学ぶ • 2020年から、小学校の算数に統計学が入る
- 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配信システム全体として減らせ る計算量」 であるかどうかの検証は絶対必要。 そうでなければ、逆に遅延する。
- 54. 瑕疵担保期間が無くなった • 従来の瑕疵担保期間の規定 • 第637条 前三条の規定による瑕疵の修補又は損害賠償の請求及び 契約の解除は、仕事の目的物を引き渡した時から一年以内 にしなければならない。 • この条文が削除された。
- 55. 新設された第570条のポイント • 品質に関して、買主が、不適合だと知った時から1年以内であれば、色々要 求できる。 • 直せ！改善しろ！（履行の追完） • 値引きしろ！（代金の減額） • 品質が悪いから損した! 弁償しろ！（損害賠償請求） • 契約は無かったことにする！（契約の解除） • 但し、売主が引渡しの時に、以下の状況の場合は、この一年の規定は適用 されないよ。 （ずっとですよ） • その不適合を知っていた（品質検査したけど黙ってた） • 重大な過失によって知らなかった（品質検査してない、正しい品質検査ではない） • 「売主は、品質を検査して、問題があったら、買主に報告しようね」という事。
- 56. 一番怖いのは、「損害賠償請求」 • 今までは、品質が適合していない事で、機会損失が生じて、本来であ れば稼げたお金は、「逸失利益」として請求するのが難しかった。 • 製造物責任法の施工によって、逸失利益の請求が楽になり、そこをカバーす る保険に製造業はみんな入った。 • 例）製造工程で使う部品を納入していて、その品質が悪くて故障したために、 本来であれば、生産できたであろう商品数に対する、ライン停止の損害賠償 請求 • 特に、ECサイトなどで、速度遅延によって、コンバージョン率が落ちた として、その分の利益を損害賠償請求されたら、どうするのか？ • 構築費用より、遥かに大きな賠償責任を負う。
- 58. 製造物責任法第3条 • 無体物は動産ではない • コンピュータ・プログラムは本法の対象にはならない • 欠陥があるプログラムを組み込んだハードウェアの使 用により損害を被った場合 • 動産たるハードウェアに欠陥があるものとして本法の対象に なる • 元々無保証とされているオープンソースソフトウェアを 組み込んだハードウェアを製造販売する際にはより一 層の注意が必要
- 59. 「仕様の実現」から「目的の実現」へ • 民法の条文に「品質」という言葉が入る • 従来の瑕疵担保責任 … 発注者側が指示した「仕様」を実現して いるかどうか • 新しい民法での瑕疵担保責任 … 発注者側が意図している「目 的」を実現しているかどうか • 非機能要件に対する責任が、これからは契約上入っていなくて も、自動的に責任を負う • 契約書でこの条項を逃れる項目を入れても上書きできない • 任意規定と強行規定の違い • 「契約の自由の原則」に基づく特約は、強行規定については無効
- 60. 契約時に定めるべき非機能要件 • 配信品質（表示速度や可用性）について、瑕疵である かどうかの閾値をどこに定めるか？ • 平均を使わない…最大値・最小値の情報が消える • パーセンタイルを使う…非対称型分布になるため • 契約書で明記したい非機能要件の定義 • 表示開始時間…0.5秒以内 • 表示完了時間…2秒以内 • エラー率…3%未満 • 上記の数値は目安。 • 契約時に配信品質の数値を交渉で決めておけば良い。 • 契約時の品質の取り決めについては、製造業の契約が参考になる。
- 62. Q&A