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

©2021 Yahoo Japan Corporation All rights reserved.
GYAO!TOPページパフォーマンス改善
GraphQLアーキテクチャへの移⾏とその後
ヤフー株式会社浜⽥真成
2021/06/26

View Slide

公開
このセッションについて
PWAの重要な要件にパフォーマンスがあります。
今回はGYAO!トップページのWEBパフォーマンスの改善施策をご紹介します。
⼤規模な構成変更と、その成果として得られたスケーラビリティ、
ページの表⽰速度の向上について、具体例を交えてお話しします。
改善⽅法、具体的に伝えます。ぜひ⾊々質問してください。

View Slide

公開
⽬次
1. GYAO!トップページの特徴
2. 2つの課題と解決のアプローチ
•APIの拡張性の改善
•表⽰パフォーマンスの改善
3. 結果とビジネスインパクト
4. 考察と今後のアクション
3

View Slide

公開
⾃⼰紹介
4
浜⽥真成
フロントエンド領域を中⼼にGYAO!で技術リードをして
います。ヤフー全社横断でWebパフォーマンス改善PJを
推進中。
Twi$er: @narirow

View Slide

公開
1. GYAO!トップページの特徴
5

View Slide

公開
GYAO!のトップページ
6
豊富な作品ラインナップから、ユー
ザーの趣向に合わせた作品を並べる。
• レコメンデーション
• ターゲティング
• 複雑な機能
• ⼤量の画像が存在
• 縦にとても⻑いページ構成
1.GYAOトップページの特徴

View Slide

公開
7

View Slide

公開
8

View Slide

公開
2つの課題
9
GYAO!のトップページを運⽤するにあたって、⼤きく2点が課題に上がりました。
1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化
(Core Web Vitals)
API開発がボトルネックになり、開発
が遅延。
ページ表⽰までの速度が遅く、⽬的の
ページに到達できない。

View Slide

公開
10
(Core Web Vitals)
が遅延。

View Slide

公開
課題1: API拡張性の低下
11
BFF(Backends for Frontend)を採⽤した構成。
これまでの構成
データの取得が複雑化、
仕様がBFFに⼀極集中し開発のボトルネックに

View Slide

公開
解決: API拡張性の低下
12
GraphQL Gatewayアーキテクチャを採⽤した構成。
現在の構成

View Slide

公開
GraphQL Gateway のメリット①
13
GraphQL Schema がサービス全体の型定義となり、開発者が各マイクロサービスを
シームレスに接続できる。(クライアントからは、graphql-codegenを使⽤して型安全に接続しています)
Gatewayがサービス全体の「型」として機能
クライアント
クライアント
クライアント
Schema Registory
マイクロサービス

View Slide

公開
GraphQL Gateway のメリット②
14
各クライアントそれぞれの要件に応じた、柔軟なクエリを発⾏できる。
クエリ定義の柔軟さによって、責務の集中を回避
BFF
クライアントの責務データ提供の責務
刷新前
刷新後
GraphQL Query

View Slide

公開
15
(Core Web Vitals)
が遅延。

View Slide

公開
課題2: 表⽰パフォーマンス(CoreWebVitals数値) の悪化
16
読み込みパフォーマンス
メインコンテンツが表⽰されるまでの時間
インタラクティブ性
ユーザーが操作可能になるまでの時間
視覚的安定性
レイアウトのガタつきをスコア化
CoreWebVitalsは、Googleが提唱するWebページのパフォーマンス品質をスコアリングする指標。
指標は現時点のものであり、時代とともに変更される。

View Slide

公開
課題2: 表⽰パフォーマンス(CoreWebVitals数値) の悪化
17
GYAO!で特に問題となっていたのは、LCPとCLSの2項⽬。
ユーザーが映像に辿り着く前にページを離脱する⼀因に

View Slide

公開
GYAO!のトップページのパフォーマンス課題
18
1. データの⾮正規化とキャッシュ
2. GraphQLを使⽤して初期画⾯に必要なデータだけ取得
3. WebPの採⽤による画像サイズの削減と遅延読み込み
4. preloadによる画像の事前読み込み
5. 広告のレイアウトシフトの改善
6. 逐次読み込みのレイアウトシフトの改善

