CDNを活用したWeb高速化術とマルチデバイス時代におけるWeb速度の重要性 /cdn webpage speed

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

Transcript

1. CDNを活用したWeb高速化術と マルチデバイス時代における Web速度の重要性 効果が高いWeb 高速化とは？
2. About me 2 ABOUT ME JOB ：合同会社レッドボックス CEO Name：小川 かつひさ (KATSUHISA OGAWA） Like ：キャッシュ・負荷分散・Web高速化 https://www.facebook.com/ogawaka https://blog.redbox.ne.jp @ogawaka キャッシュ屋で 検索
3. 執筆・査読 3 ABOUT ME Software Design 2018年6月号特集 CDN［超］活用ガイド高速配信の舞台裏 「現場のプロから学ぶ SEO技術バイブル」 Web高速化セクション査読
4. Web高速化大会優勝（WordPress） 4 ABOUT ME 第3回CMSプロレス ウェブページ速度 改善「最速王者決定戦」優勝 concrete5, MovableTypeが並ぶ中、 唯一WordPressで挑んで優勝！
5. Today’s AGENDA 5 ✓ Web世界の変化・高速化が求められる理由 ✓ 2018年～Web高速化の年 ✓ 遅いWebサイト・速いWebサイトとは ✓ Web高速化の失敗を70％削減させる方法 ✓ 効果が高い3つのWeb高速化 ✓ CDNを活用したWeb高速化 ✓ 早くみせるフロントトリックとは？ ✓ Web高速化まとめ ✓ 質疑・応答 Web高速化の 意味？ 成功する Web高速化 Web高速化の スパイス
6. 6 Webの世界がどう変化して 今何が求められているのか
7. 変化が早いWeb世界 7 デバイスの変化（インターネット回線） デスクトップPC 固定回線 スマホ・タブレット 3G/4G ラップトップ 無線LAN → → デバイス・ネットワークの多角化
8. 変化が早いWeb世界 8 常時利用するデバイス比率の統計 Line 〈調査報告〉インターネットの利用環境 定点調査（2017年上期） https://linecorp.com/ja/pr/news/ja/2017/1819 スマホ利用者 ＞ PC利用者
9. 変化が早いWeb世界 9 コンテンツの変化 テキスト形式 画像・音声 動画・VRコンテンツ ＞ ＞ Webページが読み込むコンテンツサイズは 増加し続けている
10. 変化が早いWeb世界 10 転送量・トラフィックの推移（2016年～2021年） 2021 年までに、モバイル データトラフィックの合計は、 1 ヵ月あたり 49 エクサバイトまで増加すると予測。 （出典）・Cisco VNI Mobile ・総務省 2016 年の 約7 倍！
11. 変化が早いWeb世界 11 転送量・トラフィックの推移（2016年～2021年） 2016 年から 2021 年の間に、モバイル データ トラフィックは CAGR(年平均成長率) 47 % 増加 （出典）・Cisco VNI Mobile ・総務省
12. 12 近年のWebで考慮すべきポイント 低速・不安定な回線で 低いスペックのデバイスでも リッチコンテンツを高速に表示でき るよう考慮すること
13. 13 ２０１８年～ Web高速化の年
14. ２０１８年～Web高速化の年 14 「Google スピード アップデート」2018年7月から始動！ モバイルアクセスの読み込み速度を 検索ランキングの要因として反映。 従来まで： デスクトップ向け検索 モバイル向け検索 デスクトップ向けページの表示速度で判断 ＝ デスクトップ向け ページ速度だけの 対策でOKだった。
15. ２０１８年～Web高速化の年 15 モバイル向け検索が独立 ＝ デスクトップ向けページの 表示速度で判断 スピードアップデート後： デスクトップ向け検索 モバイル向け検索 モバイル向けページの 表示速度で判断 ＝ 今後は、モバイル表示 速度がより重要に！
16. ２０１８年～Web高速化の年 16 Googleの発表 「ユーザーに本当に遅い体験を提供しているようなページについてのみ 影響」「ただし、それは遅さに応じて段階的に適用されます。」 他社や競合サイトがWeb高速化をおこなうと、 結果的に対策していない自社Webサイトが遅くなるリスク。
17. 表示速度がWebサイトにあたえる影響 17 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%増加
18. 表示速度がWebサイトにあたえる影響 18 表示速度戦略（1994 Amazon） 本の画像を利用せず、速い表示速度を意識していた。
19. 表示速度がWebサイトにあたえる影響 19 今も昔もWeb表示速度は 早いに越したことはない。
20. 20 遅いWebサイト・速いWebサイト
21. 遅いWebサイト・速いWebサイトとは？ 21 遅いWeｂ 速いWeb .
22. 22 Web高速化の失敗を 70％削減させる方法
23. Web高速化の失敗を70％削減させる方法 23 Web高速化 100件以上 70％ 失敗 70％の企業・Web担当者が Web高速化に失敗している。 ＞
24. Web高速化の失敗を70％削減させる方法 24 なぜWeb高速化に失敗するのか？
25. Web高速化の失敗を70％削減させる方法 25 １：経験や思い込みによる推測
26. Web高速化の失敗を70％削減させる方法 26 サーバ・インフラエンジニア ネットワークエンジニア CPUとメモリー多く使ってる！ サーバースペック上げましょう。 ユーザーから最短経路に サーバー再配置しましょう。 データベースエンジニア フロントエンドエンジニア 遅いクエリがあるので テーブル見直しましょう。 JSのコードみなおしましょう。
27. Web高速化の失敗を70％削減させる方法 27 それぞれ推測した 遅いポイントを対策 ２：
28. Web高速化の失敗を70％削減させる方法 28 サーバ・インフラエンジニア ネットワークエンジニア CPU・メモリーの空き容量が 増えた！ サーバーがネットワーク的に 近い位置に配置できた！ データベースエンジニア フロントエンドエンジニア テーブルの見直しにより、 DBの負荷が改善した。 JSの見直しによりブロッキング が減った。
29. Web高速化の失敗を70％削減させる方法 29 担当者が見たい 情報だけをみる ３：
30. Web高速化の失敗を70％削減させる方法 30 １：経験や思い込みによる推測 ２：推測した遅いポイントを対策 ３：見たい情報だけをみる 1．2．3の繰り返しで 工数・予算が尽きWeb高速化に失敗。
31. Web高速化の失敗を70％削減させる方法 31 そのWebサイト 本当に速くなりましたか？
32. Web高速化の失敗を70％削減させる方法 32 Web高速化のポイントは 山のようにある。
33. Web高速化の種類 33 クライアントが、画像などのコンテンツをダウンロードするまでの工程 バックエンドの最適化 ✓ ネットワーク速度 ✓ サーバースペック ✓ プロトコル（HTTP2） ✓ キャッシュ（CDN） ✓ ミドルウェア最適化（Webサーバー・DB） ✓ コンテンツ圧縮（Gzip Brotli）
34. Web高速化の種類 34 コンテンツをダウンロードした後に、ブラウザ等が表示処理する工程 フロントエンドの最適化 ✓ コンテンツ最適化（画像圧縮・Minify） ✓ レンダリング処理最適化 ✓ スクリプト処理最適化 ✓ ネットワーク処理
35. 35 Web表示速度は調査からはじまる。 コレをしておけばOK！という おまじないは存在しない。 Don’t guess, measure! （推測するな、計測せよ！）
36. Web表示速度の計測 36 Googleが中心となって開発しているオープンソースの合成モニタリングツール WebPagetest（https://www.webpagetest.org） ・発生した通信処理の一覧 ・ウォーターフォールチャート ・一定期間毎のスクリーンショット ・プライベートインスタンスの提供 ・低速回線からのアクセス ・ブラウザやデバイス指定 ・アクセス地域の指定
37. Web表示速度の計測 37 WebPagetest（https://www.webpagetest.org）
38. Web高速化の失敗を70％削減させる方とは？ 38 1：担当者の経験だけで推測することを避ける。 2：適切なモニタリングで、 適切な箇所（フロント・バックエンド）を 適切に高速化していく。 ３：継続的なモニタリングで 「遅いWeb」でないことを確認。
39. 39 効果が高い３つの高速化トリックとは？
40. 効果が高い３つの高速化トリックとは？ 40 Webが表示されるまでの各工程で、 とにかく 削減・最適化 すること。
41. Webが表示されるまでのプロセスを把握する 41 クライアントからサーバーへ HTMLをリクエスト /index.html Click! ⑴
42. Webが表示されるまでのプロセスを把握する 42 DBからHTMLコンテンツを生成 サーバーからクライアントにHTMLを配信 ⑵ ⑶
43. Webが表示されるまでのプロセスを把握する 43 ブラウザがHTMLコードを解析 HTML内に記載されたJS/CSS/画像 をサーバーへリクエスト ⑷ ⑸
44. Webが表示されるまでのプロセスを把握する 44 サーバーからクライアントにファイル配信 ブラウザレンダリング処理開始 ⑹ ⑺
45. Webが表示されるまでのプロセスを把握する 45 Webサイトが表示！！ ⑻
46. 効果が高い３つの高速化トリックとは？ 46 クライアントからWebサーバーまでの様々な通信を最適化し、 最初にGETされるHTMLコンテンツのダウンロード速度を加速させる。 1：通信・プロトコルの最適化
47. 通信・プロトコルの最適化 47 クライアントがサーバーと初めて通信をする時、3 way handshakeとい う3回通信をおこなう決まり事を最適化する。 TCP通信処理は低速・不安定な回線ほど通信完了までのコストが多く発生。 KEEPALIVE / TCP FAST OPEN / TCP SLOW START TCP通信の最適化 主な設定項目：OS・カーネルのチューニング 通信！ クライアント Webサーバー
48. 通信・プロトコルの最適化 48 ・HTTP/2・QUIC によるプロトコルベースの最適化 ・HTTPSネゴシエーションの最適化 Cipher Suite / SSL Session Cache / OCSP STAPLING プロトコルの最適化 主な設定項目：ミドルウェア全般 SSL通信！ クライアント Webサーバー
49. 効果が高い３つの高速化トリックとは？ 49 Webページのコンテンツサイズを縮小することによって、 ダウンロード完了時間を短縮し高速化。 2：コンテンツサイズの縮小
50. コンテンツサイズの縮小 50 CSS/JS/HTML Minify 画像サイズの縮小 HTMLやCSSはコンテンツのレンダリングスピードに大きく影響する要因の一つ。 コードをMinifyすることにより、コンテンツサイズの縮小をおこなう。 Webサイトのコンテンツサイズは6割以上が画像コンテンツ。 WebPフォーマット変換 / ロスレス圧縮 / リサイズ Minifyとは、空白や改行など不要な文字を削除する作業。 各種ツールでオリジナルファイルを縮小。
51. コンテンツサイズの縮小 51 Brotli / Gzipでコンテンツ圧縮を行いクライアントへ転送するコン テンツサイズを縮小する。※Brotliはクライアントが対応しているか をサーバーサイドで判断し出力分けの必要あり。 コンテンツの圧縮 Gzip・Brotliで圧縮配信 Gzip Brotli クライアント Webサーバー
52. 効果が高い３つの高速化トリックとは？ 52 一定のWeb表示速度であること。 3：表示速度の安定・最適化
53. 表示速度の安定・最適化 53 キャッシュ・CDNの導入 エッジサーバー VPSやクラウド上のWebサーバーは、回線やリソースが他社と共有のため、 時間帯によって、通信が安定しないことがある。 CDNでキャッシュ配信することによって、 ある程度安定したTTFBを維持・DBなどミドルウェアに影響されないレスポンスを提供。 Webサーバー クライアント キャッシュ
54. 54 CDNを活用した Web高速化
55. ＣＤＮの仕組み 55 CDNは地理的にはなれた場所にエッジとよばれるサーバーを設置。 ユーザーのアクセス元を判別しネットワーク的に最も近い場所から コンテンツを配信するしくみ。 多数のエッジサーバー
56. ＣＤＮの仕組み 56 ネットワーク的な距離とは？ 目的のサーバーに到達するまでに経由するルーターの数（HOP数）が 少ない方がネットワーク的に距離が最短ということ。※１ 東京リージョン CDN 東京都内から アクセス CDNが誘導 上の経路がネットワーク的に最短・高速！ ルーター ルーター ルーター ルーター ※１実際はHOP数以外にもレイテンシなど様々な内容が考慮される
57. ＣＤＮの開始方法 58 【DNSレコード】 www.redbox.ne.jp A 111.222.333.444 www.redbox.ne.jp 111.222.333.444 クライアントは直接 Webサーバーにアクセ ス CDN適用前 Webサーバー
58. ＣＤＮの開始方法 59 【DNSレコード】 www.redbox.ne.jp CNAME redbox.cdnw.net CDNのサブドメインに CNAMEレコード設定する クライアントは、CDN 経由でWebサーバーに アクセス CDN適用後 エッジサーバー （CDN） Webサーバー
59. CDNができること 60 通信の最適化 プロトコルの最適化 コンテンツサイズ 縮小・圧縮 表示速度の安定 最適化 CDNはコンテンツ・サーバー環境に変更を加えることな く、各種最適化を自動で実施し全包囲カバーが可能
60. ＣＤＮの仕組み 61 初回コンテンツ取得 サーバーへ アクセスがこない キャッシュ前 キャッシュ後 初回リクエスト コンテンツをコピー CDNにコピーされた コンテンツを配信 コンテンツ 最適化 通信最適化
61. CDNの効果 62 共有回線・共有サーバーを利用している場合、時間帯によって、 サーバーリソース・回線の遅延が発生する可能性がある。 DBなどのミドルウェアに影響されないTTFBを維持し、 最短経路を通ってコンテンツを配信するため早い表示速度を保つ事ができる。 CDNで表示速度の安定化 最適化前 最適化後
62. CDNの効果 63
63. 64 早くみせるフロントトリックとは？
64. 早くみせるフロントトリック 65 ブラウザーでWebサイトを表示した際、 スクロールせずに最初に見える範囲（ファーストビュー）を早くする。 ココ！！
65. 早くみせるフロントトリック 66 LAZY LOAD Service Worker PRE-RENDERING First View CSS Trick HTTP/2 SERVER PUSH 5つのトリックを紹介
66. まとめ 67 まとめ Web高速化 ✓ Googleアルゴリズム変更による新たなSEO対策 ✓ モバイルページスピード向上は必須 ✓ Web高速化は正しい継続的な測定からスタートすること ✓ フロントエンドもバックエンドも対策が必要 ✓ Web高速化 3つのトリック「コンテンツ」「通信」「速度安定化」 ✓ Web表示速度を加速させるスタンダードな技術 ✓ フロントエンド・バックエンドの最適化が無加工で可能 ✓ 低スペックなWebサーバーも、高スペックに変化させる CDNサービス
67. 68 Web高速化 質疑応答 www.facebook.com/ogawaka @ogawaka SNSでもフォロー 質問受付中！
68. THANKS!