近年、マルチデバイス環境においてより一層注目されている Web 表示速度。 Google SEO ランキング指標の一つにもなっていることから、HTTPS 化に続きWeb表示速度がより重要な時代となりました。 そこで、なぜ Web 表示速度が重要視されているのか、Web 表示速度を上げるために押えておくべきチューニング方法や手順・ポイントの解説と共に、近年急速に普及している CDN サービスを活用した具体的な Web 高速化手法についてご紹介します。

2. CDNを活用したWeb高速化術と
マルチデバイス時代における
Web速度の重要性
効果が高いWeb
高速化とは？

3. About me
3
ABOUTME
JOB ：合同会社レッドボックス CEO
Name：小川 かつひさ (KATSUHISA OGAWA）
Like ：キャッシュ・負荷分散・Web高速化
https://www.facebook.com/ogawaka
https://blog.redbox.ne.jp
@ogawaka キャッシュ屋で
検索

4. 執筆・査読
4
ABOUTME
Software Design 2018年6月号特集
CDN［超］活用ガイド高速配信の舞台裏
「現場のプロから学ぶ SEO技術バイブル」
Web高速化セクション査読

5. Web高速化大会優勝（WordPress）
5
ABOUTME
第3回CMSプロレス ウェブページ速度
改善「最速王者決定戦」優勝
concrete5, MovableTypeが並ぶ中、
唯一WordPressで挑んで優勝！

6. Today’s AGENDA
6
✓ Web世界の変化・高速化が求められる理由
✓ 2018年～Web高速化の年
✓ 遅いWebサイト・速いWebサイトとは
✓ Web高速化の失敗を70％削減させる方法
✓ 効果が高い3つのWeb高速化
✓ WordPress単体でデキル高速化
✓ CDNを活用したWeb高速化
✓ Web高速化まとめ
✓ 質疑・応答
Web高速化の
意味？
成功する
Web高速化
Web高速化の
スパイス

7. 7
Webの世界がどう変化して
今何が求められているのか

8. 変化が早いWeb世界
8
デバイスの変化（インターネット回線）
デスクトップPC
固定回線
スマホ・タブレット
3G/4G
ラップトップ
無線LAN
→ →
デバイス・ネットワークの多角化

9. 変化が早いWeb世界
9
常時利用するデバイス比率の統計
Line 〈調査報告〉インターネットの利用環境 定点調査（2017年上期）
https://linecorp.com/ja/pr/news/ja/2017/1819
スマホ利用者 ＞ PC利用者

10. 変化が早いWeb世界
10
コンテンツの変化
テキスト形式 画像・音声 動画・VRコンテンツ
＞ ＞
Webページが読み込むコンテンツサイズは
増加し続けている

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

12. 変化が早いWeb世界
12
転送量・トラフィックの推移（2016年～2021年）
2016 年から 2021 年の間に、モバイル データ トラフィックは
CAGR(年平均成長率) 47 % 増加
（出典）・Cisco VNI
Mobile ・総務省

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

14. 14
２０１８年～
Web高速化の年

15. ２０１８年～Web高速化の年
15
「Google スピード アップデート」2018年7月から始動！
モバイルアクセスの読み込み速度を
検索ランキングの要因として反映。
従来まで：
デスクトップ向け検索 モバイル向け検索
デスクトップ向けページの表示速度で判断
＝
デスクトップ向け
ページ速度だけの
対策でOKだった。

16. ２０１８年～Web高速化の年
16
モバイル向け検索が独立
＝
デスクトップ向けページの
表示速度で判断
スピードアップデート後：
デスクトップ向け検索 モバイル向け検索
モバイル向けページの
表示速度で判断
＝
今後は、モバイル表示
速度がより重要に！

17. ２０１８年～Web高速化の年
17
Googleの発表
「ユーザーに本当に遅い体験を提供しているようなページについてのみ
影響」「ただし、それは遅さに応じて段階的に適用されます。」
他社や競合サイトがWeb高速化をおこなうと、
結果的に対策していない自社Webサイトが遅くなるリスク。

18. 表示速度がWebサイトにあたえる影響
18
Web表示速度は直帰率に比例（2017年レポート）
Find out how you stack up to new industry benchmarks for mobile page speedより
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-
speed-new-industry-benchmarks/
Googleは126か国でモバイル向け広告のランディングページ90万サイトを対象に調査
表示速度が遅いWebサイトはみられない！
Web表示速度が
1秒から3秒に落ちると、直帰率は32%増加
1秒から5秒に落ちると、直帰率は90%増加
1秒から6秒に落ちると、直帰率は106%増加
1秒から7秒に落ちると、直帰率は113%増加
1秒から10秒に落ちると、直帰率は123%増加

19. 表示速度がWebサイトにあたえる影響
19
表示速度戦略（1994 Amazon）
本の画像を利用せず、速い表示速度を意識していた。

20. 表示速度がWebサイトにあたえる影響
20
今も昔もWeb表示速度は
早いに越したことはない。

21. 21
遅いWebサイト・速いWebサイト

22. 遅いWebサイト・速いWebサイトとは？
22
遅いWeｂ 速いWeb .

23. 23
Web高速化の失敗を
70％削減させる方法

24. Web高速化の失敗を70％削減させる方法
24
Web高速化
100件以上
70％
失敗
70％の企業・Web担当者が
Web高速化に失敗している。
＞

25. Web高速化の失敗を70％削減させる方法
25
なぜWeb高速化に失敗するのか？

26. Web高速化の失敗を70％削減させる方法
26
１：経験や思い込みによる推測

27. Web高速化の失敗を70％削減させる方法
27
サーバ・インフラエンジニア
ネットワークエンジニア
CPUとメモリー多く使ってる！
サーバースペック上げましょう。
ユーザーから最短経路に
サーバー再配置しましょう。
データベースエンジニア
フロントエンドエンジニア
遅いクエリがあるので
テーブル見直しましょう。
JSのコードみなおしましょう。

28. Web高速化の失敗を70％削減させる方法
28
それぞれ推測した
遅いポイントを対策
２：

29. Web高速化の失敗を70％削減させる方法
29
サーバ・インフラエンジニア
ネットワークエンジニア
CPU・メモリーの空き容量が
増えた！
サーバーがネットワーク的に
近い位置に配置できた！
データベースエンジニア
フロントエンドエンジニア
テーブルの見直しにより、
DBの負荷が改善した。
JSの見直しによりブロッキング
が減った。

30. Web高速化の失敗を70％削減させる方法
30
担当者が見たい
情報だけをみる
３：

31. Web高速化の失敗を70％削減させる方法
31
１：経験や思い込みによる推測
２：推測した遅いポイントを対策３：見たい情報だけをみる
1．2．3の繰り返しで
工数・予算が尽きWeb高速化に失敗。

32. Web高速化の失敗を70％削減させる方法
32
そのWebサイト
本当に速くなりましたか？

33. Web高速化の失敗を70％削減させる方法
33
Web高速化のポイントは
山のようにある。

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

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

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

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

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

39. Web表示速度の計測
39
Googleが中心となって開発しているオープンソースの合成モニタリングツール
WebPagetest（https://www.webpagetest.org）
・発生した通信処理の一覧
・ウォーターフォールチャート
・一定期間毎のスクリーンショット
・プライベートインスタンスの提供
・低速回線からのアクセス
・ブラウザやデバイス指定
・アクセス地域の指定

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

41. Web高速化の失敗を70％削減させる方とは？
41
1：担当者の経験だけで推測することを避ける。
2：適切なモニタリングで、
適切な箇所（フロント・バックエンド）を
適切に高速化していく。

42. 42
効果が高い３つの高速化トリックとは？

43. 効果が高い３つの高速化トリックとは？
43
Webが表示されるまでの各工程で、
とにかく 削減・最適化 すること。

44. Webが表示されるまでのプロセスを把握する
44
クライアントからサーバーへ
HTMLをリクエスト
/index.html
Click!
⑴

45. Webが表示されるまでのプロセスを把握する
45
DBからHTMLコンテンツを生成
サーバーからクライアントにHTMLを配信
⑵
⑶

46. Webが表示されるまでのプロセスを把握する
46
ブラウザがHTMLコードを解析
HTML内に記載されたJS/CSS/画像
をサーバーへリクエスト
⑷
⑸

47. Webが表示されるまでのプロセスを把握する
47
サーバーからクライアントにファイル配信
ブラウザレンダリング処理開始
⑹
⑺

48. Webが表示されるまでのプロセスを把握する
50
Webサイトが表示！！⑻

49. 効果が高い３つの高速化トリックとは？
51
クライアントからWebサーバーまでの様々な通信を最適化し、
最初にGETされるHTMLコンテンツのダウンロード速度を加速させる。
1：通信・プロトコルの最適化

50. 通信・プロトコルの最適化
52
クライアントがサーバーと初めて通信をする時、3 way handshakeとい
う3回通信をおこなう決まり事を最適化する。
TCP通信処理は低速・不安定な回線ほど通信完了までのコストが多く発生。
KEEPALIVE / TCP FAST OPEN / TCP SLOW START
TCP通信の最適化
主な設定項目：OS・カーネルのチューニング
通信！
クライアント Webサーバー

51. 通信・プロトコルの最適化
53
・HTTP/2・QUIC によるプロトコルベースの最適化
・HTTPSネゴシエーションの最適化
Cipher Suite / SSL Session Cache / OCSP STAPLING
プロトコルの最適化
主な設定項目：ミドルウェア全般
SSL通信！クライアント
Webサーバー

52. 効果が高い３つの高速化トリックとは？
54
Webページのコンテンツサイズを縮小することによって、
ダウンロード完了時間を短縮し高速化。
2：コンテンツサイズの縮小

53. コンテンツサイズの縮小
55
CSS/JS/HTML Minify
画像サイズの縮小
HTMLやCSSはコンテンツのレンダリングスピードに大きく影響する要因の一つ。
コードをMinifyすることにより、コンテンツサイズの縮小をおこなう。
Webサイトのコンテンツサイズは6割以上が画像コンテンツ。
WebPフォーマット変換 / ロスレス圧縮 / リサイズ
Minifyとは、空白や改行など不要な文字を削除する作業。
各種ツールでオリジナルファイルを縮小。

54. コンテンツサイズの縮小
56
Brotli / Gzipでコンテンツ圧縮を行いクライアントへ転送するコン
テンツサイズを縮小する。※Brotliはクライアントが対応しているか
をサーバーサイドで判断し出力分けの必要あり。
コンテンツの圧縮
Gzip・Brotliで圧縮配信
Gzip Brotli
クライアント
Webサーバー

55. 効果が高い３つの高速化トリックとは？
57
常に一定のWeb表示速度であること。
3：表示速度の安定・最適化

56. 表示速度の安定・最適化
58
キャッシュ・CDNの導入
エッジサーバー
VPSやクラウド上のWebサーバーは、回線やリソースが他社と共有のため、時間帯によっ
て、通信が安定しないことがある。
CDNでキャッシュ配信することによって、
常に一定のTTFBを維持・安定したレスポンスを提供。
Webサーバー
クライアント
キャッシュ

57. 効果が高い３つの高速化トリックとは？
59
その他の高速化トリック
LAZY LOAD
Service Worker
PRE-RENDERING
HTTP/2 SERVER PUSH

58. 60
WordPress
単体でデキル高速化

59. WordPress単体でデキル対策
61
通信の最適化
プロトコルの最適化
コンテンツサイズ
縮小・圧縮
表示速度の安定
最適化

60. おすすめプラグイン
62
LiteSpeed Cache
HTMLやCSSはコンテンツのレンダリングスピードに大きく影響する要因の一つ。
コードをMinify化することにより、コンテンツサイズの縮小をおこなう。

61. 63
CDNを活用した
Web高速化

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

63. ＣＤＮの仕組み
65
ネットワーク的な距離とは？
目的のサーバーに到達するまでに経由するルーターの数（HOP数）が
少ない方がネットワーク的に距離が最短ということ。
東京リージョン
CDN
東京都内から
アクセス
CDNが誘導
上の経路がネットワーク的に最短・高速！
ルーター
ルーター
ルーター ルーター

64. ＣＤＮの開始方法
67
【DNSレコード】
www.redbox.ne.jp A 111.222.333.444
www.redbox.ne.jp
111.222.333.444
クライアントは直接
Webサーバーにアクセ
ス
CDN適用前

65. ＣＤＮの開始方法
68
【DNSレコード】
www.redbox.ne.jp CNAME redbox.cdnw.net
CDNのサブドメインに
CNAMEレコード設定する
クライアントは、CDN
経由でWebサーバーに
アクセス
CDN適用後 エッジサーバー
（CDN）

66. CDNができること
69
通信の最適化
プロトコルの最適化
コンテンツサイズ
縮小・圧縮
表示速度の安定
最適化
CDNはコンテンツ・サーバー環境に変更を加えることな
く、各種最適化を自動で実施し全包囲カバーが可能

67. ＣＤＮの仕組み
70
初回コンテンツ取得
サーバーへ
アクセスがこない
キャッシュ前
キャッシュ後
初回リクエスト
コンテンツをコピー
CDNにコピーされた
コンテンツを配信
コンテンツ
最適化
通信最適化

68. CDNの効果
71
共有回線・共有サーバーを利用している場合、時間帯によって、
サーバーリソース・回線の遅延が発生する可能性がある。
CDNを導入しキャッシュ配信することによって常に一定のTTFBを維持し、最短経路
を通ってコンテンツを配信するため早い表示速度を保つ事ができる。
CDNで表示速度の安定化
最適化前 最適化後

69. CDNの効果
72

70. まとめ
73
まとめ
Web高速化
✓ Googleアルゴリズム変更による新たなSEO対策
✓ モバイルページスピード向上は必須
✓ Web高速化は正しい測定からスタートすること
✓ フロントエンドもバックエンドも対策が必要
✓ Web高速化 3つのトリック「コンテンツ」「通信」「速度安定化」
✓ Web表示速度を加速させるスタンダードな技術
✓ フロントエンド・バックエンドの最適化が無加工で可能
✓ 低スペックなWebサーバーも、高スペックに変化させる
CDNサービス

71. 74
Web高速化 質疑応答
www.facebook.com/ogawaka
@ogawaka SNSでもフォロー
質問受付中！

72. THANKS!