Web体験を“向上“させるCDNと表示速度の重要性

合同会社レッドボックス
https://www.redbox.ne.jp

ABOUT ME

Name :

小川 かつひさ (KATSUHISA OGAWA）

Job

合同会社レッドボックス CEO:※取り扱いトラフィックは約50000Mbps前後(2018年時点)

Like:

Past :

キャッシュ・負荷分散・WEB高速化
インフラ屋さんサーバーやスイッチを設定したり色々やってるアレ

キャッシュ屋ブログ

https://blog.redbox.ne.jp
https://www.facebook.com/ogawaka

2

Today’s AGENDA✓ 表示速度がWEBサイトにあたえる影響✓ WEB世界の変化・WEBに求められていることとは？
✓ WEB高速化をどのようにおこなえば良いのか？

✓ CDNで、WEBサイトを高速化するには？
✓ CDNの仕組み・メリット✓ 定額CDNエッジキャッシュのご紹介✓ WEB高速化・まとめ3表示速度がWEBサイトにあたえる影響

表示速度が、WEBサイトにあたえる影響というお話をご存じでしょうか？

4表示速度がWEBサイトにあたえる影響

読み込み速度が１秒遅くなる↓
ページビューは11%減少＝

顧客満足度は16%下がる↓
コンバージョン率は7%減少する

Amazonのような巨大サイトの場合、1秒遅いことが年間約16億ドルの機会損失になる。
つまり、たった1秒の差で16億ドル以上の利益を生み出すということにもなります。

1秒＝16億ドル

Aberdeen Groupの調査より
http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx

5表示速度がWEBサイトにあたえる影響
WEB表示速度は直帰率に比例（2017年レポート）
Googleは126か国でモバイル向け広告のランディングページ90万サイトを対象に調査
WEB表示速度がユーザーのWEB体験に与える影響を
ディープラーニングを利用し予想

WEB表示速度が1秒から3秒に落ちると、直帰率は32%増加
1秒から5秒に落ちると、直帰率は90%増加
1秒から6秒に落ちると、直帰率は106%増加
1秒から7秒に落ちると、直帰率は113%増加

1秒から10秒に落ちると、直帰率は123%増加

Find out how you stack up to new industry benchmarks for mobile page speedより
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page6
speed-new-industry-benchmarks/

表示速度がWEBサイトにあたえる影響
Amazon Web site 19947

表示速度がWEBサイトにあたえる影響

WEB表示速度は早いに越したことはない。

8WEB世界がどう変化して何が今求められているのか

9

変化が早いWEB世界
コンテンツの変化＞
テキスト形式＞
画像・音声動画・VRコンテンツ

コンテンツサイズが増加し続けている

10

変化が早いWEB世界
転送量・トラフィックの推移（2016年～2021年）
2021 年までに、モバイル データトラフィックの合計は、1 ヵ月あたり 49 エクサバイト（2016 年の 7 倍）まで増加すると予測。

2016 年から 2021 年の間に、モバイル データ トラフィックは CAGR(年平均成長率) 47 % 増加。

（出典）・Cisco VNI
Mobile ・総務省

11

変化が早いWEB世界
デバイスの変化（インターネット回線）→デスクトップPC
固定回線→
ラップトップ
無線LAN

スマホ・タブレット
3G/4G

デバイス・ネットワークの多角化

12変化が早いWEB世界
常時利用するデバイス比率の統計

スマホ利用者 ＞ PC利用者

Line 〈調査報告〉インターネットの利用環境 定点調査（2017年上期）
https://linecorp.com/ja/pr/news/ja/2017/1819

13

近年のWEBに求められていること

低速・不安定な回線で低いスペックのデバイスからリッチコンテンツを高速に表示することが求められている。

14

WEB高速化をどのようにおこなえば良いのか

15

WEB高速化の種類
バックエンドの最適化
クライアントが、画像などのコンテンツをダウンロードするまでの工程
・ネットワーク速度・サーバースペック
・プロトコル（HTTP2）・キャッシュ（CDN）
・ミドルウェア最適化（WEBサーバー・DB）
・コンテンツ圧縮（Gzip Brotli）

フロントエンドの最適化
コンテンツをダウンロードした後に、ブラウザ等が表示処理する工程
・コンテンツ最適化（画像圧縮・Minify）
・レンダリング処理最適化
・スクリプト処理最適化
・ネットワーク処理

16

Don’t guess, measure!
（推測するな、計測せよ！）
WEB表示速度は調査からはじまる。
コレをしておけばOK！というおまじないは存在しない。

17

WEB表示速度の計測
Gtmetrix（https://gtmetrix.com）
WEBサイトのURLを入れるだけで様々な項目をスキャンし、トータルスコ
アを表示してくれる。
Yahoo!（YSlow）とGoogle（Page Speed）の両方に対応。

18

WEB表示速度の計測
Gtmetrix（https://gtmetrix.com）

19

WEB表示速度の計測
Test My Site（https://testmysite.withgoogle.com）
Googleが提供しているモバイルからのアクセス時の効果測定に特化

20

WEB表示速度の計測
Test My Site（https://testmysite.withgoogle.com）

21

WEB表示速度の計測
WebPagetest（https://www.webpagetest.org）
Googleが中心となって開発しているオープンソースの合成モニタリングツール

・発生した通信処理の一覧
・ウォーターフォールチャート・一定期間毎のスクリーンショット
・プライベートインスタンスの提供
・低速回線からのアクセス
・ブラウザやデバイス指定
・アクセス地域の指定

22

WEB表示速度の計測
WebPagetest（https://www.webpagetest.org）

23

適切なモニタリングで、適切な箇所（フロント・バックエンド）を適切に高速化していく。

24

CDNで、WEBサイトを高速化する。

25

ＣＤＮの仕組み
多数のエッジサーバー
CDNは地理的にはなれた場所にエッジとよばれるサーバーを設置。
ユーザーのアクセス元を判別しネットワーク的に最も近い場所からコンテンツを配信するしくみ。

賢い技術＝CDN
ユーザーが自分の国から一番近いミラーサイトを選ぶこと無く賢く自動で近いサーバーから配信することができる。

26

ＣＤＮの仕組み
ネットワーク的な距離
インターネット自体がその名の通りルーター同士のつながりのようなメッシュ構造で出来ているネットワーク。
アクセス先に到達するまでに、アクセス元から近いルーター、そのルーターが知ってる次の経路、というように経由を繰り返し、ようやく目的地のサーバーにたどり着きます。
この経由する数をHOP数といい、アクセス元から目的地まで何HOPかけて到達するかというのがアクセス速度に比例します。

AからBは物理的な距離は同等でもネットワーク的な距離でみると上の経路のほうが下の経路より早い。
HOP数が少ないほうが高速
27

ＣＤＮの仕組み
WEBサイトの前段にCDNが配置され、アクセスがあった際オリジナルのサーバーからコンテンツのコピーを取得。
次回以降CDNから配信する。
キャッシュ前

初回リクエスト

コンテンツをコピー

初回コンテンツ取得

キャッシュ後サーバーへアクセスがこない

CDNにコピーされたコンテンツを配信
28

CDNがもたらすメリット
アクセス集中時
従来まで、アクセス集中時WEBサイトが見られなくなった際エンジニアは一体どうしていたのか。

１：サーバーをセットアップ

２：タクシーでデータセンターに運ぶ
３：頑張って運んだサーバーを設置

クラウドサービスでカバーが可能。

４：静かに見守る
AWSに代表されるクラウドサービスは、２ ３という部分をカバーしている。
WEBでポチポチすればOK。または、自動で追加する仕組みを実装できる。
29

CDNがもたらすメリット

サーバーのスケールではカバーできない領域

それは、ネットワーク転送量（トラフィック）
クラウド事業者で利用できる上位回線の上限は決まっている。
リソースはあくまで他のユーザーとシェアである。

30

CDNがもたらすメリット
CDNがサポートできる領域
サーバーのリソース負荷以外に、上位レイヤーのネットワークまでサポートできる。
CDN側は十分なネットワークを確保しており、初回以降アクセスがWEBサイトに着信しないため、見守る必要もない。
さらに、既存のWEBコンテンツや、サーバーの設定などを変える必要がなく導入できることもポイント。

１：サーバーをセットアップ
２：タクシーでデータセンターに運ぶ
３：頑張って運んだサーバーを設置

クラウドでカバー可能

CDNでカバー可能

４：静かに見守る31

進化するCDN
次世代CDNとは 頻繁に更新されるニュースサイト
 動的コンテンツのキャッシュ制御（Cookie/Header/Query）
 PC・スマホの動画配信（HLS連携）
 動画配信用に最適化された通信 ワンタイムURL
 コンテンツのセキュリティを担保するキャッシュ プロトコル HTTP/2による多重配信/SSLネゴシエーション高速化（HTTPSの終端）
 コンテンツ最適化
 コンテンツ圧縮（Gzip Brotli）画像最適化（Lossless リサイズ）
 DDos攻撃対策
 WAFなどに変ってCDNで攻撃を吸収する。
32

高速化するバックエンド技術
HTTP/2による多重配信/SSLネゴシエーション高速化
HTTP/1.1の場合1つのリクエストが完了するまで、原則次のリクエストを送ることができません。
フロントエンド高速化トリック（ネットワーク最適化）
リクエストを減らす手法（CSSスプライト・画像インライン化）
ドメインシャーディング（複数ドメイン利用）
バックエンドの技術によって覆される。

HTTP/2による優先ストリーム配信
クライアントがPRIORITYフレー ムを用いてストリームに優先度を付けることが可能となりました。
ページの表示に関係ないJavascriptなどのリソースの読み込みよりHTMLやCSSなどを優先的にロードしてもらうための呪文。
「ページ最後にJavascript」というフロントエンド最適化手法が覆される。

https://http2.redbox.ne.jp/ （HTTP/2デモサイト）
33

高速化するバックエンド技術
コンテンツ圧縮
テキスト形式のコンテンツは、CDN側でGzip圧縮しキャッシュ。

＝
WEBサーバーのCPU負荷・転送量トラフィックが削減※Gzipより20％以上圧縮できるBrotli(ブロトリ)をサポートしたCDNあり。

画像最適化
CDN側で画像をロスレスし、画像サイズを削減する。
Client Hintsにより、デバイスに最適な画像サイズやフォーマットに変換。

34

高速化するバックエンド技術
DDos攻撃対策
従来まで、攻撃検知や攻撃から身を守る為には、高価なWAFやアプライアンスを導入する必要があった。また、Ddos対策には物理的なサーバー増強などで対応する必要があった。
CDNは、WEBサーバーの全段でDdosによる攻撃を防御します。
また、CDN内部で不正なリクエストをブロックし脆弱性攻撃に対応します。

35

レッドボックスの紹介
主な事業
・CDNサービス
・動画配信事業・WEB高速化コンサルティング
・セキュリティ事業

ミッション・マインド

無料CDN✓ オープンな低価格CDNの提供✓ 柔軟なカスタマイズを提供

https://cdn.tokyo✓ お客様の更に先のユーザーまで考慮した運用✓ CDNサービスの普及活動

https://blog.redbox.ne.jp36Edge Cache CDN

一歩先をゆく
日本初の月額定額CDNサービスです。

国内初！
月額定額料金

オーダーメイドオプション

信頼の高可用性

こだわりのサポート

37

利用用途
小規模から大規模配信まであらゆるニーズをカバーします。
主なご利用用途
ソーシャルゲーム

VOD動画配信

導入サイト数120以上

CMS高速化＝電子書籍

アプリのパッチ配信

ピークアクセス時

60Gbps以上

38レッドボックスだからデキル
こだわりのポイント

ユニークな
独自技術

リクエストベースの機能拡張

最新技術の採用39

国内初！定額CDN
標準で200Mbps 国内高速回線を採用
上位プランはうれしいバースト付き。
突発的なアクセスもカバーし超過料金を気にすることなく安心してご利用頂けます。

コスト削減出来るうれしい無料サービス✓ オリジンGET時の転送量✓ リクエスト数による料金✓ 転送量超過による追加料金✓ キャッシュ削除リクエスト料金

クラウド型CDNによくある様々な料金カウント方式を排除しました。

40

Edge Cache CDNの特徴（独自技術）
国内初！オリジンクラスター
お客様のオリジンサーバーを最大2台まで登録する事が出来ます。
オリジンサーバー障害時は正常なオリジンサーバー側からコンテンツを取得する独自技術です。

オリジンサーバーの障害対策が可能！

キャッシュ削除（FastPurge）

キャッシュ済のコンテンツは、管理画面及びAPI経由で削除が可能です。
独自技術のFastPurgeにより即時キャッシュ削除が行われます。
Waiting for 5 min over...

正規表現対応！

他社では反映待ちが発生

FastPurgeにより即時削除
41

Edge Cache CDNの特徴（独自技術）
過去から学び未来を予想する人工知能が、過去のアクセス状況を学習し、 未来のトラフィックを予測。
アクセスが発生した時点で、 各ロケーションの負荷状況やネットワークレイテンシを考慮し、 最も早く配信できる最適なエッジロケーションに振り分けを行います。

42

Edge Cache CDN

リクエストベース拡張方式

求められる機能拡張
私たちは「こんな機能がほしい！」を見逃しません。
頂いたリクエストをベースに機能追加を随時行っています。

これまでの実績✓ 指定IP制限✓ 各種アクセスログ表示✓ クエリストリングのカスタマイズ✓ キャッシュ削除（API対応）✓ 国外IP制限(GeoIP Block)✓ 動画のレンジリクエスト
その他多数
43

Edge Cache CDN

最新技術の採用

高速化に関する最新技術を採用
各レイヤー毎に最新技術やトレンドを先行採用します。

TCP FAST OPEN

TCP Slow Start

2014/6

2014/92015/62015/11

Realtime Graph

Admin PanelAI CDN

Instant STREAM

2016/2

2016/6

2016/92016/1044

Edge Cache CDN

最新技術の採用

高速化に関する最新技術を採用
各レイヤー毎に最新技術やトレンドを先行採用します。

Tag Purge

アーカイブグラフ

無料CDN
Rapid START

WordPress
CDN Plugin

2017/1

2017/52017/62017/7

CDN Documents

Brotli圧縮CDN

海外定額配信

WAF+CDN

2017/112017/12（2018

WEB高速化）45

まとめWEB表示速度はどのようなサイトでも意識して対策する必要がある重要事項。

WEB高速化は

CDNサービスは離脱率低下・SEO対策に最適
フロントエンドもバックエンドも対策が必要
モバイルデバイスからのアクセスも考慮が必要

次世代機能で高速化を加速させる。
速度に直結し、UX・売上を向上させる。
フロントエンドの一部最適化が無加工で可能。
攻撃対策にも活用。

CDNサービスは導入を検討するのではなく、どのような規模でもデフォルトで導入する状況となっている。
46

レッドボックスは低価格CDNのリーディングカンパニーです。
CDNに関するご不明点は、何でもお答えします。
「発表資料をみた！」と、お気軽にお問い合わせください。

小川： Katsuhisa.ogawa@redbox.ne.jp
合同会社レッドボックス
https://www.redbox.ne.jp