Tweet
Tweet

Slide 1

Slide 1 text

AbemaTV, Inc. All Rights Reserved


Slide 2

Slide 2 text

AbemaTV, Inc. All Rights Reserved
 野口 直寛 (Noguchi Tadahiro) 2018年新卒入社 入社以来 ABEMA にて Web エンジニア Web チームテックリード Web Performance Engineering チームリーダー Client SRE チームメンバー テックリードとしてチームの技術戦略を考えながら，パフォーマンス，リ ライアビリティ，DevOps生産性向上に取り組んでいます 2 Profile @nodaguti

Slide 3

Slide 3 text

AbemaTV, Inc. All Rights Reserved
 3 CA BASE NEXT 登壇 (2021/05) ABEMA Web ブラウザ版をより高速で高信頼にするために WEB+DB PRESS Vol.124 記事執筆 (2021/08) データドリブンなパフォーマンス改善 一過性で終わらせない文化の作り方 自己紹介

Slide 4

Slide 4 text

AbemaTV, Inc. All Rights Reserved
 4 1. Web パフォーマンスに取り組むわけ 2. 専任チームで実現したこと 3. 最近の活動と成果 4. 今後の展望 INDEX

Slide 5

Slide 5 text

AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 5

Slide 6

Slide 6 text

AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 6 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため

Slide 7

Slide 7 text

AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 7 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため

Slide 8

Slide 8 text

AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 8 ● Web アプリはインストール不要 ○ ブラウザで URL にアクセスするだけでサービスを使い始められる ストアを開く アプリを インストール サービスを開く URL を開く サービスを開く スマートフォン アプリ Web アプリ

Slide 9

Slide 9 text

AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 9 ● Web アプリはインストール不要 ○ ブラウザで URL にアクセスするだけでサービスを使い始められる ● サービス選好度が高くない未リーチ層・ライト層への「入り口」 ○ 例：アプリを入れるほどではないけど Twitter で流れてきた動画をちょっと見 てみたい ● 「手軽さ」「体験のよさ」が鍵となる ○ 高速に動作する体験で次の来訪へ繋げる

Slide 10

Slide 10 text

AbemaTV, Inc. All Rights Reserved
 サービス体験の向上 10 ● ABEMA はリニアとオンデマンド配信の ハイブリッド型サービス ● 特にニュース・緊急速報など速報性が 求められるコンテンツでは，視聴を素早く 始められることが重要

Slide 11

Slide 11 text

AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 11 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため

Slide 12

Slide 12 text

AbemaTV, Inc. All Rights Reserved
 12 サービス流入の増加 Credit: https://developers.google.com/search/blog/2020/11/timing-for-page-experience Core Web Vitals がページのランクづけ要素として使われている 　　　パフォーマンスが検索からのサービス流入に影響する

Slide 13

Slide 13 text

AbemaTV, Inc. All Rights Reserved
 Web パフォーマンスに取り組むわけ 13 1. Web アプリケーションの特性を活かし，サービス体験をよくするため 2. 検索エンジンからの評価を高め，サービス流入を増やすため 3. よい体験をユーザーに届け，サービス利用を促進するため

Slide 14

Slide 14 text

AbemaTV, Inc. All Rights Reserved
 14 サービス利用の促進 パフォーマンス エンゲージメント コンバージョン 矢印は正の接続 : 根本の増減と先の増減が連動する

Slide 15

Slide 15 text

AbemaTV, Inc. All Rights Reserved
 ● 世界中のさまざまな Web サービスで統計的に実証 ○ Walmart.com ■ ロード速度が1秒速くなるとコンバージョンレートが 2%高くなった ○ オバマ元大統領の寄付サイト ■ ページ速度を60%向上させたら寄付額が 14%上昇した ○ BBC ■ 読み込みが1秒遅くなるごとに10%のユーザーが離脱した ○ 他の事例: ● ABEMA でも同様の傾向が観測されている 15 サービス利用の促進

Slide 16

Slide 16 text

AbemaTV, Inc. All Rights Reserved
 16 読み込み時間と直帰率の関係 起動開始時間と5分視聴化率の関係 サービス利用の促進 どちらもパフォーマンスが悪くなると数値が悪化している 直帰率 直帰率・セッション数 読み込み時間 直帰セッション数 セッション数

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved
 専任チームで実現したこと 17

Slide 18

Slide 18 text

AbemaTV, Inc. All Rights Reserved
 パフォーマンス改善の難しさ 18 ● まとまったリソースが必要 ○ 継続的な計測・モニタリングの仕組み ○ 改善結果を統計的に評価するための仕組み ○ ビルド・配信などシステムの深いところまで手を入れる改善 ● 継続的なリソースが必要 ○ Tammy Everts 氏 “パフォーマンスは終着点ではなく旅のようなもの” ○ 何もしないと機能追加に伴って悪化していってしまう

Slide 19

Slide 19 text

AbemaTV, Inc. All Rights Reserved
 専任チームの立ち上げ 19 ● 専任チームを立ち上げることでリソース問題を解決 ● 兼務で2~3名 ● プロダクト開発チームとは別にミッション・目標を設定して動いている Web チーム プロダクトの開発 Web Performance Engineering チーム パフォーマンス改善

