ABEMA スマートテレビアプリケーションのパフォーマンス改善: 業界トップクラスを目指して / Muddy Web #10 ~Special Edition~ 【ゲスト: pixiv】

Muddy WebはMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。

https://cyberagent.connpass.com/event/335669/

現場で遭遇した具体的な体験を元に実際に明日から使えるかもしれないWebフロントエンド的な技術や知識を参加者の皆さまと共有し合うことを通して、フロントエンド開発の糧になれればと思います。

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 ABEMA スマートテレビアプリケーションのパ フォーマンス改善 〜業界トップクラスを目指して〜 2024 Dec 9th Muddy Web #10 株式会社 AbemaTV 
 野口 直寛 

2. AbemaTV, Inc. All Rights Reserved
 野口 直寛 (Noguchi Tadahiro) 2018年新卒入社 株式会社AbemaTV Web-based TV チーム所属 Web 技術を使用したスマートテレビ (IPTV) 上で動く ABEMA アプリの 開発を行っています． 趣味は旅行，ダイビング，スキーです．冬は毎年北海道に籠ってス キーをしています． 2 Profile @nodaguti
3. 3 1. ABEMAについて 2. パフォーマンス改善 3. まとめ INDEX
4. AbemaTV, Inc. All Rights Reserved
 ABEMA について 4
5. AbemaTV, Inc. All Rights Reserved
 ABEMA 紹介: 概要 5 登録不要で、いつでも無料で楽しめる 24時間365日編成されているリニア配信と 見逃した作品を好きなタイミングでオンデマンドでも楽しむこともできます。 国内最大級のオリジナルエピソード数 オリジナルエピソード数は国内発の動画サービスで日本No.1(※)を誇り、 注目の新作映画、国内外の人気ドラマ、話題のアニメなど豊富なラインナップの作品や、 様々な音楽や舞台のオンラインライブも展開。 ※2024年8月時点、自社調べ 100%プロコンテンツ サイバーエージェントとテレビ朝日 それぞれの強みを活かした制作体制で高品質なコンテンツを配信しています。 多彩なラインナップ 24時間編成のニュース専門チャンネルをはじめ、 オリジナルのドラマや恋愛番組、アニメ、スポーツなど、 多彩なジャンルの約25チャンネルを24時間365日放送しています。
6. AbemaTV, Inc. All Rights Reserved
 ABEMA 紹介: 概要 6 複数デバイス対応・多彩なチャンネルラインナップ
7. AbemaTV, Inc. All Rights Reserved
 Apple TV Google Nest Hub ABEMA 紹介: マルチデバイス iOS mobile Android mobile Mobile Browser Chromecast Amazon Fire TV Android TV Web-based TV Nintendo Switch Amazon Fire Tablet Desktop Browser iOS/tvOS/VisionOS Apple Vision Pro Android Web Unity ユースケース 技術スタック
8. AbemaTV, Inc. All Rights Reserved
 ABEMA 紹介: スマートテレビ 8 スマートテレビは大きく 4種類に分類できる ABEMA 対応のテレビデバイス ※1 • ソニー BRAVIA • シャープ AQUOS • パナソニック ビエラ / プライベート・ビエラ / 4KDIGA • 三菱電機 REAL • 船井電機 FUNAI • Hisense • 東芝 REGZA • TCL • アイリスオーヤマ LUCA • Fire TV • Apple TV • Chromecast ※1: https://help.abema.tv/hc/ja/articles/360013743211 • Web-based TV ◦ Linux を搭載し，Web 技術を使ってアプリケー ションを構築できるテレビ ◦ 内部に Web ブラウザが搭載されている • Android-based TV ◦ Android OS を搭載し，Android 技術を使ってア プリケーションを開発できるテレビ • Apple TV • Chromecast
9. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善 9
10. AbemaTV, Inc. All Rights Reserved
 課題 事例: スマートテレビにおけるパフォーマンス向上 10 • スマートテレビデバイス (Web-based TV, Android-based TV) において、パ フォーマンス品質が他社アプリに劣後している • ユーザーの継続率上昇のため、プロダクト品質を高める必要がある
11. AbemaTV, Inc. All Rights Reserved
 事例: スマートテレビにおけるパフォーマンス向上 11 起動 所要時間（自社調査） 回遊 再生 アプリA 　　　B 　　　C 　　　D 　　　E 　　　F ABEMA ABEMA ABEMA
