Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

AbemaTV, Inc. All Rights Reserved
 野口 直寛 (Noguchi Tadahiro) 2018年新卒入社 株式会社AbemaTV Web-based TV チーム所属 Web 技術を使用したスマートテレビ (IPTV) 上で動く ABEMA アプリの 開発を行っています． 趣味は旅行，ダイビング，スキーです．冬は毎年北海道に籠ってス キーをしています． 2 Profile @nodaguti

Slide 3

Slide 3 text

3 1. ABEMAについて 2. パフォーマンス改善 3. まとめ INDEX

Slide 4

Slide 4 text

AbemaTV, Inc. All Rights Reserved
 ABEMA について 4

Slide 5

Slide 5 text

AbemaTV, Inc. All Rights Reserved
 ABEMA 紹介: 概要 5 登録不要で、いつでも無料で楽しめる 24時間365日編成されているリニア配信と 見逃した作品を好きなタイミングでオンデマンドでも楽しむこともできます。 国内最大級のオリジナルエピソード数 オリジナルエピソード数は国内発の動画サービスで日本No.1(※)を誇り、 注目の新作映画、国内外の人気ドラマ、話題のアニメなど豊富なラインナップの作品や、 様々な音楽や舞台のオンラインライブも展開。 ※2024年8月時点、自社調べ 100%プロコンテンツ サイバーエージェントとテレビ朝日 それぞれの強みを活かした制作体制で高品質なコンテンツを配信しています。 多彩なラインナップ 24時間編成のニュース専門チャンネルをはじめ、 オリジナルのドラマや恋愛番組、アニメ、スポーツなど、 多彩なジャンルの約25チャンネルを24時間365日放送しています。

Slide 6

Slide 6 text

AbemaTV, Inc. All Rights Reserved
 ABEMA 紹介: 概要 6 複数デバイス対応・多彩なチャンネルラインナップ

Slide 7

Slide 7 text

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 ユースケース 技術スタック

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善 9

Slide 10

Slide 10 text

AbemaTV, Inc. All Rights Reserved
 課題 事例: スマートテレビにおけるパフォーマンス向上 10 ● スマートテレビデバイス (Web-based TV, Android-based TV) において、パ フォーマンス品質が他社アプリに劣後している ● ユーザーの継続率上昇のため、プロダクト品質を高める必要がある

Slide 11

Slide 11 text

AbemaTV, Inc. All Rights Reserved
 事例: スマートテレビにおけるパフォーマンス向上 11 起動 所要時間（自社調査） 回遊 再生 アプリA 　　　B 　　　C 　　　D 　　　E 　　　F ABEMA ABEMA ABEMA

Slide 12

Slide 12 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス向上プロジェクトの目標 12 動画市場 No.1 のパフォーマンス

Slide 13

Slide 13 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 13 目標設定 現状分析 改善 検証

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 14 目標設定 現状分析 改善 検証

Slide 15

Slide 15 text

AbemaTV, Inc. All Rights Reserved
 手動計測 現状分析・目標設定 15 ● 他社アプリとの比較は手動計測で実施 ○ 動画を撮影してコマ送りで再生して計測 ○ ３回計測して平均を取る ● 目標を計測結果から設定 ○ 動画配信サービスとして最速水準を目指す

Slide 16

Slide 16 text

AbemaTV, Inc. All Rights Reserved
 手動計測の様子

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved
 自動計測 現状分析・目標設定 17 ● 手動計測は定常的に実施するにはコストが高い ● New Relic を使用して、自動計測・可視化の仕組みを整えた ○ TV メーカーごとにパフォーマンスを分けて見られる ○ New Relic 組み込みのパフォーマンス指標は使用できない ■ 計測区間の始点と終点を定義して New Relic に送信

Slide 18

Slide 18 text

AbemaTV, Inc. All Rights Reserved
 ダッシュボード

Slide 19

Slide 19 text

AbemaTV, Inc. All Rights Reserved
 ダッシュボード

Slide 20

Slide 20 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 20 目標設定 現状分析 改善 検証

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

AbemaTV, Inc. All Rights Reserved
 改善で大変だったこと 22 ● 開発者ツール (Chrome でいうところの DevTools) が不安定 ○ テレビと同じネットワークに PC を繋いで Remote Debugging する ○ 開発者ツールを繋げるだけでオーバーヘッドが生じて遅くなる ■ 場合によってはクラッシュするなど ○ Performance Profiling も機能として存在するが... ■ 最新の Chrome DevTools と比較すると機能が貧弱 ■ 正しい結果が出ているのか確信が持てない ● 最近 Chrome に CPU 20x slowdown が搭載されたので，それで確認することも ○ ただし実機の挙動を再現しているとは限らない

Slide 23

Slide 23 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善のサイクル 23 目標設定 現状分析 改善 検証

Slide 24

Slide 24 text

AbemaTV, Inc. All Rights Reserved
 リリース後 リリース前 検証 24 ● New Relic で改善効果を事前予測 ● A/B テスト ● New Relic で前後比較

Slide 25

Slide 25 text

AbemaTV, Inc. All Rights Reserved
 検証: リリース前 - 事前予測 25 ● 改善あり/なしで3回ずつ計測して平均をとって比較 ● 顕著にパフォーマンスが向上した施策をリリース

Slide 26

Slide 26 text

AbemaTV, Inc. All Rights Reserved
 検証: リリース後 - A/B テスト 26 A/B テストによりパフォーマンスやビジネス指標の変化を検証 → パフォーマンス改善がビジネス指標にも好影響をもたらしている

Slide 27

Slide 27 text

AbemaTV, Inc. All Rights Reserved
 検証: リリース後 - 前後比較 27 ● A/B テストが難しいケースでは、リリース前後で指標を比較 0.8秒高速化

Slide 28

Slide 28 text

AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 回遊パフォーマンス 28 所要時間（自社調査） Before After ABEMA ABEMA

Slide 29

Slide 29 text

AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 起動パフォーマンス 29 Before 所要時間（自社調査） アプリA 　　　B 　　　C 　　　D 　　　E 　　　F After ABEMA ABEMA

Slide 30

Slide 30 text

AbemaTV, Inc. All Rights Reserved
 プロジェクトの成果 : 起動パフォーマンスの推移 30

Slide 31

Slide 31 text

AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 31 まとめ

Slide 32

Slide 32 text

AbemaTV, Inc. All Rights Reserved
 まとめ 32 ● スマートテレビにおけるパフォーマンス改善事例の紹介 ● 他社サービスとの比較により目標値を設定 ● New Relic でパフォーマンスを計測・モニタリング ● 起動・回遊において業界最速水準を達成 ● パフォーマンス改善によるユーザー体験の向上が、ビジネス指標の改善にも つながった

Slide 33

Slide 33 text

AbemaTV, Inc. All Rights Reserved