FastViewによるwebの自動最適化とビジネスメリット

日本ラドウェア株式会社
2014年5月

Radware社の概要
Webパフォーマンスのトレンド
State of the Unionのご紹介
FastViewのご紹介
Webサイト高速化によるメリット
Webサイトの問題点とその対策
高速化テクニックの概要

Radware Proprietary and Confidential ©2014 Radware Ltd. All rights reserved.
会社名：Radware Ltd.
(NASDAQ:RDWR)
会社設立:1997年
NASDAQ上場:1999年9月
CEO: Roy Zisapel
本社：Tel Aviv (イスラエル)
従業員:850名超（内R&Dが300名程度）
世界40カ国で販売を展開
1万社を超える企業に導入
$300Mのキャッシュを有した無借金経営
会社名：日本ラドウェア株式会社
会社設立：2000年6月
代表取締役：河田英典
本社：目黒
（目黒区下目黒1-8-1 アルコタワー9F)
Slide 3

4.9
14.1
38.4 43.3 43.7
54.8
68.4
77.6 81.4
88.6
94.6
108.9
144.1
167.0
189.2 193.0
0.0
50.0
100.0
150.0
200.0
250.0
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
US$ millions
32% up
Radware Ltd. 売上推移
2009/3/31
Nortel社よりAlteon
事業を譲渡
2013/2/7
Strangeloop
Networks社を買収
Slide 4

ISP 1
ISP 2
Firewall
LinkProofDefensePro
(DDoS対策)
APSolute Vision
Alteon AAS
ADC-VXTM
ネットワークセキュリティ
マルチホーミング
次世代型ADC
•インターネットアクセス回線の冗長・最適化
AppWall
(WAF)
DefensePro
(アプリケーション保護)
•サーバ負荷分散
•Webアプリケーションパフォーマンスの可視化
•Web パフォーマンスの高速化
統合マネジメント
•Radware製品の統合マネージメント
•セキュリティモニタリング・レポート生成
Alteon VATM
FastViewTM
•外部からのDoS攻撃を防御
•Webアプリケーションレイヤの
攻撃を防御
Slide 5
ADC製品及びセキュリティ製品の市場リーダー

Radware Proprietary and Confidential ©2014 Radware Ltd. All rights reserved. Slide 6
2012年 2013年
最も革新的なリーダーとして格付け

国内導入実績
– キャリア：ソフトバンクテレコム様他
– ISP：多数
– 官公庁：中央省庁他多数
– エンタープライズ（金融）：大手銀行/ 地方銀行/ 証券会社他多数
– エンタープライズ（ECサイト）：某大手オンラインショッピングサイト/ 某大手オンラインゲームサイト他多数
WW導入実績
– キャリア、ISP：多数（米国、カナダ、中国、インド、ヨーロッパ諸国など）
– 官公庁：政府機関多数
– エンタープライズ（金融）：証券取引所（米国、中国など）/ 銀行/ 証券会社他多数
– エンタープライズ（ECサイト）：某大手SNSサイト/ 某大手オンラインショッピングサイト他多数
2012年 DDoS対策ツールマーケットシェア（金額）
出典：富士キメラ総研：2013ネットワークセキュリティビジネス調査総覧＜上巻：市場編＞
ベンダー名比率
日本ラドウェア 50.9%
A社 27.3%
その他 21.8%
DDoS対策ツール
国内シェア
No.1
Slide 7

Radwareが4半期毎にリリースするWebパフォーマンスレポート
– Alexa*1 小売業主要サイトが対象
– WebPageTest.org*2 のDullesノードにてGoogle Chrome ver. 31を使用
– 各サイトに対し9回測定を行ない、その中央値を採用
– 下記の指標について平均値を算出
• ロード時間
• リソース数・コンテンツサイズ
• 操作開始時間 (Time to Interact; TTI)
Slide 9
日本語版公開 http://www.radware.co.jp/product/fastview/pdf/State_Of_The_Union_2014_Winter_Ja.pdf
*1 ウェブサイトのアクセス量、訪問者数などのランキングを調査する企業
*2 ウェブサイトのパフォーマンス測定サービス

ロード時間とは?
– Webサイトの表示が完結するまでの時間
– 2013年1月と比較し、2014年1月では22%もの速度低下を観測
• Alexa トップ100のサイトを比較
– 2013年1月 8.2秒
– 2014年1月 10秒
Slide 10

ロード時間遅延の原因は?
– リソース数・コンテンツサイズの増大が一端
– 2013年1月と比較し、2014年1月ではリソース数は12%の増加、コンテンツサイズは40%の
増加を観測
• Alexa トップ100のサイトを比較
– 2013年1月 86リソース・1007KB
– 2014年1月 96リソース・1410KB
Slide 11

