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

Slide 1

Slide 1 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text