ABEMA Webブラウザ版をより高速で高信頼にするために / Towards more performant and reliable ABEMA

by nodaguti

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

野⼝直寛 (Tadahiro Noguchi) 2018年度新卒⼊社株式会社AbemaTV 開発本部 Web チームテックリード Web Performance Engineering チームリーダー Client SRE Web 担当メンバー @nodaguti @nodaguti

Slide 3

Slide 3 text

໨࣍$POUFOUT໨࣍$POUFOUT໨࣍$POUFOUT໨࣍$POUFOUT໨࣍$POUFOUT 1 . なぜ ABEMA はパフォーマンス‧信頼性を重視するのか？ 2 . パフォーマンスへの取り組み 3 . 信頼性への取り組み 4 . まとめ INDEX

Slide 4

Slide 4 text

なぜ ABEMA はパフォーマンス‧信頼性を重視するのか？

Slide 5

Slide 5 text

品質はサービスの価値を構成するから

Slide 6

Slide 6 text

Source: https://contents-abema.com/ 5 th/index.html

Slide 7

Slide 7 text

Source: https://contents-abema.com/ 5 th/index.html

Slide 8

Slide 8 text

ソフトウェアの品質とは？性能効率性機能適合性互換性使⽤性信頼性セキュリティ保守性移植性有効性効率性満⾜性リスク回避性利⽤状況網羅性 Source: ISO/IEC 25 0 00 Series ソフトウェア製品品質利⽤時の品質

Slide 9

Slide 9 text

Slide 10

Slide 10 text

パフォーマンスへの取り組み

Slide 11

Slide 11 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 12

Slide 12 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 13

Slide 13 text

• Real User Monitoring (RUM, Field Data) メイン • パフォーマンスメトリクスの収集と分析 • パフォーマンスメトリクスとビジネスメトリクス (KPI) の相関分析 • 競合分析現状分析

Slide 14

Slide 14 text

メトリクス収集‧分析

Slide 15

Slide 15 text

ビジネス KPI との相関分析ロード時間 vs. 直帰率起動時間 vs. 5 分視聴化率起動開始時間のセグメント５分視聴化率

Slide 16

Slide 16 text

競合分析 Synthetic Monitoring (Lighthouse)

Slide 17

Slide 17 text

競合分析 Real User Monitoring (PageSpeed Insights)

Slide 18

Slide 18 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 19

Slide 19 text

• 短期的: Core Web Vitals の基準から設定 • ⻑期的: 競合分析から設定⽬標設定

Slide 20

Slide 20 text

短期的⽬標: Core Web Vitals Source: https://web.dev/vitals

Slide 21

Slide 21 text

短期的⽬標: Core Web Vitals

Slide 22

Slide 22 text

⻑期的⽬標: 競合分析

Slide 23

Slide 23 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 24

Slide 24 text

• Di ff erential Serving (poly fi lls, bundles, images) • Critical CSS Extraction • Granular Chunks & Chunk Optimisation • etc, etc. 改善実施

Slide 25

Slide 25 text

Di ff erential Serving • ブラウザに応じて最適なアセットを配信 • poly fi lls • 必要な poly fi ll だけを配信する • bundles • 必要なトランスパイルだけを適⽤する • images • 要素で対応ブラウザに最新の画像フォーマットを使⽤ Chrome に配信される poly fi ll.js IE に配信される poly fi ll.js

Slide 26

Slide 26 text

Critical CSS Extraction • Above-the-fold の描画に必要な CSS だけを事前に抽出しておき，HTML に埋め込んで配信

Slide 27

Slide 27 text

Granular Chunks & Chunk Optimisation • Granular Chunks • webpack の chunks 分割設定を最適化 • https://web.dev/granular-chunking-nextjs/ • Chunk Optimisation • 不要な dependencies や imports の削除 • Tree Shaking が⼀部効いていなかったのを修正 Granular Chunks: After Granular Chunks: Before

Slide 28

Slide 28 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 29

Slide 29 text

効果計測リリース前 Synthetic Monitoring • Lighthouse/DevTools • Lightkeeper • 前後⽐較 • A/B テスト Real User Monitoring リリース後

Slide 30

Slide 30 text

効果計測: Synthetic Monitoring DevTools Lighthouse

Slide 31

Slide 31 text

効果計測: Synthetic Monitoring Lightkeeper Statistical Analysis

Slide 32

Slide 32 text

効果計測: Real User Monitoring - 前後⽐較番組表の CLS が⼆回のリリースで改善した例ホーム⾯の CLS が逆に悪化してしまった例

Slide 33

Slide 33 text

効果計測: RUM - A/Bテスト • Fastly 上で A/B テストの fl ag system を構築 • Fastly • A/B テスト⽤の UserId を発⾏ • UserId は Cookie に保存してユーザーごとの⼀貫性を保つ • Bucket を割り振って Origin Server にヘッダーで通知 • Origin Server • Bucket に基づきコンテンツ出し分け • Vary を設定してテストごとに Fastly のキャッシュを分ける User Fastly Origin   Server Cookie: user-id=kdfv... Fastly-ABTest 1 : Bucket-a Fastly-ABTest 2 : Bucket-b • Bundle や meta タグの出し分けなど，   origin で処理を変えられる A/B テストが必要