操作開始時間(Time to Interact)とは?
– 主要なコンテンツがロードされ、使用可能になるまでの時間
– Alexa トップ100のサイトの中央値は昨年比ほぼ横ばいの5秒
– 理想的な数値は3秒とされているが、トップ100のサイト中、3秒以下のサイトは20％に留まる
Slide 12

3秒以内で操作可能とならなかった場合
– 過半数(57%)のユーザがサイトから離脱
– 80%のユーザはそのサイトを再訪しない
– 不満は伝染し、サイトの集客に悪影響を及ぼす
3秒で十分なのか?
– あくまで及第点
– より早いに越した事は無い
– 1秒 vs. 3秒
• ページビューは22%低下
• コンバージョン率は38%低下
• 直帰率は50%の上昇
Slide 13

パフォーマンス向上の為の主要ベストプラクティスの採用は横ばい
– CDNの利用
• 80%のサイトにて利用、ほぼ横ばい
– Keep-Aliveの有効化
• 7%のサイトにて正しく使用されていない
– 画像圧縮
• WebPageTest.orgにてA等級を獲得出来たのはわずか9%のサイトに留まる
Slide 14

ネット販売売上高ランキングトップ 10 (月刊ネット販売調べ)のE-commerceサイトを調査
– 平均ロード時間は約4秒と3秒以内とはならず
– 3秒以内にロードしたのは4サイトのみ
– FastView使用時には平均ロード時間は約30%改善
Slide 15
出展; 「月刊ネット販売」１０月号「第１３回ネット販売白書」

オンラインビジネスの収益はローディングタイムに直結
– アクセス数の増加
– 顧客満足度の向上
– 離脱率の低下・コンバージョン率の向上
Slide 17
100msのレスポンスタイム向上
が1%の収益アップに!
出展; Amazon Make Data Useful 出展; Radware Web Performance Today

圧縮機能を使用しコンテンツサイズを削減
ブラウザキャッシュ機能を使用し不要なリクエストを削減
– 従量課金のインフラコスト (e.g. CDN, Amazon EC2 etc.)を削減
– サーバの負荷を軽減
Slide 18
出典; HTTP Archive

モバイル環境においてレスポンスタイムを52.25%向上
– 離脱率: 低下
– コンバージョン率: 向上
– 運用コスト(最適化コーディング): 削減
国内導入事例:
FastViewを導入し、スマホユーザの
離脱率が目に見えて改善
「表示速度は目に見えて速くなり、離脱率
も改善傾向にあります。それがコンバージョ
ンの増加に寄与していると考えています。ま
た、最適化業務の運用の中で、以前は「ソ
ースコードを最適化する」という処理を入れ
ていました。しかし、FastView 導入後は、
その処理が必要なくできるようになりました。
それは業務改善において非常に効果的で
、メンテナンスのコストとして20～30%
削減されました。」
(ディー・エヌ・エーEC事業本部
ショッピング事業部長谷川氏談)
Slide 19

Out-of-Boxで約25%の高速化を実現！
Slide 20

Webサイトの表示に必要なファイル(Image, CSS, JavaScript)の取得に要した時間を
ドリルダウンし解析可能に
DNS
lookup
TCP
Connection
Time To First
Byte
Content
Download
Start
Rendering
Document
Complete
Back
End
Front
End
Slide 21

Start Rendering
Document Complete
Slide 22

Original Delivery (ADC+CDN) Transformation
(FastView + ADC + CDN)
9.5 秒
63 ラウンドトリップ
5.7 秒
2.1 秒
Slide 23

レイテンシ (遅延)
– ラウンドトリップ毎に遅延の影響を受けてしまう
 ラウンドトリップ数の削減
ペイロード (コンテンツサイズ)
– ラストマイルの帯域は必ずしも十分ではない
 コンテンツサイズの削減
キャッシュ (ブラウザキャッシュ)
– キャッシュ可能コンテンツであっても、適切にヘッダが設定されていない
 ダイナミックにキャッシュの可否を判断
レンダリング (ブラウザ上の描画プロセス)
– HTMLの記述によりブラウザの処理に遅延が生じてしまう
 HTMLの最適化
これらの手法を組み合わせる事でWebサイトの
パフォーマンスを格段に上げる事が可能
Slide 24

