Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

先入観とバイアスを考慮したWebサイトパフォーマンス改善

3 014 vues

Publié le

2017年2月22日開催第68回 HTML5とか勉強会「Webパフォーマンス」で講演した際の資料です。
現状の日本における、非科学的なWebサイトのパフォーマンス改善へのアプローチについて警鐘を鳴らし、具体的な問題点を明らかにしています。
また、高速化する際の、3つの抽象化した方策の見方について解説しています。
更に、2019年に施行されるであろう民法債権法改正の影響も解説しています。

Publié dans : Technologie
  • Soyez le premier à commenter

先入観とバイアスを考慮したWebサイトパフォーマンス改善

  1. 1. 先入観とバイアスを考慮した Webサイトパフォーマンス改善 株式会社Spelldata 竹洞 陽一郎 yoichiro.takehora@spelldata.co.jp
  2. 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. 3. 日本の現状 相変わらず遅い
  4. 4. 現在の世界基準 • 表示開始時間 … 0.5秒以内 • Webブラウザ上に最初の1ピクセル目が表示された時間 • 表示完了時間 … 2秒以内 • DOM Complete • DOM処理が終わって、ユーザが操作可能になった時間 • エラー率 … 3%未満
  5. 5. アメリカのEコマースサイトのパフォーマンス Dynatrace ― https://www.dynatrace.com/en/benchmarks/view-benchmarks.html
  6. 6. 日本のEコマースサイトのパフォーマンス Dynatrace ― https://www.dynatrace.com/en/benchmarks/view-benchmarks.html
  7. 7. 先入観とバイアスだらけ 科学の時代の非科学的な日本
  8. 8. 寒いマンション
  9. 9. なぜ、木造建築を見直すべきか http://www.nikkeibp.co.jp/sj/2/column/d/08/index.html
  10. 10. 寒さ・暑さ対策といえば断熱材?
  11. 11. 熱はどこからやってくる? http://www.earth-lab.org/item/refrec/post-6.html
  12. 12. 伝導熱とは • 物質の中を熱が伝わること • 固体→液体→気体の順に熱が伝わりやすい
  13. 13. 対流熱とは • 熱を蓄えた気体や液体が移動することで、熱を他の物 質に伝えること • お風呂のお湯が上層は熱くて、下層はぬるい • 部屋の温度が、天井付近は高くて、床付近は低い
  14. 14. 輻射熱とは • 熱が電磁波として物体から物体へ直接伝えられる現象 • 空気のない真空状態でも熱が伝わる
  15. 15. 輻射熱と放熱の問題 • 押さえておきたい3つの要素 • 蓄熱 • 放射熱(輻射熱) • 放熱
  16. 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. 17. 熱管理で最も重要なのは遮熱対策
  18. 18. 何故、アルミニウムが使われるのか? • 輻射=赤外線の放射=光の一種 • 輻射率 1. 銀 2. 金 3. 銅 4. アルミニウム • 経済性を考えると、銀、銅、アルミニウムの三択 • 銀と銅は反射特性が、アルミニウムの2~10倍良い • しかし、銀は酸化、硫化で黒く変色しやすく、性能がガタ落 ちする • そこで、銅やアルミニウムが使われる
  19. 19. 理想 ― 魔法瓶 https://www.tiger.jp/b2b/about_dannetsu.html
  20. 20. 内断熱 VS 外断熱 • 内断熱 … 日本の工法 • 外断熱 … 海外の工法 http://www.stojapan.com/stothermclassic/outside_insulation.html
  21. 21. 日本では外断熱工法は普及しているのか? • 全体の1%もない • 康和地所株式会社(1992年~2009年3月破産) • 大手ディベロッパーは、未だに内断熱工法のまま
  22. 22. 内断熱工法マンションの問題 • 寒い・熱い • 省エネの観点で問題 • 健康被害 • 建築物としての寿命が短くなる • 環境負荷の高さ • 熱帯夜の原因 • 建築物としての寿命の短さ→廃棄物
  23. 23. 科学的知識やノウハウが活かされていない • これを「建設・建築業界は何をやってるんだ?」と批判 できますか? • Web業界、IT業界も、状況は似たり寄ったり
  24. 24. エンジニアであるならば… • 科学知識を理解し、科学的アプローチを取るべきなの ではないでしょうか?
  25. 25. 先入観とバイアスに塗れた Webサイトパフォーマンス改善 どこがおかしいか、わかりますか?
  26. 26. 「知らない」という事を認識しよう 私達は、計測してみるまでは、実際のところは、ボトルネックを知らない
  27. 27. Don’t guess, measure! (推測するな、計測せよ!)
  28. 28. ボトルネックを特定せよ • プログラミングにおける悪の根源は、早まったコンポー ネントの最適化である。 ― Donald Knuth • ボトルネックをきちんと把握しないで高速化することは、 伝導熱や対流熱ばかりを気にして、熱伝導の75%を占 める輻射熱を放置するのに等しい
  29. 29. 非科学的手法は、業界のために駆逐する
  30. 30. 「科学的手法」とは? • 科学的方法とは、物事を調査し、結 果を整理し、新たな知見を導き出し、 知見の正しさを立証するまでの手 続きであり、かつそれがある一定の 基準を満たしているもののことであ る。 • 実験と、そのデータの統計分析が 主に用いられる。 1. 仮説の設定 2. 実験の計画 3. 実験による検証 4. 実験データの分析・解釈、推論 https://ja.wikipedia.org/wiki/科学的方法
  31. 31. 非科学的手法の例
  32. 32. 1. Google PageSpeed Insights
  33. 33. モバイルフレンドリーテスト Google PageSpeed Insightsの反省から、もう表示速度については、分析されていない。 (海外では、かなり揉めた)
  34. 34. 2. Chromeの開発者ツール
  35. 35. カバー率(経路)の問題
  36. 36. カバー率(時間)の問題
  37. 37. 3. Webpage Test 計測環境を知ってますか?=変数は何をどこまで「止めて」ますか?
  38. 38. 1時間のデータ
  39. 39. 6時間のデータ
  40. 40. 24時間のデータ
  41. 41. 1週間のデータ
  42. 42. 2週間のデータ
  43. 43. パフォーマンスの数値は一意に定まらない
  44. 44. 統計学を学ぼう! • 文科省が一生懸命、国の競争力強化のために、統計 教育を推進中 • 2014年から、高校一年で統計学を学ぶ • 2020年から、小学校の算数に統計学が入る
  45. 45. 高速化の見立て その策は、追加か、交換か、削除か?
  46. 46. パフォーマンス改善とは • 抽象的には、計算量を減らす事。 • 計算量には、サーバ側、クライアント側(ブラウザ側)のCPU の処理だけが含まれるのではない。 • ネットワークの通信も、中身を見れば、ネットワーク機器に搭 載されているASIC(特定用途向け集積回路)の計算が入る。 • これを念頭に置くと、高速化の策を考えるときにぶれな い。
  47. 47. 高速化の3つの方策 • 追加 • リソースの投入によって、1CPUあたりの計算量を軽減する。 • 例)サーバの追加、CPUの追加・アップグレード、メモリの追加 • 交換 • 現状の実装とは別の実装、別の方策を取ることで、相対的に計算量を軽 減する。 • 例)HTTP1.1からHTTP/2へ移行、WordPressのプラグインを入れる、アルゴ リズムの改善、PHPのバージョンアップ、画像からHTML+CSS3への書き 換え • 削除 • その計算そのものをしなくて良いようにする。 • 例)必要のないサードパーティコンテンツを外す、バナーを外す、情報の 価値が低いコンテンツ要素を外す
  48. 48. それぞれの方策についてのポイント • 追加 • お金がかかる。 • 費用対効果は明確。 • リソースを追加しても、効果は逓減していく。 • 交換 • 論理的な熟考をすべき。 • 交換前・交換後で、検証もすべき。 • 思い込みでやると、見事に失敗するので注意。 • 削除 • 最も効果が高い。 • 日本の企業の文化としては、一番難しい。追加するのは容易。削減は難 しい。 • 実際にやると、効果が高いので、周囲の理解を後から得られる。
  49. 49. 「画像の圧縮」と一言で言いましても… • 画質を粗くして、容量を減らす • 画質を高解像度のまま、容量を減らす • 脳・神経科学の研究成果を反映 • 人の認知できる「違い」の差を活用 • 認知できない違いの部分の信号を、数学的理論(知覚品質アルゴリズム)で削除し、 容量を削減する • CDNが実装・サービス提供を始める • Akamai Image Manager • Instart Logic SmartVision • RIOT … Free Software • 画像をデバイスのサイズや表示領域に応じて出し分けする • HTML5.1の<picture> • pixivのImageFlux
  50. 50. 一番困る記事 • 「WordPressを高速化する10のプラグイン」みたいな記 事 • プラグインを入れることで、その分の計算量は増える • プラグインを入れた事で、どれだけの計算量が減るのか? • 「プラグインの計算量 < Web配信システム全体として減らせ る計算量」 であるかどうかの検証は絶対必要。 そうでなければ、逆に遅延する。
  51. 51. 法律での品質の瑕疵担保責任 の追及の変化 「仕様」の実現から「目的」の実現へ
  52. 52. 従来の民法の規定 • 第634条 仕事の目的物に瑕疵があるときは、注文者は、請負人 に対し、相当の期間を定めて、その瑕疵の修補を請求 することができる。ただし、瑕疵が重要でない場合にお いて、その修補に過分の費用を要するときは、この限 りでない。
  53. 53. 今度の改正案 • 第570条 売主が種類又は品質に関して契約の内容に適合しない目 的物を買主に引き渡した場合において、買主がその不適 合を知った時から1年以内にその旨を売主に通知しないと きは、買主は、その不適合を理由とする履行の追完の請求、 代金の減額の請求、損害賠償の請求及び契約の解除をす ることができない。ただし、売主が引渡しの時にその不適合 を知り、又は重大な過失によって知らなかったときは、この 限りでない。
  54. 54. 瑕疵担保期間が無くなった • 従来の瑕疵担保期間の規定 • 第637条 前三条の規定による瑕疵の修補又は損害賠償の請求及び 契約の解除は、仕事の目的物を引き渡した時から一年以内 にしなければならない。 • この条文が削除された。
  55. 55. 新設された第570条のポイント • 品質に関して、買主が、不適合だと知った時から1年以内であれば、色々要 求できる。 • 直せ!改善しろ!(履行の追完) • 値引きしろ!(代金の減額) • 品質が悪いから損した! 弁償しろ!(損害賠償請求) • 契約は無かったことにする!(契約の解除) • 但し、売主が引渡しの時に、以下の状況の場合は、この一年の規定は適用 されないよ。 (ずっとですよ) • その不適合を知っていた(品質検査したけど黙ってた) • 重大な過失によって知らなかった(品質検査してない、正しい品質検査ではない) • 「売主は、品質を検査して、問題があったら、買主に報告しようね」という事。
  56. 56. 一番怖いのは、「損害賠償請求」 • 今までは、品質が適合していない事で、機会損失が生じて、本来であ れば稼げたお金は、「逸失利益」として請求するのが難しかった。 • 製造物責任法の施工によって、逸失利益の請求が楽になり、そこをカバーす る保険に製造業はみんな入った。 • 例)製造工程で使う部品を納入していて、その品質が悪くて故障したために、 本来であれば、生産できたであろう商品数に対する、ライン停止の損害賠償 請求 • 特に、ECサイトなどで、速度遅延によって、コンバージョン率が落ちた として、その分の利益を損害賠償請求されたら、どうするのか? • 構築費用より、遥かに大きな賠償責任を負う。
  57. 57. 製造物責任法第3条 • 第三条 製造業者等は、その製造、加工、輸入又は前条第三 項第二号若しくは第三号の氏名等の表示をした製造 物であって、その引き渡したものの欠陥により他人の 生命、身体又は財産を侵害したときは、これによって生 じた損害を賠償する責めに任ずる。ただし、その損害 が当該製造物についてのみ生じたときは、この限りで ない。
  58. 58. 製造物責任法第3条 • 無体物は動産ではない • コンピュータ・プログラムは本法の対象にはならない • 欠陥があるプログラムを組み込んだハードウェアの使 用により損害を被った場合 • 動産たるハードウェアに欠陥があるものとして本法の対象に なる • 元々無保証とされているオープンソースソフトウェアを 組み込んだハードウェアを製造販売する際にはより一 層の注意が必要
  59. 59. 「仕様の実現」から「目的の実現」へ • 民法の条文に「品質」という言葉が入る • 従来の瑕疵担保責任 … 発注者側が指示した「仕様」を実現して いるかどうか • 新しい民法での瑕疵担保責任 … 発注者側が意図している「目 的」を実現しているかどうか • 非機能要件に対する責任が、これからは契約上入っていなくて も、自動的に責任を負う • 契約書でこの条項を逃れる項目を入れても上書きできない • 任意規定と強行規定の違い • 「契約の自由の原則」に基づく特約は、強行規定については無効
  60. 60. 契約時に定めるべき非機能要件 • 配信品質(表示速度や可用性)について、瑕疵である かどうかの閾値をどこに定めるか? • 平均を使わない…最大値・最小値の情報が消える • パーセンタイルを使う…非対称型分布になるため • 契約書で明記したい非機能要件の定義 • 表示開始時間…0.5秒以内 • 表示完了時間…2秒以内 • エラー率…3%未満 • 上記の数値は目安。 • 契約時に配信品質の数値を交渉で決めておけば良い。 • 契約時の品質の取り決めについては、製造業の契約が参考になる。
  61. 61. 万が一、裁判になったときに、証拠として使える 品質標本のデータかどうかが勝負
  62. 62. Q&A

×