Slide 34

Slide 34 text

効果計測: RUM - A/B テスト Critical CSS の A/B 別施策における起動時間の確率密度関数の⽐較

Slide 35

Slide 35 text

現状分析⽬標設定改善実施効果計測品質維持

Slide 36

Slide 36 text

品質維持 Source: https://developer.akamai.com/devops 各フェーズに対するアプローチが必要

Slide 37

Slide 37 text

開発フェーズへのアプローチ • Plan • LCP, CLS が悪化しにくい UI デザイン • Code • ⾮効率な書き⽅への linter / type check • Build & Test • 開発環境への Synthetic Monitoring

Slide 38

Slide 38 text

運⽤フェーズへのアプローチ • Monitor • User-perceived Performance Metrics • ユーザー環境で実現されたパフォーマンスは何か？ • 参考: RED method と USE method • Internal Performance Logs • どこを改善すればパフォーマンスが向上するのか？ • User Timing API • Layout Instability API • Largest Contentful Paint API • Long Tasks API • 参考: Debug Web Vitals

Slide 39

Slide 39 text

信頼性への取り組み

Slide 40

Slide 40 text

信頼性と開発サイクル実装テストリリース運⽤実装ミスリグレッション QA ⼯数の増⼤と   バグ⾒落とし新バージョンリリース   によるエラー率上昇外部要因の障害リリース頻度を⾼めたい

Slide 41

Slide 41 text

各フェーズへのアプローチ実装テストリリース運⽤実装ミスリグレッション QA ⼯数の増⼤と   バグ⾒落とし新バージョンリリース   によるエラー率上昇外部要因の障害単体テストの充実 Visual Regression Test E 2 E テストカナリアリリース Feature Flag モニタリング Client SLI/SLO

Slide 42

Slide 42 text

実装テストリリース運⽤単体テストの充実 Visual Regression Test E 2 E テストカナリアリリース Feature Flag モニタリング Client SLI/SLO

Slide 43

Slide 43 text

実装へのアプローチ: 単体テスト

Slide 44

Slide 44 text

実装へのアプローチ: Visual Regression Test VRT アーキテクチャ GitHub への通知

Slide 45

Slide 45 text

実装テストリリース運⽤単体テストの充実 Visual Regression Test E 2 E テストカナリアリリース Feature Flag モニタリング Client SLI/SLO

Slide 46

Slide 46 text

テストへのアプローチ: E 2 E テストリグレッション防⽌のため   既存機能チェック⼈的‧時間的コスト Selenium とモックサーバー   を使った⾃動テストへの移⾏

Slide 47

Slide 47 text

実装テストリリース運⽤単体テストの充実 Visual Regression Test E 2

Slide 48

Slide 48 text

リリースへのアプローチカナリアリリース 99%: 前バージョン 1%: 新バージョンエラーレート等をモニタリングして   問題がなければ 100% リリースデプロイ機能A有効化機能B 機能C システムのデプロイと機能のリリースを   切り離して柔軟な ON/OFF を実現 Feature Flag

Slide 49

Slide 49 text

実装テストリリース運⽤単体テストの充実 Visual Regression Test E 2

Slide 50

Slide 50 text

運⽤へのアプローチ: モニタリングなぜモニタリングが必要か？テスト == Synthetic Monitoring 外的要因による故障 • テストは限定的な時間，限定的な環境下でのみ⾏われる • テストされていない環境で問題が起こる可能性 • 運⽤枠の⼊稿ミス • クライアント環境のアップデート • 静的にバンドルしていない 3rd party program のアップデート • etc.

Slide 51

Slide 51 text

モニタリング

Slide 52

Slide 52 text

モニタリングから SLI/SLO へモニタリングの悩み SLI/SLO • ページやユーザー属性でセグメント分けはできるが，特定の機能がどういう状態なのか掴みにくい • アラートの閾値調整が難しい • 機能と品質のリソース配分が感覚的 • 機能単位で SLI/SLO を設定して監視 • Error Budget / Burn Rate の考えに基づくアラーティング • Error Budget の残⾼によって攻めてよいのか守るべきかがすぐにわかる

Slide 53

Slide 53 text

Client SLI/SLO Action Dispatcher Store View Action SLI: Start SLI: Start SLI: End Availability := end / start   Latency := end - start

Slide 54

Slide 54 text

おわりに

Slide 55

Slide 55 text

• パフォーマンスとリライアビリティ向上に向けて，開発‧運⽤の両⾯で動いているおわりに *: https://www.slideshare.net/ygoto 3 q/technical-challenges-that-abematv-faces • 品質の維持‧向上のためには，⽂化の醸成が必要 • 同僚の開発者から経営層まで，「品質」について同じ⽅向を向いていないと難しい • "テレビ品質" * を追求し，⾼品質なサービスを提供できるよう引き続き   努⼒していきます！

Slide 56

Slide 56 text

No content