View Slide

公開
施策1: データの⾮正規化
19
各マイクロサービスでは、作品の情報更新が⾏われたタイミングでメッセージキューにイベント
を発⾏し、データを⾮正規化。(更新遅延は許容)
完成形のデータを各サービスで保持し、⾼速にレスポンスを返す

View Slide

公開
20

View Slide

公開
施策2: 初期画⾯に必要なデータだけ取得
21
GraphQLを使⽤して初期画⾯で必要なクエリのみを取得するようにして、⼤幅にデータ削減。

View Slide

公開
22
実際のクエリ (GraphQLで初期画⾯に必要なクエリだけを読み込む)
スクロールしたら、また別のクエリを発⾏。

View Slide

公開
施策2: 初期画⾯に必要なデータだけ取得
23
初期に必要なデー得は requestIndleCallback を使⽤して遅延させるように。
複雑な処理は、ユーザー操作が可能になったタイミング後に⾏う独⾃Hookを作成。
ℹ Next.js 11で導⼊された next/script では、strategyにlazyOnLoadやafterInteractiveを指定すると同等
のことができる。
window.requestIdleCallback(
() => {
// サードパーティスクリプトなど遅延実⾏したい処理を記述
},
{ timeout: 3000 }
);

View Slide

公開
24

View Slide

公開
施策3: WebPの採⽤と遅延読み込み
25
画像の遅延読み込みを実現するととも
に、WebP形式を採⽤。
全体で約20%程度のファイルサイ
ズ削減に。

View Slide

公開
施策3: WebPの採⽤と遅延読み込み
26
WebPフォーマットが適⽤可能かクライアントサイドで判定を⾏った後、
画像フォーマット/サイズを変換する⾃社サービスを通して提供する。
画像変換サーバーオリジン
クライアント
https:// [画像URL] ? w=[幅] &h=[⾼さ] &fmt=[画像フォーマット] &q=[クオリティ]
WebP判定: Accept-Header
または機能判定
WebP

View Slide

公開
27

View Slide

公開
施策4: preloadによる画像の事前読み込み
28
ここの画像がLCP
LCPにあたるTOP画像だけは遅延読み込みをせ
ず、を使⽤していち
早く読み込みを⾏う。
LCPが1秒以上短縮する結果に。

View Slide

公開
施策4: preloadによる画像の事前読み込み
29
ここの画像がLCP
画像の遅延読み込みや、preloadによる画像の事前読み込みは、画像⽤の独⾃コン
ポーネントを作成して対応。
ℹ next/image + imgxなどのサービスを使⽤して、同等のことが実現可能です。
src={thumbnailUrl} // 画像URL
width={thumbnailWidth} // 画像の幅
height={thumbnailHeight} // 画像の⾼さ
alt={alt}
type={type}
preload // 先読み込みするかどうか
/>

View Slide

公開
30
LCPの画像を遅延なしでreloadして読み込む処理
画像ライブラリ内

View Slide

公開
31

View Slide

公開
施策5: 広告のレイアウトシフトの改善
32
レイアウトシフト(要素のガタつき)が
「広告」の表⽰で発⽣。
PC広告
Mobile広告
デバイス種別に応じて予め余⽩を確
保した状態で広告を表⽰することで
CLSをゼロに。

View Slide

公開
施策5: ホバーアニメーションのレイアウトシフトの改善
33
CSS Transitionを⽤いてマウスホバー
時に拡⼤アニメーションを⾏っていた
箇所が意図せずCLSとして検知。
明⽰的に初期値のスタイルを記述す
ることでCLSをゼロに。
(最終的に今回はアニメーションを削除しました。)

View Slide

公開
34
6. 逐次読み込み処理の改善

View Slide

公開
施策6: 逐次読み込み処理の改善
35
逐次読み込みをした後、ローディングアイコンや
フッター要素が下⽅向に移動し、CLSとして検出
されてしまう。(多くのサイトで頻発している) ここにコンテンツが差し込まれる
逐次読み込みの完了を検出してからフッター要素
を挿⼊することでCLSをゼロにする。
フッターが下⽅向にずれる

View Slide