12. AbemaTV, Inc. All Rights Reserved
 パフォーマンス向上プロジェクトの目標 12 動画市場 No.1 のパフォーマンス
13. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 13 目標設定 現状分析 改善 検証
14. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 14 目標設定 現状分析 改善 検証
15. AbemaTV, Inc. All Rights Reserved
 手動計測 現状分析・目標設定 15 • 他社アプリとの比較は手動計測で実施 ◦ 動画を撮影してコマ送りで再生して計測 ◦ ３回計測して平均を取る • 目標を計測結果から設定 ◦ 動画配信サービスとして最速水準を目指す
16. AbemaTV, Inc. All Rights Reserved
 手動計測の様子
17. AbemaTV, Inc. All Rights Reserved
 自動計測 現状分析・目標設定 17 • 手動計測は定常的に実施するにはコストが高い • New Relic を使用して、自動計測・可視化の仕組みを整えた ◦ TV メーカーごとにパフォーマンスを分けて見られる ◦ New Relic 組み込みのパフォーマンス指標は使用できない ▪ 計測区間の始点と終点を定義して New Relic に送信
18. AbemaTV, Inc. All Rights Reserved
 ダッシュボード
19. AbemaTV, Inc. All Rights Reserved
 ダッシュボード
20. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 20 目標設定 現状分析 改善 検証
21. AbemaTV, Inc. All Rights Reserved
 改善 21 • CDN (Fastly) 導入と brotli/gzip 圧縮配信の有効化 (起動時間0.7秒短縮) ◦ Muddy Web #9「FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新」 で詳しく解説しています • rel=preconnect 設定 (起動時間0.4秒短縮) • JS サイズの削減 (起動時間1.5秒短縮) • 回遊ページの画面外要素の遅延レンダリング (ページ表示時間最大15秒短縮) • etc.
22. AbemaTV, Inc. All Rights Reserved
 改善で大変だったこと 22 • 開発者ツール (Chrome でいうところの DevTools) が不安定 ◦ テレビと同じネットワークに PC を繋いで Remote Debugging する ◦ 開発者ツールを繋げるだけでオーバーヘッドが生じて遅くなる ▪ 場合によってはクラッシュするなど ◦ Performance Profiling も機能として存在するが... ▪ 最新の Chrome DevTools と比較すると機能が貧弱 ▪ 正しい結果が出ているのか確信が持てない • 最近 Chrome に CPU 20x slowdown が搭載されたので，それで確認することも ◦ ただし実機の挙動を再現しているとは限らない
23. AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 23 目標設定 現状分析 改善 検証
24. AbemaTV, Inc. All Rights Reserved
 リリース後 リリース前 検証 24 • New Relic で改善効果を事前予測 • A/B テスト • New Relic で前後比較
25. AbemaTV, Inc. All Rights Reserved
 検証: リリース前 - 事前予測 25 • 改善あり/なしで3回ずつ計測して平均をとって比較 • 顕著にパフォーマンスが向上した施策をリリース
26. AbemaTV, Inc. All Rights Reserved
 検証: リリース後 - A/B テスト 26 A/B テストによりパフォーマンスやビジネス指標の変化を検証 → パフォーマンス改善がビジネス指標にも好影響をもたらしている
27. AbemaTV, Inc. All Rights Reserved
 検証: リリース後 - 前後比較 27 • A/B テストが難しいケースでは、リリース前後で指標を比較 0.8秒高速化
28. AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 回遊パフォーマンス 28 所要時間（自社調査） Before After ABEMA ABEMA
29. AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 起動パフォーマンス 29 Before 所要時間（自社調査） アプリA 　　　B 　　　C 　　　D 　　　E 　　　F After ABEMA ABEMA
30. AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 起動パフォーマンスの推移 30
31. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 31 まとめ
32. AbemaTV, Inc. All Rights Reserved
 まとめ 32 • スマートテレビにおけるパフォーマンス改善事例の紹介 • 他社サービスとの比較により目標値を設定 • New Relic でパフォーマンスを計測・モニタリング • 起動・回遊において業界最速水準を達成 • パフォーマンス改善によるユーザー体験の向上が、ビジネス指標の改善にも つながった
33. AbemaTV, Inc. All Rights Reserved