Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Today’s AGENDA 5 ✓ Web世界の変化・高速化が求められる理由 ✓ 2018年～Web高速化の年 ✓ 遅いWebサイト・速いWebサイトとは ✓ Web高速化の失敗を70％削減させる方法 ✓ 効果が高い3つのWeb高速化 ✓ CDNを活用したWeb高速化 ✓ 早くみせるフロントトリックとは？ ✓ Web高速化まとめ ✓ 質疑・応答 Web高速化の 意味？ 成功する Web高速化 Web高速化の スパイス

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 近年のWebで考慮すべきポイント 低速・不安定な回線で 低いスペックのデバイスでも リッチコンテンツを高速に表示でき るよう考慮すること

Slide 13

Slide 13 text

13 ２０１８年～ Web高速化の年

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

表示速度が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%増加

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 遅いWebサイト・速いWebサイト

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

54 CDNを活用した Web高速化

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ＣＤＮの仕組み 56 ネットワーク的な距離とは？ 目的のサーバーに到達するまでに経由するルーターの数（HOP数）が 少ない方がネットワーク的に距離が最短ということ。※１ 東京リージョン CDN 東京都内から アクセス CDNが誘導 上の経路がネットワーク的に最短・高速！ ルーター ルーター ルーター ルーター ※１実際はHOP数以外にもレイテンシなど様々な内容が考慮される

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

CDNの効果 62 共有回線・共有サーバーを利用している場合、時間帯によって、 サーバーリソース・回線の遅延が発生する可能性がある。 DBなどのミドルウェアに影響されないTTFBを維持し、 最短経路を通ってコンテンツを配信するため早い表示速度を保つ事ができる。 CDNで表示速度の安定化 最適化前 最適化後

Slide 62

Slide 62 text

CDNの効果 63

Slide 63

Slide 63 text

64 早くみせるフロントトリックとは？

Slide 64

Slide 64 text

早くみせるフロントトリック 65 ブラウザーでWebサイトを表示した際、 スクロールせずに最初に見える範囲（ファーストビュー）を早くする。 ココ！！

Slide 65

Slide 65 text

早くみせるフロントトリック 66 LAZY LOAD Service Worker PRE-RENDERING First View CSS Trick HTTP/2 SERVER PUSH 5つのトリックを紹介

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

THANKS!