Slide 20

Slide 20 text

AbemaTV, Inc. All Rights Reserved
 チームのミッション 20 Web チーム Web Performance Engineering チーム 1. パフォーマンスを意識した 　開発を可能にする支援 2. 工数の必要なパフォーマンス改善の実装

Slide 21

Slide 21 text

AbemaTV, Inc. All Rights Reserved
 チームの活動内容 21 ● モニタリング・アラーティング ○ 新規ページが一定品質でリリース できる ○ 既存ページの劣化を検知して対 応できる ● 改善にあたっての情報・技術支援 ● 既存ページのパフォーマンスを改善 する実装 ○ 特に工数が必要なもの 改善実装 開発支援（基盤整備） 対外発信 ● 登壇・記事執筆 ○ 技術広報 ○ 活動内容のアピール

Slide 22

Slide 22 text

AbemaTV, Inc. All Rights Reserved
 チームの目標設定 22 ● 中期 (1~2年)・半期・四半期の目標を OKR (Objectives and Key Results) で管理 ○ 個人のコミットポイントを合わせてチームの OKR としている ○ 毎週の Check-in MTG で状況を確認

Slide 23

Slide 23 text

AbemaTV, Inc. All Rights Reserved
 23 Core Web Vitals の基準値 PageSpeed Insights を使った競合分析 改善の目標値

Slide 24

Slide 24 text

AbemaTV, Inc. All Rights Reserved
 スポット参戦 24 ● パフォーマンス改善にスポットで着手したいメンバーが出てきたとき ○ インターン・内定者バイト，メンバーの専門性向上，etc. ○ やりたいこととチームの OKR とをすり合わせて，最適なタスクを アレンジ ○ 毎週の Check-in MTG に参加してもらって状況共有・アドバイス

Slide 25

Slide 25 text

AbemaTV, Inc. All Rights Reserved
 最近の活動と成果 25

Slide 26

Slide 26 text

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 リニューアル時のパフォーマンス改善 改善実装 基盤整備

Slide 27

Slide 27 text

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 リニューアル時のパフォーマンス改善 改善実装 基盤整備

Slide 28

Slide 28 text

AbemaTV, Inc. All Rights Reserved
 基盤整備 28 Synthetic Monitoring Real User Monitoring アラート アラート対応フロー Runbook

Slide 29

Slide 29 text

AbemaTV, Inc. All Rights Reserved
 画像 29 NewRelic (Real User Monitoring) 基盤整備 Catchpoint (Synthetic Monitoring)

Slide 30

Slide 30 text

AbemaTV, Inc. All Rights Reserved
 30 Critical CSS Above-the-fold の描画に必要な CSS だけを事前に抽 出しておき，HTML に埋め込んで配信 Penthouse Backend Server API Mock Server Critical CSS

Slide 31

Slide 31 text

AbemaTV, Inc. All Rights Reserved
 31 Critical CSS ● First Contentful Paint, Largest Contentful Paint ともに 300~500ms 改善 ● Cumulative Layout Shift には影響なし

Slide 32

Slide 32 text

AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 32

Slide 33

Slide 33 text

AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 33 ● βテスト時にユーザーから「以前より動きが重くなって使いづらい」というフィード バック ● 社内 QA では設定した閾値を上回っていなかったが，実環境でどうなっているの か調査へ ● LCP, FID, CLS どれも悪化していた

Slide 34

Slide 34 text

AbemaTV, Inc. All Rights Reserved
 Web リニューアル時のパフォーマンス改善 34 Web Performance Engineering の協力のもと、リニューアル担当チームで改善

Slide 35

Slide 35 text

AbemaTV, Inc. All Rights Reserved
 今後の展望 35

Slide 36

Slide 36 text

AbemaTV, Inc. All Rights Reserved
 今後の展望 36 チームの最終的なゴール チームが解散すること

Slide 37

Slide 37 text

AbemaTV, Inc. All Rights Reserved
 なぜ解散がゴールなのか？ 37 ● パフォーマンスがリリースに不可欠なサービス品質として，当たり前に開発サイク ルに組み込まれている状態を作りたい ● パフォーマンスだけに特別なリソースを確保する状態が続くのは，本来あまり嬉し いことではない ○ 解決しなければならない非事業課題はパフォーマンスだけではない

Slide 38

Slide 38 text

AbemaTV, Inc. All Rights Reserved
 解散するために 38 ● パフォーマンスが常にモニタリングされて把握・改善・維持されている状態 ○ 基盤作り ● Web サービス全体のパフォーマンスが目標値を満たしている状態 ○ 既存ページのパフォーマンス改善

Slide 39

Slide 39 text

AbemaTV, Inc. All Rights Reserved
 おわりに 39 ● Web パフォーマンスに取り組むわけ ○ サービス品質を高めることがビジネスインパクトにつながる ● 専任チームで実現したこと ○ 固定リソースの確保で基盤作りと改善を進める ● 最近の活動と成果 ● 今後の展望 ○ チームの解散が最終目標

Slide 40

Slide 40 text

No content