専任チームで実現する継続的なWebパフォーマンス改善 / Continuous Web performance improvement realised by dedicated team

ABEMA Developer Conference (2021-12-17) での登壇資料です．
https://developer.abema.io/2021/sessions/YbNMEfrUny/

Transcript

1. AbemaTV, Inc. All Rights Reserved

2. AbemaTV, Inc. All Rights Reserved
 野口 直寛 (Noguchi Tadahiro) 2018年新卒入社 入社以来 ABEMA にて Web エンジニア Web チームテックリード Web Performance Engineering チームリーダー Client SRE チームメンバー テックリードとしてチームの技術戦略を考えながら，パフォーマンス，リ ライアビリティ，DevOps生産性向上に取り組んでいます 2 Profile @nodaguti
3. AbemaTV, Inc. All Rights Reserved
 3 CA BASE NEXT 登壇 (2021/05) ABEMA Web ブラウザ版をより高速で高信頼にするために WEB+DB PRESS Vol.124 記事執筆 (2021/08) データドリブンなパフォーマンス改善 一過性で終わらせない文化の作り方 自己紹介
4. AbemaTV, Inc. All Rights Reserved
 4 1. Web パフォーマンスに取り組むわけ 2. 専任チームで実現したこと 3. 最近の活動と成果 4. 今後の展望 INDEX
5. AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 5
6. AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 6 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため
7. AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 7 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため
8. AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 8 • Web アプリはインストール不要 ◦ ブラウザで URL にアクセスするだけでサービスを使い始められる ストアを開く アプリを インストール サービスを開く URL を開く サービスを開く スマートフォン アプリ Web アプリ
9. AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 9 • Web アプリはインストール不要 ◦ ブラウザで URL にアクセスするだけでサービスを使い始められる • サービス選好度が高くない未リーチ層・ライト層への「入り口」 ◦ 例：アプリを入れるほどではないけど Twitter で流れてきた動画をちょっと見 てみたい • 「手軽さ」「体験のよさ」が鍵となる ◦ 高速に動作する体験で次の来訪へ繋げる
10. AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 10 • ABEMA はリニアとオンデマンド配信の ハイブリッド型サービス • 特にニュース・緊急速報など速報性が 求められるコンテンツでは，視聴を素早く 始められることが重要
11. AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 11 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため
12. AbemaTV, Inc. All Rights Reserved
 12 サービス流入の増加 Credit: https://developers.google.com/search/blog/2020/11/timing-for-page-experience Core Web Vitals がページのランクづけ要素として使われている 　　　パフォーマンスが検索からのサービス流入に影響する
13. AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 13 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため
14. AbemaTV, Inc. All Rights Reserved
 14 サービス利用の促進 パフォーマンス エンゲージメント コンバージョン 矢印は正の接続 : 根本の増減と先の増減が連動する
15. AbemaTV, Inc. All Rights Reserved
 • 世界中のさまざまな Web サービスで統計的に実証 ◦ Walmart.com ▪ ロード速度が1秒速くなるとコンバージョンレートが 2%高くなった ◦ オバマ元大統領の寄付サイト ▪ ページ速度を60%向上させたら寄付額が 14%上昇した ◦ BBC ▪ 読み込みが1秒遅くなるごとに10%のユーザーが離脱した ◦ 他の事例: • ABEMA でも同様の傾向が観測されている 15 サービス利用の促進
16. AbemaTV, Inc. All Rights Reserved
 16 読み込み時間と直帰率の関係 起動開始時間と5分視聴化率の関係 サービス利用の促進 どちらもパフォーマンスが悪くなると数値が悪化している 直帰率 直帰率・セッション数 読み込み時間 直帰セッション数 セッション数
17. AbemaTV, Inc. All Rights Reserved
 専任チームで実現したこと 17
18. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善の難しさ 18 • まとまったリソースが必要 ◦ 継続的な計測・モニタリングの仕組み ◦ 改善結果を統計的に評価するための仕組み ◦ ビルド・配信などシステムの深いところまで手を入れる改善 • 継続的なリソースが必要 ◦ Tammy Everts 氏 “パフォーマンスは終着点ではなく旅のようなもの” ◦ 何もしないと機能追加に伴って悪化していってしまう
19. AbemaTV, Inc. All Rights Reserved
 専任チームの立ち上げ 19 • 専任チームを立ち上げることでリソース問題を解決 • 兼務で2~3名 • プロダクト開発チームとは別にミッション・目標を設定して動いている Web チーム プロダクトの開発 Web Performance Engineering チーム パフォーマンス改善
20. AbemaTV, Inc. All Rights Reserved
 チームのミッション 20 Web チーム Web Performance Engineering チーム 1. パフォーマンスを意識した 　開発を可能にする支援 2. 工数の必要なパフォーマンス改善の実装
