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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

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

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

公開 ©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 } );

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

公開 ©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%

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text