GYAO!TOPページパフォーマンス改善 (PWA Night 2021)

PWA Night 2021で発表したセッションです。
https://conf2021.pwanight.jp/speaker/hamada/

今回は、GYAO!トップページのWEBパフォーマンスの改善をケーススタディとして、PWAに必須なパフォーマンス改善の具体例を見ていきます。大規模な構成変更と、その成果として得られたスケーラビリティ、ページの表示速度の向上についてをお話しします。

Transcript

1. ©2021 Yahoo Japan Corporation All rights reserved. GYAO!TOPページ パフォーマンス改善 GraphQLアーキテクチャへの移⾏とその後 ヤフー株式会社 浜⽥ 真成 2021/06/26
2. ©2021 Yahoo Japan Corporation All rights reserved. 公開 このセッションについて PWAの重要な要件にパフォーマンスがあります。 今回はGYAO!トップページのWEBパフォーマンスの改善施策をご紹介します。 ⼤規模な構成変更と、その成果として得られたスケーラビリティ、 ページの表⽰速度の向上について、具体例を交えてお話しします。 改善⽅法、具体的に伝えます。ぜひ⾊々質問してください。
3. 公開 ©2021 Yahoo Japan Corporation All rights reserved. ⽬次 1. GYAO!トップページの特徴 2. 2つの課題と解決のアプローチ •APIの拡張性の改善 •表⽰パフォーマンスの改善 3. 結果とビジネスインパクト 4. 考察と今後のアクション 3
4. 公開 ©2021 Yahoo Japan Corporation All rights reserved. ⾃⼰紹介 4 浜⽥ 真成 フロントエンド領域を中⼼にGYAO!で技術リードをして います。ヤフー全社横断でWebパフォーマンス改善PJを 推進中。 Twi$er: @narirow
5. ©2021 Yahoo Japan Corporation All rights reserved. 公開 1. GYAO!トップページの特徴 5
6. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページ 6 豊富な作品ラインナップから、ユー ザーの趣向に合わせた作品を並べる。 • レコメンデーション • ターゲティング • 複雑な機能 • ⼤量の画像が存在 • 縦にとても⻑いページ構成 1.GYAOトップページの特徴
7. ©2021 Yahoo Japan Corporation All rights reserved. 公開 7
8. ©2021 Yahoo Japan Corporation All rights reserved. 公開 2. 2つの課題と解決のアプローチ 8
9. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 2つの課題 2. 2つの課題と解決のアプローチ 9 GYAO!のトップページを運⽤するにあたって、⼤きく2点が課題に上がりました。 1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化 (Core Web Vitals) API開発がボトルネックになり、開発 が遅延。 ページ表⽰までの速度が遅く、⽬的の ページに到達できない。
10. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 2. 2つの課題と解決のアプローチ 10 1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化 (Core Web Vitals) API開発がボトルネックになり、開発 が遅延。 ページ表⽰までの速度が遅く、⽬的の ページに到達できない。
11. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 課題1: API拡張性の低下 2. 2つの課題と解決のアプローチ 11 BFF(Backends for Frontend)を採⽤した構成。 これまでの構成 データの取得が複雑化、 仕様がBFFに⼀極集中し開発のボトルネックに
12. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 解決: API拡張性の低下 2. 2つの課題と解決のアプローチ 12 GraphQL Gatewayアーキテクチャを採⽤した構成。 現在の構成
13. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GraphQL Gateway のメリット① 2. 2つの課題と解決のアプローチ 13 GraphQL Schema がサービス全体の型定義となり、開発者が各マイクロサービスを シームレスに接続できる。(クライアントからは、graphql-codegenを使⽤して型安全に接続しています) Gatewayがサービス全体の「型」として機能 クライアント クライアント クライアント Schema Registory マイクロサービス マイクロサービス マイクロサービス
14. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GraphQL Gateway のメリット② 2. 2つの課題と解決のアプローチ 14 各クライアントそれぞれの要件に応じた、柔軟なクエリを発⾏できる。 クエリ定義の柔軟さによって、責務の集中を回避 BFF クライアントの責務 データ提供の責務 刷新前 刷新後 GraphQL Query
15. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 2. 2つの課題と解決のアプローチ 15 1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化 (Core Web Vitals) API開発がボトルネックになり、開発 が遅延。 ページ表⽰までの速度が遅く、⽬的の ページに到達できない。
16. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 課題2: 表⽰パフォーマンス(CoreWebVitals数値) の悪化 2. 2つの課題と解決のアプローチ 16 読み込みパフォーマンス メインコンテンツが表⽰されるまでの時間 インタラクティブ性 ユーザーが操作可能になるまでの時間 視覚的安定性 レイアウトのガタつきをスコア化 CoreWebVitalsは、Googleが提唱するWebページのパフォーマンス品質をスコアリングする指標。 指標は現時点のものであり、時代とともに変更される。
17. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 課題2: 表⽰パフォーマンス(CoreWebVitals数値) の悪化 2. 2つの課題と解決のアプローチ 17 GYAO!で特に問題となっていたのは、LCPとCLSの2項⽬。 ユーザーが映像に辿り着く前にページを離脱する⼀因に
18. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 18 2. 2つの課題と解決のアプローチ 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込みのレイアウトシフトの改善
19. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策1: データの⾮正規化 19 各マイクロサービスでは、作品の情報更新が⾏われたタイミングでメッセージキューにイベント を発⾏し、データを⾮正規化。(更新遅延は許容) 2. 2つの課題と解決のアプローチ 完成形のデータを各サービスで保持し、⾼速にレスポンスを返す
20. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 20 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込みのレイアウトシフトの改善 2. 2つの課題と解決のアプローチ
21. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策2: 初期画⾯に必要なデータだけ取得 21 GraphQLを使⽤して初期画⾯で必要なクエリのみを取得するようにして、⼤幅にデータ削減。 2. 2つの課題と解決のアプローチ
22. ©2021 Yahoo Japan Corporation All rights reserved. 公開 22 実際のクエリ (GraphQLで初期画⾯に必要なクエリだけを読み込む) スクロールしたら、また別のクエリを発⾏。
23. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策2: 初期画⾯に必要なデータだけ取得 23 初期に必要なデー得は requestIndleCallback を使⽤して遅延させるように。 複雑な処理は、ユーザー操作が可能になったタイミング後に⾏う独⾃Hookを作成。 2. 2つの課題と解決のアプローチ ℹ Next.js 11で導⼊された next/script では、strategyにlazyOnLoadやafterInteractiveを指定すると同等 のことができる。 window.requestIdleCallback( () => { // サードパーティスクリプトなど遅延実⾏したい処理を記述 }, { timeout: 3000 } );
24. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 24 2. 2つの課題と解決のアプローチ 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込みのレイアウトシフトの改善
25. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策3: WebPの採⽤と遅延読み込み 25 2. 2つの課題と解決のアプローチ 画像の遅延読み込みを実現するととも に、WebP形式を採⽤。 全体で約20%程度のファイルサイ ズ削減に。
26. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策3: WebPの採⽤と遅延読み込み 26 2. 2つの課題と解決のアプローチ WebPフォーマットが適⽤可能かクライアントサイドで判定を⾏った後、 画像フォーマット/サイズを変換する⾃社サービスを通して提供する。 画像変換サーバー オリジン クライアント https:// [画像URL] ? w=[幅] &h=[⾼さ] &fmt=[画像フォーマット] &q=[クオリティ] WebP判定: Accept-Header または 機能判定 WebP
27. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 27 2. 2つの課題と解決のアプローチ 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込みのレイアウトシフトの改善
28. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策4: preloadによる画像の事前読み込み 28 2. 2つの課題と解決のアプローチ ここの画像がLCP LCPにあたるTOP画像だけは遅延読み込みをせ ず、<link rel=“preload”>を使⽤していち 早く読み込みを⾏う。 LCPが1秒以上短縮する結果に。
29. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策4: preloadによる画像の事前読み込み 29 2. 2つの課題と解決のアプローチ ここの画像がLCP 画像の遅延読み込みや、preloadによる画像の事前読み込みは、画像⽤の独⾃コン ポーネントを作成して対応。 ℹ next/image + imgxなどのサービスを使⽤して、同等のことが実現可能です。 <LazyImage src={thumbnailUrl} // 画像URL width={thumbnailWidth} // 画像の幅 height={thumbnailHeight} // 画像の⾼さ alt={alt} type={type} preload // 先読み込みするかどうか />
30. ©2021 Yahoo Japan Corporation All rights reserved. 公開 30 LCPの画像を遅延なしでreloadして読み込む処理 画像ライブラリ内
31. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 31 2. 2つの課題と解決のアプローチ 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込みのレイアウトシフトの改善
32. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策5: 広告のレイアウトシフトの改善 32 2. 2つの課題と解決のアプローチ レイアウトシフト(要素のガタつき)が 「広告」の表⽰で発⽣。 PC広告 Mobile広告 デバイス種別に応じて予め余⽩を確 保した状態で広告を表⽰することで CLSをゼロに。
33. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策5: ホバーアニメーションのレイアウトシフトの改善 33 2. 2つの課題と解決のアプローチ CSS Transitionを⽤いてマウスホバー 時に拡⼤アニメーションを⾏っていた 箇所が意図せずCLSとして検知。 明⽰的に初期値のスタイルを記述す ることでCLSをゼロに。 (最終的に今回はアニメーションを削除しました。)
34. 公開 ©2021 Yahoo Japan Corporation All rights reserved. GYAO!のトップページのパフォーマンス課題 34 2. 2つの課題と解決のアプローチ 1. データの⾮正規化とキャッシュ 2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得 3. WebPの採⽤による画像サイズの削減と遅延読み込み 4. preloadによる画像の事前読み込み 5. 広告のレイアウトシフトの改善 6. 逐次読み込み処理の改善
35. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策6: 逐次読み込み処理の改善 35 逐次読み込みをした後、ローディングアイコンや フッター要素が下⽅向に移動し、CLSとして検出 されてしまう。(多くのサイトで頻発している) ここにコンテンツが差し込まれる 逐次読み込みの完了を検出してからフッター要素 を挿⼊することでCLSをゼロにする。 フッターが下⽅向にずれる 2. 2つの課題と解決のアプローチ
36. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 施策6: 逐次読み込みにおけるレイアウトシフトの改善 36 main/footerのHTML構造を維持して挿⼊するためにɺReact PortalΛ࢖༻͢Δɻ <html> <head /> <body> <main> <section> // 逐次読み込みモジュールの終端 <Footer id=“footer” /> </section> </main> </body> </html> <html> <head /> <body> <main> <section> // 逐次読み込みモジュールの終端 <Portal selector=“#footer” /> </section> </main> <Footer id=“footer” /> </body> </html> 2. 2つの課題と解決のアプローチ
37. ©2021 Yahoo Japan Corporation All rights reserved. 公開 3. 結果とビジネスインパクト 37
38. 公開 ©2021 Yahoo Japan Corporation All rights reserved. サーバーからの応答速度が向上 38 3. 結果とビジネスインパクト 基準 刷新前 刷新後 結果 サーバーからのレスポンス (TTFB) 約930ms 約330ms 約 600ms⾼速化
39. 公開 ©2021 Yahoo Japan Corporation All rights reserved. SpeedIndexが46%向上 39 3. 結果とビジネスインパクト 基準 刷新前 刷新後 結果 SpeedIndex 約2302 約1207 約 46%改善
40. 公開 ©2021 Yahoo Japan Corporation All rights reserved. CoreWebVitalsのスコア向上 40 3. 結果とビジネスインパクト
41. 公開 ©2021 Yahoo Japan Corporation All rights reserved. CoreWebVitalsのスコア向上 41 3. 結果とビジネスインパクト 基準 刷新前 刷新後 Largest Contentful Paint 3.1s 1.0s Time to Interactive 1.1s 1.3s Total Blocking Time 60ms 80ms Cumulative Layout Shift 0 0 各スコアは以下のような結果に。 (測定環境からの計測値であり、あくまで参考値です。)
42. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 広告指標の改善結果 42 今回、新たにビジネス影響を算出しました。 改善前後で広告のクリック率/閲覧率を⽐較しモバイルwebでは⼤きく数値が向上。 •期間は、刷新前(2020年7⽉1⽇から30⽇間)と、刷新後 (2020年11⽉16⽇から30⽇間) •レイアウト変更が影響しない1本⽬の広告のみ •対象デバイス(モバイルWeb/アプリWebView)の合算 3. 結果とビジネスインパクト 基準 刷新前 刷新後 上昇率 閲覧率 (ViewRate) 36.84% 54.4% 147% クリック率 (CTR) 0.57% 0.61% 108%
43. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 広告指標の改善結果 43 この結果はGoogle I/Oでも紹介されました。 h"ps://www.youtube.com/watch?v=nPmAE0YjGK0 3. 結果とビジネスインパクト
44. 公開 ©2021 Yahoo Japan Corporation All rights reserved. SearchConsole (Chrome UX Report) のスコア 44 3. 結果とビジネスインパクト 不良として扱われるページはPC環境ではほぼ撲滅...
45. 公開 ©2021 Yahoo Japan Corporation All rights reserved. SearchConsole (Chrome UX Report) のスコア 45 3. 結果とビジネスインパクト のはずが、最近はまた増加傾向に転じている。😔 これは、視聴ページのCLSの計算⽅法が変化したため。継続的な改善が必要です。
46. ©2021 Yahoo Japan Corporation All rights reserved. 公開 4. 考察と今後のアクション 46
47. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 考察1: 継続的な取り組みにする必要がある 47 4. 考察と今後のアクション 数値は⽇々変化する。ツールの特徴を活⽤し、変化にすぐ気付ける体制をつくること。 ツール 対象 ⽤途 lighthouse-ci LAB 定点観測し、試験環境を含む描画の詳細なCWVスコアを確認する。 CI/CD (Github Actions等) LAB PullRequest毎にファイルサイズや試験環境のCWVの算出して開発をア シスト。 サイト分析ツール (Gogole Analytics等) FIELD ユーザーの実測値をログ送信し、詳細に可視化できる。 Chrome UX Report FIELD Chromeの匿名情報のBigDataから実測値を取得できる。 Search Console FIELD ユーザーの実測値を⽇々URL単位で確認できる。 ツール別の特性を活⽤。ヤフーでも定常的な計測環境をサービスごとに⽤意。
48. 公開 ©2021 Yahoo Japan Corporation All rights reserved. 考察2: 共通項⽬はどんどん取り⼊れる 48 4. 考察と今後のアクション 実はどのサイトでも共通して改善できる項⽬が多い。 ツールの指摘内容の改善、ベストプラクティスを取り込んだライブラリを活⽤することでも、 改善できる。今回のノウハウが、⾃分のサービスにも使えないかぜひ確認してみてください。 ノウハウ 画像の読み込み改善 ノウハウ CLSの改善 ノウハウ preload ヤフー全体でも改善の取り組みを共通ナレッジに。
49. 公開 ©2021 Yahoo Japan Corporation All rights reserved. ⾼速なWEBに向けて、全社の取り組みに展開 49 4. 考察と今後のアクション 現在、ヤフー全社でも「快適な操作性」の提供を⽬指してノウハウの展開を進めています。 対競合で「快適な操作性」を提供し、 ビジネス指標の向上につなげる。 待ち時間なくすぐに⽬的を達成できる快適な操作性を ヤフーのWEB技術スタンダードにするとともに、 SEOを含むビジネス指標の改善を図ります。 (c) アフロ
50. ©2021 Yahoo Japan Corporation All rights reserved. 公開