Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

narirou
June 26, 2021

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

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

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

narirou

June 26, 2021
Tweet

More Decks by narirou

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    1. GYAO!トップページの特徴
    5

    View full-size slide

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

    View full-size slide

  7. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    7

    View full-size slide

  8. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    2. 2つの課題と解決のアプローチ
    8

    View full-size slide

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

    View full-size slide

  10. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    2. 2つの課題と解決のアプローチ
    10
    1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化
    (Core Web Vitals)
    API開発がボトルネックになり、開発
    が遅延。
    ページ表⽰までの速度が遅く、⽬的の
    ページに到達できない。

    View full-size slide

  11. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    課題1: API拡張性の低下
    2. 2つの課題と解決のアプローチ
    11
    BFF(Backends for Frontend)を採⽤した構成。
    これまでの構成
    データの取得が複雑化、
    仕様がBFFに⼀極集中し開発のボトルネックに

    View full-size slide

  12. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    解決: API拡張性の低下
    2. 2つの課題と解決のアプローチ
    12
    GraphQL Gatewayアーキテクチャを採⽤した構成。
    現在の構成

    View full-size slide

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

    View full-size slide

  14. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    GraphQL Gateway のメリット②
    2. 2つの課題と解決のアプローチ
    14
    各クライアントそれぞれの要件に応じた、柔軟なクエリを発⾏できる。
    クエリ定義の柔軟さによって、責務の集中を回避
    BFF
    クライアントの責務 データ提供の責務
    刷新前
    刷新後
    GraphQL Query

    View full-size slide

  15. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    2. 2つの課題と解決のアプローチ
    15
    1: APIの拡張性の低下 2: 表⽰パフォーマンスの悪化
    (Core Web Vitals)
    API開発がボトルネックになり、開発
    が遅延。
    ページ表⽰までの速度が遅く、⽬的の
    ページに到達できない。

    View full-size slide

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

    View full-size slide

  17. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    課題2: 表⽰パフォーマンス(CoreWebVitals数値) の悪化
    2. 2つの課題と解決のアプローチ
    17
    GYAO!で特に問題となっていたのは、LCPとCLSの2項⽬。
    ユーザーが映像に辿り着く前にページを離脱する⼀因に

    View full-size slide

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

    View full-size slide

  19. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    施策1: データの⾮正規化
    19
    各マイクロサービスでは、作品の情報更新が⾏われたタイミングでメッセージキューにイベント
    を発⾏し、データを⾮正規化。(更新遅延は許容)
    2. 2つの課題と解決のアプローチ
    完成形のデータを各サービスで保持し、⾼速にレスポンスを返す

    View full-size slide

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

    View full-size slide

  21. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    施策2: 初期画⾯に必要なデータだけ取得
    21
    GraphQLを使⽤して初期画⾯で必要なクエリのみを取得するようにして、⼤幅にデータ削減。
    2. 2つの課題と解決のアプローチ

    View full-size slide

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

    View full-size slide

  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 }
    );

    View full-size slide

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

    View full-size slide

  25. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    施策3: WebPの採⽤と遅延読み込み
    25
    2. 2つの課題と解決のアプローチ
    画像の遅延読み込みを実現するととも
    に、WebP形式を採⽤。
    全体で約20%程度のファイルサイ
    ズ削減に。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    施策4: preloadによる画像の事前読み込み
    28
    2. 2つの課題と解決のアプローチ
    ここの画像がLCP
    LCPにあたるTOP画像だけは遅延読み込みをせ
    ず、を使⽤していち
    早く読み込みを⾏う。
    LCPが1秒以上短縮する結果に。

    View full-size slide

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

    View full-size slide

  30. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    30
    LCPの画像を遅延なしでreloadして読み込む処理
    画像ライブラリ内

    View full-size slide

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

    View full-size slide

  32. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    施策5: 広告のレイアウトシフトの改善
    32
    2. 2つの課題と解決のアプローチ
    レイアウトシフト(要素のガタつき)が
    「広告」の表⽰で発⽣。
    PC広告
    Mobile広告
    デバイス種別に応じて予め余⽩を確
    保した状態で広告を表⽰することで
    CLSをゼロに。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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




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









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






    2. 2つの課題と解決のアプローチ

    View full-size slide

  37. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    3. 結果とビジネスインパクト
    37

    View full-size slide

  38. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    サーバーからの応答速度が向上
    38
    3. 結果とビジネスインパクト
    基準 刷新前 刷新後 結果
    サーバーからのレスポンス
    (TTFB)
    約930ms 約330ms 約
    600ms⾼速化

    View full-size slide

  39. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    SpeedIndexが46%向上
    39
    3. 結果とビジネスインパクト
    基準 刷新前 刷新後 結果
    SpeedIndex 約2302 約1207 約
    46%改善

    View full-size slide

  40. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    CoreWebVitalsのスコア向上
    40
    3. 結果とビジネスインパクト

    View full-size slide

  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
    各スコアは以下のような結果に。
    (測定環境からの計測値であり、あくまで参考値です。)

    View full-size slide

  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%

    View full-size slide

  43. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    広告指標の改善結果
    43
    この結果はGoogle I/Oでも紹介されました。
    h"ps://www.youtube.com/watch?v=nPmAE0YjGK0
    3. 結果とビジネスインパクト

    View full-size slide

  44. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    SearchConsole (Chrome UX Report)
    のスコア
    44
    3. 結果とビジネスインパクト
    不良として扱われるページはPC環境ではほぼ撲滅...

    View full-size slide

  45. 公開
    ©2021 Yahoo Japan Corporation All rights reserved.
    SearchConsole (Chrome UX Report)
    のスコア
    45
    3. 結果とビジネスインパクト
    のはずが、最近はまた増加傾向に転じている。😔
    これは、視聴ページのCLSの計算⽅法が変化したため。継続的な改善が必要です。

    View full-size slide

  46. ©2021 Yahoo Japan Corporation All rights reserved.
    公開
    4. 考察と今後のアクション
    46

    View full-size slide

  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単位で確認できる。
    ツール別の特性を活⽤。ヤフーでも定常的な計測環境をサービスごとに⽤意。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. ©2021 Yahoo Japan Corporation All rights reserved.
    公開

    View full-size slide