公開
施策6: 逐次読み込みにおけるレイアウトシフトの改善
36
main/footerのHTML構造を維持して挿⼊するためにɺReact PortalΛ࢖༻͢Δɻ

// 逐次読み込みモジュールの終端

// 逐次読み込みモジュールの終端


View Slide

公開
37

View Slide

公開
サーバーからの応答速度が向上
38
基準刷新前刷新後結果
サーバーからのレスポンス
(TTFB)
約930ms 約330ms 約
600ms⾼速化

View Slide

公開
SpeedIndexが46%向上
39
基準刷新前刷新後結果
SpeedIndex 約2302 約1207 約
46%改善

View Slide

公開
CoreWebVitalsのスコア向上
40

View Slide

公開
CoreWebVitalsのスコア向上
41
基準刷新前刷新後
Largest Contentful Paint 3.1s 1.0s
Time to Interactive 1.1s 1.3s
Total Blocking Time 60ms 80ms
Cumulative Layout Shift 0 0
各スコアは以下のような結果に。
(測定環境からの計測値であり、あくまで参考値です。)

View Slide

公開
広告指標の改善結果
42
今回、新たにビジネス影響を算出しました。
改善前後で広告のクリック率/閲覧率を⽐較しモバイルwebでは⼤きく数値が向上。
•期間は、刷新前(2020年7⽉1⽇から30⽇間)と、刷新後
(2020年11⽉16⽇から30⽇間)
•レイアウト変更が影響しない1本⽬の広告のみ
•対象デバイス(モバイルWeb/アプリWebView)の合算
基準刷新前刷新後上昇率
閲覧率
(ViewRate) 36.84% 54.4%
147%
クリック率
(CTR) 0.57% 0.61%
108%

View Slide

公開
広告指標の改善結果
43
この結果はGoogle I/Oでも紹介されました。
h"ps://www.youtube.com/watch?v=nPmAE0YjGK0

View Slide

公開
SearchConsole (Chrome UX Report)
のスコア
44
不良として扱われるページはPC環境ではほぼ撲滅...

View Slide

公開
SearchConsole (Chrome UX Report)
のスコア
45
のはずが、最近はまた増加傾向に転じている。😔
これは、視聴ページのCLSの計算⽅法が変化したため。継続的な改善が必要です。

View Slide

公開
46

View Slide

公開
考察1: 継続的な取り組みにする必要がある
47
数値は⽇々変化する。ツールの特徴を活⽤し、変化にすぐ気付ける体制をつくること。
ツール対象⽤途
lighthouse-ci LAB 定点観測し、試験環境を含む描画の詳細なCWVスコアを確認する。
CI/CD
(Github Actions等) LAB
PullRequest毎にファイルサイズや試験環境のCWVの算出して開発をア
シスト。
サイト分析ツール
(Gogole Analytics等) FIELD ユーザーの実測値をログ送信し、詳細に可視化できる。
Chrome UX Report FIELD Chromeの匿名情報のBigDataから実測値を取得できる。
Search Console FIELD ユーザーの実測値を⽇々URL単位で確認できる。
ツール別の特性を活⽤。ヤフーでも定常的な計測環境をサービスごとに⽤意。

View Slide

公開
考察2: 共通項⽬はどんどん取り⼊れる
48
実はどのサイトでも共通して改善できる項⽬が多い。
ツールの指摘内容の改善、ベストプラクティスを取り込んだライブラリを活⽤することでも、
改善できる。今回のノウハウが、⾃分のサービスにも使えないかぜひ確認してみてください。
ノウハウ
画像の読み込み改善
ノウハウ
CLSの改善
ノウハウ
preload
ヤフー全体でも改善の取り組みを共通ナレッジに。

View Slide

公開
⾼速なWEBに向けて、全社の取り組みに展開
49
現在、ヤフー全社でも「快適な操作性」の提供を⽬指してノウハウの展開を進めています。
対競合で「快適な操作性」を提供し、
ビジネス指標の向上につなげる。
待ち時間なくすぐに⽬的を達成できる快適な操作性を
ヤフーのWEB技術スタンダードにするとともに、
SEOを含むビジネス指標の改善を図ります。
(c) アフロ

View Slide

公開

View Slide

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

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

narirou

More Decks by narirou

Other Decks in Technology

Featured

Transcript