入門 監視 輪読会#4 6章 フロントエンド監視

Transcript

1. 「入門 監視」輪読会#4 6章 フロントエンド監視 2020/06/27 nntsugu
2. 6章 フロントエンド監視
3. 6章　フロントエンド監視 6.1　遅いアプリケーションのコスト 6.2　フロントエンド監視の2つのアプローチ 6.3　DOM 6.3.1　フロントエンドパフォーマンスのメトリクス 6.3.2　素晴らしい！　でもどうやったらいいの？ 6.4　ロギング 6.5　シンセティック監視 6.6　まとめ 目次
4. Internet 6章 フロントエンド監視 とは
5. Internet 6章 フロントエンド監視 とは Service
6. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service
7. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service
8. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service 対象外
9. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service 対象外
10. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service
11. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像
12. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像 - ブラウザなどでロード・処理されるも のの監視のお話
13. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像 - ブラウザなどでロード・処理されるも のの監視のお話 - 監視のポイントは
14. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像 - ブラウザなどでロード・処理されるも のの監視のお話 - 監視のポイントは - ロード時間
15. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像 - ブラウザなどでロード・処理されるも のの監視のお話 - 監視のポイントは - ロード時間 - JSの例外
16. Internet 6章 フロントエンド監視 とは LB Proxy AP Cache DB Service - HTML/CSS/JS/画像 - ブラウザなどでロード・処理されるも のの監視のお話 - 監視のポイントは - ロード時間 - JSの例外
17. 6.1 遅いアプリケーションのコスト なぜフロントエンドを監視するか？
18. 6.1 遅いアプリケーションのコスト なぜフロントエンドを監視するか？ →フロントエンドのパフォーマンスを改善するため
19. 6.1 遅いアプリケーションのコスト なぜフロントエンドを監視するか？ →フロントエンドのパフォーマンスを改善するため →パフォーマンスを改善すると
20. 6.1 遅いアプリケーションのコスト なぜフロントエンドを監視するか？ →フロントエンドのパフォーマンスを改善するため →パフォーマンスを改善すると - トラフィック(SEO含む)、コンバージョン、売上が増加する
21. 6.2 フロントエンド監視の2つのアプローチ どうフロントエンドを監視するか？
22. 6.2 フロントエンド監視の2つのアプローチ どうフロントエンドを監視するか？ 1. リアルユーザ監視 (Real user monitoring, RUM)
23. 6.2 フロントエンド監視の2つのアプローチ どうフロントエンドを監視するか？ 1. リアルユーザ監視 (Real user monitoring, RUM) 2. シンセティック監視 (Synthetic monitoring)
24. 6.2 フロントエンド監視の2つのアプローチ どうフロントエンドを監視するか？ 1. リアルユーザ監視 (Real user monitoring, RUM) → ブラウザからのメトリクス・ログ収集 2. シンセティック監視 (Synthetic monitoring)
25. 6.2 フロントエンド監視の2つのアプローチ どうフロントエンドを監視するか？ 1. リアルユーザ監視 (Real user monitoring, RUM) → ブラウザからのメトリクス・ログ収集 2. シンセティック監視 (Synthetic monitoring) → ネットワーク経由で対象の状態を監視する
26. メトリクスはW3C推奨のAPI経由で取得するのが便利 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス
27. 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス メトリクスはW3C推奨のAPI経由で取得するのが便利 - Navigation Timing API - User Timing API - Resource Timing API - Performance Observer(Performance Timeline API) - etc..
28. 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス メトリクスはW3C推奨のAPI経由で取得するのが便利 - Navigation Timing API → ブラウザ内のイベント(Cache読み、DOM構築など)の時間を取得できる - User Timing API - Resource Timing API - Performance Observer(Performance Timeline API) - etc..
29. 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス メトリクスはW3C推奨のAPI経由で取得するのが便利 - Navigation Timing API → ブラウザ内のイベント(Cache読み、DOM構築など)の時間を取得できる - User Timing API → 任意の場所にコードを埋め込み、時間を計測できる - Resource Timing API - Performance Observer(Performance Timeline API) - etc..
30. 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス メトリクスはW3C推奨のAPI経由で取得するのが便利 - Navigation Timing API → ブラウザ内のイベント(Cache読み、DOM構築など)の時間を取得できる - User Timing API → 任意の場所にコードを埋め込み、時間を計測できる - Resource Timing API → リソース単位で各種イベントの開始終了時間を取得できる - Performance Observer(Performance Timeline API) - etc..
31. 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス メトリクスはW3C推奨のAPI経由で取得するのが便利 - Navigation Timing API → ブラウザ内のイベント(Cache読み、DOM構築など)の時間を取得できる - User Timing API → 任意の場所にコードを埋め込み、時間を計測できる - Resource Timing API → リソース単位で各種イベントの開始終了時間を取得できる - Performance Observer(Performance Timeline API) → 指定したイベント発生時に、その情報をオブザーバ(＝コールバック)に通知し 処理できる。今はこれを使って上に挙げたAPIの情報を集めるのが実装上良さそ う - etc..
32. Speed Indexのように、まぁまぁいい感じに可視化してくれ るサービスもあるよ 6.3 DOM 6.3.1 フロントエンドパフォーマンスのメトリクス
33. 6.3 DOM 6.3.2 素晴らしい！！でもどうやったらいいの？
34. 6.3 DOM 6.3.2 素晴らしい！！でもどうやったらいいの？ 各種APIからメトリクスを収集する実装例などが載っている良記事があったので興味 があれば見てみてね https://murashun.jp/blog/20190824-01.html
35. 6.3 DOM 6.3.2 素晴らしい！！でもどうやったらいいの？ 各種APIからメトリクスを収集する実装例などが載っている良記事があったので興味 があれば見てみてね https://murashun.jp/blog/20190824-01.html 実装するのが面倒な場合はSaaSを使いましょう。書籍の推しはGoogle Analyticsで す。
36. 6.4 ロギング
37. - ユーザのブラウザコンソールをメッセージで埋め尽くすわけにもいかないので、どこか に送信＆可視化ましょう 6.4 ロギング
38. - ユーザのブラウザコンソールをメッセージで埋め尽くすわけにもいかないので、どこか に送信＆可視化ましょう - セルフホストしたElasticsearchなどに送るもよし 6.4 ロギング
39. - ユーザのブラウザコンソールをメッセージで埋め尽くすわけにもいかないので、どこか に送信＆可視化ましょう - セルフホストしたElasticsearchなどに送るもよし - Loggly、SentlyなどのSaaSに送るもよし 6.4 ロギング
40. 6.5 シンセティック監視
41. - ネットワーク経由でサービスへアクセスし、パフォーマンスを監視する - 動作確認、単純なレスポンスタイムを見たいだけなら curlでもok 6.5 シンセティック監視
42. - ネットワーク経由でサービスへアクセスし、パフォーマンスを監視する - 動作確認、単純なレスポンスタイムを見たいだけなら curlでもok - 高機能なシンセティック監視サービスの一例：WebpageTest - 対象のURLを入力するだけでさまざまなテストを行った結果を出してくれます 6.5 シンセティック監視
43. - ネットワーク経由でサービスへアクセスし、パフォーマンスを監視する - 動作確認、単純なレスポンスタイムを見たいだけなら curlでもok - 高機能なシンセティック監視サービスの一例：WebpageTest - 対象のURLを入力するだけでさまざまなテストを行った結果を出してくれます 6.5 シンセティック監視
44. - ネットワーク経由でサービスへアクセスし、パフォーマンスを監視する - 動作確認、単純なレスポンスタイムを見たいだけなら curlでもok - 高機能なシンセティック監視サービスの一例：WebpageTest - 対象のURLを入力するだけでさまざまなテストを行った結果を出してくれます - Webページのパフォーマンスは様々な要因により、時間とともに劣化しがち - CIを組んで継続的な監視を行うのが望ましい - 上で紹介したWebpageTestのプライベート版をCIに組み込むなどして、 Webページのパフフォーマン ス劣化にすぐ気付けるようにすると◎ 6.5 シンセティック監視
45. 6.6　まとめ
46. - 実際のユーザが見ているページのロード時間を監視しま しょう - 6.3　DOM 6.6　まとめ
47. - 実際のユーザが見ているページのロード時間を監視しま しょう - 6.3　DOM - JavaScriptの例外を監視しましょう - 6.4　ロギング 6.6　まとめ
48. - 実際のユーザが見ているページのロード時間を監視しま しょう - 6.3　DOM - JavaScriptの例外を監視しましょう - 6.4　ロギング - ページのロード時間をCIシステムから計測し続け、ロード時 間が許容時間内に収まるようにしましょう - 6.5　シンセティック監視 6.6　まとめ
50. ご清聴ありがとうございまし た