4.5G/5G環境でのECサイトの高速化 ― 変わるモバイル購買体験

2019年2月8日「イーコマースフェア2019東京」で講演したスライドです。
2019年4月からスタートする4.5G(LTE Advanced Pro)で下り帯域は1Gbpsとなり、2020年には5Gがスタートし、下り帯域は20Mbpsまで高速化します。
2019年2月現在でも、既に最低でも30Mbpsは出る携帯網において、画像の圧縮やHTMLやJavaScriptのminifyなどは意味が無くなっており、新たなボトルネックとしてサーバの性能が大きな問題となっています。現在のECサイトのボトルネックについて、何をどうすればいいのかを解説しました。

Transcript

1. 4.5G/5G環境でのECサイトの高速化 変わるモバイル購買体験 2019年2月8日 株式会社Spelldata 竹洞 陽一郎
2. 自己紹介 • 株式会社Spelldata 代表取締役社長 • ACM(Association for Computing Machinery)会員 • CMG(Computer Measurement Group)会員 • ISACA(Information Systems Audit and Control Association)会員 • 日本統計学会 賛助会員 • 日本科学技術連盟 賛助会員 • 日本マーケティング学会 会員 • html5j パフォーマンス部部長 • 統計学を基礎から学ぶ! 中西塾主催 • Webサイトパフォーマンスに関係する仕事を始めて、もう13年目 • やってきた事 • VMware … 日本人初のVCPトレーナー • Akamai … プロフェッショナルサービス • Verizon Business … プリンシパルコンサルタント • Keynote Systems … 日本代表 • Catchpoint Systems … 日本代表
3. 今日、お話する内容 • ECサイト高速化の重要性 • 有線回線においつく4.5G/5G • 高速携帯網を活用したECサイトづくり
4. ECサイト高速化の重要性 機会損失の最小化
5. IDOM、最高収益を達成
6. 高速化によって、セッション数が増加 表示完了時間が6秒から3秒に半減 1日あたりのセッション数は、10,000から20,000へ倍増
7. 直帰率の改善
8. HTMLのレスポンスタイムと売上 アクセス数が伸びて、売上が600万 円から800万円へと向上。 しかし、CV率は、計算上下がってい る点に注意。 →単純なCV率での確認では見誤る
9. ほぼ100%のお客様で事業上の数値が改善 • 但し、弊社が担当した事例のみ • 他社の改善については、詳細データを知らないので、語り ません • 事例には、枚挙に暇がない
10. 人は待つのが嫌い “エレベーターの設計者は、私たちが平均15秒なら待 てることに気づいた。 40秒待たされるとこぶしを握りしめる。 調査によれば、2分待たされた人は、10分待ったと報 告するという。” ― 「残酷すぎる成功法則」(飛鳥新書)
11. エレベーターの<閉>ボタンを押す人々 “そこでメーカーはトリックを使いだした。 たとえば鏡張りのようなエレベーターホール、あまり上品ではないが、鏡に 映る自分に気を取られ、待ち時間への愚痴が減るからだ。 だがエレベーターに乗っても状況は変わらない。 扉が閉まるまでの数秒の時間―設計者は「滞留時間」と呼んでいる―が問題 になる。通常は4秒とかからないが、それでも人は遅いと感じる。 どのエレベーターでも、あまりに頻繁に押されるので塗料がはげているのは どのボタンか？ それは<閉>ボタンだとグレッグは請けあう。” ― 「残酷な成功法則」飛鳥新書
12. Googleのディープラーニングによる分析(2017年)
13. 精神物理学 ― ヴェーバー・フェヒナーの法則(1860年)
14. ライリーの小売引力の法則(W.F.Reilly, 1929) P = × A D2 P=購入確率、α＝係数、A＝魅力、D＝距離（サイト速度） 購入確率は、商品力×販売力を、距離（サイト速度）の二乗で割ったもの
15. 商品に魅力があっても、 距離が遠い（速度が遅い）と売れない
16. MATモデル スタンフォード大学の説得技術研究所 Model from Dr. BJ Fogg at Persuasive Tech Lab at Stanford University
17. ECサイトの魅力とサイトの品質の関係 購 買 モ チ ベ ー シ ョ ン 低 高 購入完了までの 操作と所要時間 難しい 簡単 買う (Conversion) 商品力 ブランド力 ロイヤリティ サイトの操作性・反応速度 買わない (Abandon)
18. 何秒待ってもらう自信がありますか？ • 2秒 • 5秒 • 10秒 • 20秒 • 30秒 • 60秒 • 120秒 Stickiness
19. 表示速度の遅延＝機会損失の増大
20. どのくらい速ければ良いのか？
21. 1分で買い物を終えられる
22. 各ページにおいて、 表示開始0.5秒、 表示完了1秒を目指す
23. 有線回線に追いつく4.5/5G 高速化される携帯網
24. 今の携帯網の速度、ご存じですか？
25. OpenSignal ― 2010年設立世界の携帯網調査
26. 東京ビッグサイトでの計測値
27. 習志野市での計測
28. 香取市での計測
29. 小田原市での計測
30. 幕張イオンモールでの計測
31. 神田駅での計測
32. PREMIUM 4G ― LTE Advanced Pro
33. エドホルムの法則 「WiFi、無線の通信帯域は、18か月毎に倍になり、いずれ有線回線と同じスピードに収束 する」 by Phil Edhorm (Nortel Network CTO)
34. 10Gbpsで販売される光回線
35. ５Gで「通信速度27Gbps」達成
36. 2020年、携帯網は有線回線速度に追いつく！
37. 高速携帯網を活用した ECサイトづくり 変わるボトルネックに対応するために
38. 今までのECサイトづくりの課題 高解像度で大きな画像 を使いたい 動画を活用したい モノ売りからコト売りに 転換したい 快適に表示 簡単に買い物が終えら れる いつでも高速 商品の魅力を伝える要素 快適にショッピングできる要素 相反
39. これからのECサイトづくり 高解像度で大きな画像 を使いたい 動画を活用したい モノ売りからコト売りに 転換したい 快適に表示 簡単に買い物が終えら れる いつでも高速 商品の魅力を伝える要素 快適にショッピングできる要素 両立
40. これからのECサイトづくりの課題 高解像度で大きな 画像を使いたい 動画を活用したい モノ売りからコト売 りに転換したい 快適に表示 簡単に買い物が終 えられる いつでも高速 商品の魅力を伝える要素 快適にショッピングできる 要素 両立 インフラ基盤(サーバ)
41. これからのECサイトの性能は、サーバで決まる
42. 携帯網高速化の変化に伴う対策の変化 従来 これから 回線帯域が細いので画像の容量を小さく 画像ファイルを探して送信するまでの サーバの処理がボトルネックになるので、 ディスクI/Oが高速で、Linux3系・4系 のカーネルのOSにしてファイル探査を高 速化 動画配信はYouTubeやCDN経由で YouTubeでは動画の読込が遅い。 CDNを使うと、動画読込のJavaScript が遅延する。自社サーバから直接動画を 配信する。 CDN経由で配信してキャッシュを有効活 用 CDNがボトルネックとなるので、高速な CDNを使う。もしくは自社サーバから配 信する。 タグマネージャを使って効率的な運用 GTM、Yahoo Tag Manager、 Adobe DTMは遅延するので、自社運用 のタグマネージャを使う
43. SmartJPEG ― 画像最適化ツール ▶ オリジナル 153Kバイト（100%） SmartJPEG圧縮 35Kバイト（23%） ブース番号H-23
44. クラウドの利点は、高速化ではない https://jpn.nec.com/svsol/merit.html 現在、主流のクラウドは、仮想化を基礎としている。 仮想化技術は、IT資産の有効活用のための技術であり、高速化の技術ではない。
45. ベアメタル・オンプレミスへの回帰
46. 物理マシンへの回帰 ブース番号B-30
47. AWSのベアメタルインスタンスを提供へ
48. NVMe（Non-Volatile Memory Express） HDDの25倍、SSDの5倍、高速
49. Intel Optane SSD ― ３D XPoint技術 NVMeより更に高速
50. HDDを使っている場合ではない
51. SSDの価格の推移 https://kakaku.com/item/K0000924919/pricehistory/
52. システム性能は、まずは、ハードウェアで決まる
53. SEO的に本当に速度が重要なのは クローリング
54. Googleのクローリング
55. 100～500msでHTMLが送信されないとクローリングから漏れる “自分のサイトに1日あたり何ページクロールされているのかをSearch Consoleのクローリングの統計で確認して、 その数が理に叶っているかどうかを確認するというのは、このケースに当てはまっているかどうかを推測する方法で すね。 そして、もう一つ、ページが返ってくるまでの平均時間であるレスポンス時間を確認できますよね。 これはブラウザ上でページを読み込むのに掛かる時間と同じではないです。 ですからPageSpeed Insightsで調べる必要はなくて、サーバにリクエストを個々に送った時の純粋な時間の方で す。 例えば、このHTMLページが欲しいとか、この画像が欲しいとか、このPDFファイルが欲しいといった、情報を入手す るための平均時間です。 ここではどのくらいの秒数を目指すべきかというガイドラインみたいなものは一切言えないのですが、一般的に、大体 100～500msぐらいのレスポンス時間であればクローリングしやすいと確信しています。 もしもあなたが確認したとき、その時間が1000msを超えているということは、ページの読込は1秒以上掛かってい るということですから、それは本当にあなたのサーバは遅い部類に属しているという兆候です。 本来、私達がクローリングできるページ数を制限している一つの要因でしょう。”
56. しかも、クローリングのBOTはアメリカから来る
57. Webmaster Central Help Forum “Hi John In general, our cloaking guidelines say that you must show Googlebot the same content as you would show other users from the region that it's crawling from. So if you're blocking users in the US, then you'd need to block Googlebot when it's crawling from the US (as is generally the case). One suggestion would be to have content that's globally accessible, for both users & Googlebot from the US, which can then be indexed in search. Hope it helps! John” https://productforums.google.com/forum/#!topic/webmasters/tG ENw5xsduM/discussion
58. クローリングされたHTMLのダウンロード時間
59. サーバのレスポンスが遅いと、 クローリングがタイムアウトして、 インデックスされないのが一番の問題
60. APIからABIへ • Linuxの内部がAPIからABIへとバイナリインター フェース化 • JavaScriptも、WebAssemblyの登場でバイナリ 化 • HTTP1.1（テキストベース）からHTTP/2（バイナリ） へ
61. Webパフォーマンス高速化は下から上にやる 検 査 順 序
62. まとめ
63. 今日のお話のまとめ • 高速化は、どんなに商品が良くても、お客様が忙しいので、お 客様のスキマ時間で買ってもらうために最も最初にやらない といけない • 携帯網が高速化したことで、通信のボトルネックが解消されて いる • 大きな綺麗な画像、動画などを使って良い • でも、その分、サーバが遅延要因となっている • SEO的のも、クローリングされない事が問題になっている • 高速化は、ネットワークやハードウェアから性能を担保するの が大事
64. ちょっとだけ宣伝 • Spelldataは、Webパフォーマンスの計測・分析・改善 を専門としています。 • 一週間の内、98％の時間で、表示開始0.5秒、表示完了 2秒にすることをお約束します。（結果にコミット） • 殆ど表に出ないですが、大手の企業様の売上回復、売上 記録更新を支えている、縁の下の力持ち的存在の企業で す。 • 広告宣伝費用の1割で良いので、品質改善に使ってみて 下さい。投資対効果が上昇し、必ずや、お客様のECサイト 売上に貢献できます。