高速化テクニック (Treatment Set)はデスクトップ用、モバイル用個別に設定
モバイルに特化した高速化テクニック (Treatment Set)
Webサイトの
課題
高速化テクニック
(Treatment)
概要
レイテンシ
Dynamic Connection Maximizer ※ ドメイン・シャーディング
Dynamic Resource Consolidation ※ JavaScript, CSS, Image結合
ペイロード Payload Reduction
HTTP圧縮, 画像圧縮
CSS, JavaScript サイズ最小化
キャッシュ
Output Cache FastViewによるキャッシュ
Dynamic Browser Caching ダイナミック・キャッシング
レンダリング
Rapid Rendering HTMLの最適化
Deferral 読み込み延期
Webサイトの
課題
高速化テクニック
(Treatment)
概要
ペイロード Mobile Specific Image Compression モバイル、タブレット毎の圧縮比率
キャッシュ Mobile Super Cache HTML5のローカルストレージ
レンダリング Touch Event Conversion Touchイベント処理の高速化
※ デスクトップにみに対応
Slide 25

ドメイン・シャーディング
– レガシーなブラウザがオープン可能な単一のドメインあたりの最大接続数は少な過ぎる (Internet
Explorer 6, 7の場合、最大2つまで)
– FQDNにPrefixを追加し、ドメイン名を破片(shard)化する事で、単一のドメインに対しオープン
可能なコネクション数を増加
www.radware.co.jp
www.radware.co.jp
www.radware.co.jp
rad1.www.radware.co.jp/a
rad2.www.radware.co.jp/b
rad3.www.radware.co.jp/c
rad1.www.radware.co.jp/a
rad3.www.radware.co.jp/c
rad2.www.radware.co.jp/b www.radware.co.jp/a
www.radware.co.jp/c
www.radware.co.jp/b
Slide 26

複数のCSS, JavaScriptファイルを単一のファイルに統合
小さなCSS, JavaScriptのファイルを直接HTMLに埋め込み
CSSスプライト
– Webサイトで使用する複数の画像を結合
– CSS側の記述にて表示を調整
Slide 27

HTTP圧縮
– レベルは1(low)-9(high)
画像圧縮
– GIF/PNG/JPEG (Lossy Compression)
439KB 164KB
Slide 28

JavaScript, CSS サイズ最小化
– クライアントには不要な開発者用のコメント、不要なスペースを削除
Slide 29

ダイナミック・キャッシング
– 適切にキャッシュフラグが設定されていないオブジェクトに対しても、ブラウザキャッシュを実現
– 非常に強力かつユニークな手法
• レイテンシ、ペイロードの問題からも開放
– 何をブラウザキャッシュさせるか?
• パブリックなコンテンツ
– 認証を要しない
– Cookieを伴わない
– Varyヘッダが無い
– etc.
• フレッシュなコンテンツ
– FastViewは最適化を行なったコンテンツが最新のものであるかを常にチェック
text/html
HTML
css_140521_01
js_140521_02
image_140521_03
image_140521_03
Slide 30

先読み
– 事前定義したURIのコンテンツをブラウザのレンダリング終了後、先読み
– 最新バージョンではユーザの振る舞いを動的に学習し、先読みすることも可能
Slide 31

画像読み込み高速化
– 品質を落とした画像をHTMLに埋め込み、レンダリング完了後にオリジナル画像をロードさせる
HTML最適化
– CSSを<Head></Head>に複製することで、ブラウザのレンダリングを最適化
Slide 32

読み込み延期
– レンダリング処理をブロックするJavaScript
– アクセス解析用のImage, ページスクロール後に位置するImage
– ページ表示直後には不要なiframe (e.g. Facebookの”いいね!”ボタン)
Slide 33

モバイルに特化した圧縮
– Tablet, Mobile毎にGIF/PNG/JPEGに対し、異なる圧縮比率を定義
モバイルに特化したキャッシュ
– HTML5のlocalstorage機能
• モバイルブラウザにおけるキャッシュサイズの上限の問題を解消
• ドメイン毎に5MBまでキャッシュ可能
Touchイベント変換
– TouchイベントからClickイベントへのトランスレーションにより発生する遅延時間
(最大500ms程度)を最小化
Slide 34

端末、ブラウザ、バージョン毎にコンテンツを最適化可能
最適化のプロセスはオフラインで処理される為、ユーザからはシームレス
他の類似ソリューションと比較し、最も包括的かつ柔軟な高速化テクニックを提供
モバイルに特化した高速化テクニックを提供
Slide 35

FastView導入によるビジネスメリット
– 収益増大
• 20% - 40%の高速化によるページビューアップ、離脱率低下、カートサイズの増大、固定客の獲得
– コスト削減
• 画像圧縮、ブラウザキャッシュによるインフラコスト削減
• コード最適化の自動化によるメンテナンスコスト削減
Slide 36
数ヶ月での投資回収も実現可能!

FastViewによるwebの自動最適化とビジネスメリット

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to FastViewによるwebの自動最適化とビジネスメリット

Similar to FastViewによるwebの自動最適化とビジネスメリット (20)

FastViewによるwebの自動最適化とビジネスメリット