21. AbemaTV, Inc. All Rights Reserved
 チームの活動内容 21 • モニタリング・アラーティング ◦ 新規ページが一定品質でリリース できる ◦ 既存ページの劣化を検知して対 応できる • 改善にあたっての情報・技術支援 • 既存ページのパフォーマンスを改善 する実装 ◦ 特に工数が必要なもの 改善実装 開発支援（基盤整備） 対外発信 • 登壇・記事執筆 ◦ 技術広報 ◦ 活動内容のアピール
22. AbemaTV, Inc. All Rights Reserved
 チームの目標設定 22 • 中期 (1~2年)・半期・四半期の目標を OKR (Objectives and Key Results) で管理 ◦ 個人のコミットポイントを合わせてチームの OKR としている ◦ 毎週の Check-in MTG で状況を確認
23. AbemaTV, Inc. All Rights Reserved
 23 Core Web Vitals の基準値 PageSpeed Insights を使った競合分析 改善の目標値
24. AbemaTV, Inc. All Rights Reserved
 スポット参戦 24 • パフォーマンス改善にスポットで着手したいメンバーが出てきたとき ◦ インターン・内定者バイト，メンバーの専門性向上，etc. ◦ やりたいこととチームの OKR とをすり合わせて，最適なタスクを アレンジ ◦ 毎週の Check-in MTG に参加してもらって状況共有・アドバイス
25. AbemaTV, Inc. All Rights Reserved
 最近の活動と成果 25
26. AbemaTV, Inc. All Rights Reserved
 成果 26 • Synthetic Monitoring ◦ ツール開発 ◦ SaaS 導入 • Real User Monitoring ◦ SaaS 導入 • Largest Contentful Paint ◦ Critical CSS ◦ Differential Bundle Serving ◦ Granular Chunks • Cumulative Layout Shift ◦ エピソードページ ◦ ジャンルページ ◦ etc. • Web リニューアル時のパフォーマンス改善 改善実装 基盤整備
27. AbemaTV, Inc. All Rights Reserved
 成果 27 • Synthetic Monitoring ◦ ツール開発 ◦ SaaS 導入 • Real User Monitoring ◦ SaaS 導入 • Largest Contentful Paint ◦ Critical CSS ◦ Differential Bundle Serving ◦ Granular Chunks • Cumulative Layout Shift ◦ エピソードページ ◦ ジャンルページ ◦ etc. • Web リニューアル時のパフォーマンス改善 改善実装 基盤整備
28. AbemaTV, Inc. All Rights Reserved
 基盤整備 28 Synthetic Monitoring Real User Monitoring アラート アラート対応フロー Runbook
29. AbemaTV, Inc. All Rights Reserved
 画像 29 NewRelic (Real User Monitoring) 基盤整備 Catchpoint (Synthetic Monitoring)
30. AbemaTV, Inc. All Rights Reserved
 30 Critical CSS Above-the-fold の描画に必要な CSS だけを事前に抽 出しておき，HTML に埋め込んで配信 Penthouse Backend Server API Mock Server Critical CSS
31. AbemaTV, Inc. All Rights Reserved
 31 Critical CSS • First Contentful Paint, Largest Contentful Paint ともに 300~500ms 改善 • Cumulative Layout Shift には影響なし
32. AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 32
33. AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 33 • βテスト時にユーザーから「以前より動きが重くなって使いづらい」というフィード バック • 社内 QA では設定した閾値を上回っていなかったが，実環境でどうなっているの か調査へ • LCP, FID, CLS どれも悪化していた
34. AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 34 Web Performance Engineering の協力のもと、リニューアル担当チームで改善
35. AbemaTV, Inc. All Rights Reserved
 今後の展望 35
36. AbemaTV, Inc. All Rights Reserved
 今後の展望 36 チームの最終的なゴール チームが解散すること
37. AbemaTV, Inc. All Rights Reserved
 なぜ解散がゴールなのか？ 37 • パフォーマンスがリリースに不可欠なサービス品質として，当たり前に開発サイク ルに組み込まれている状態を作りたい • パフォーマンスだけに特別なリソースを確保する状態が続くのは，本来あまり嬉し いことではない ◦ 解決しなければならない非事業課題はパフォーマンスだけではない
38. AbemaTV, Inc. All Rights Reserved
 解散するために 38 • パフォーマンスが常にモニタリングされて把握・改善・維持されている状態 ◦ 基盤作り • Web サービス全体のパフォーマンスが目標値を満たしている状態 ◦ 既存ページのパフォーマンス改善
39. AbemaTV, Inc. All Rights Reserved
 おわりに 39 • Web パフォーマンスに取り組むわけ ◦ サービス品質を高めることがビジネスインパクトにつながる • 専任チームで実現したこと ◦ 固定リソースの確保で基盤作りと改善を進める • 最近の活動と成果 • 今後の展望 ◦ チームの解散が最終目標