LINEヤフーにおけるPrerender技術の導入とその効果

© LY Corporation Internal Use Only LINEヤフー株式会社浜田真成喜楽
智規 LINEヤフーにおける Prerender技術の導入とその効果

© LY Corporation 浜田真成 Hamada Masanari Yahoo! トップページエンジニア
2 喜楽智規 Kiraku Tomoki Yahoo!ニュースエンジニア

© LY Corporation 3 概要パフォーマンス向上の手法として、Webコミュニティは「先読み」の技術を模索してきました。本日はその技術を振り返り、よりアグレッシブに投機的な先読みを行う「Prerender」について、Yahoo! JAPAN
において適用した知見をもとに、本技術の適用余地を探ります。

© LY Corporation Internal Use Only Agenda 4 1. 先読みに関するWeb技術をふりかえる
2. Yahoo! JAPAN における導入テスト 3. テスト結果の考察

© LY Corporation 6 パフォーマンス最適化の重要な考え方の一つが、予測である。ユーザーの行動やブラウザのレンダリング特性から、次に必要なリソースを予測して順番を最適化する。今必要なものを先に読み込み、そうでないものは遅延して読み込む。または、可能性が高い要素をあらかじめ読み込む。パフォーマンス技術の発展は、この最適化に対する「ヒント情報」を試行錯誤した歴史でもある。ユーザー行動を予測し、先回りする

© LY Corporation 7 Web標準における先読みの手法 • Resource Hints o dns-prefetch
o preconnect o preload o modulepreload o prefetch o prerender • Service Worker • Fetch Priority API • Private Prefetch Proxy • Speculation Rules API

o preconnect o preload o modulepreload o prefetch o prerender • Service Worker • Fetch Priority API • Private Prefetch Proxy • Speculation Rules API

© LY Corporation 9 ResourceHints: preload 用途: ページ内で使用する優先度の高いリソースを先に読み込む主に、画像(LCP)やCSSなどのうち初期画面に必要なクリティカルなアセットを優先して読み込むことをブラウ
ザに指示するために利用される。一般化しており、Next.jsなどのJavaScriptフレームワークでもデフォルトでこの最適化手法が利用されている。 <head> <link rel="preload" as="style” href="styles.css”> <link rel="preload" as="font” crossorigin type="font/woff2” href="font.woff2"> </head>

© LY Corporation • Resource Hints o dns-prefetch o preconnect
o preload o modulepreload o prefetch o prerender • Service Worker • Fetch Priority API 10 Web標準における先読みの手法 • Private Prefetch Proxy • Speculation Rules API preloadは一般化し、より最適化するための APIが追加されていった。 modulepreloadは、依存を含むJSの読み込みに最適化されており、JSの読み込みとパース処理までを行う。 FetchPriorityAPIでは、HTMLのfetchpriority属性や、fetchのoptionを追加し、用途に適した記述が可能になった。

o preload o modulepreload o prefetch o prerender 11 Web標準における先読みの手法 • Service Worker • Fetch Priority API • Private Prefetch Proxy • Speculation Rules API

© LY Corporation 12 ResourceHints: prefetch 用途: 次のナビゲーションに必要なリソース/ページを先に読み込む <link rel="prefetch"
href="/app/style.css"> <link rel="prefetch" href="/landing-page"> 次の行動で利用される可能性が高いサブリソースや、静的な次のページを事前にHTTPCacheに保持することをブラウザに明示する。こちらも広く一般化しており、フレームワークのリンク遷移の最適化に多く利用されている。 GoogleAnalyticsなどの統計情報から最適化を行うライブラリ、Guess.jsなどが話題に。

o preconnect o preload o modulepreload o prefetch o prerender • Service Worker • Fetch Priority API • Private Prefetch Proxy • Speculation Rules API prefetchは一般化して、cross-originにおける先読みの技術が考えられるようになった。

© LY Corporation 14 Private Prefetch Proxy 用途: 匿名化した状態でcross-originな次のページを先読みする cross-originでprefetchを行うと、第三者のサー
バーに情報が伝わることになる。匿名化されたサーバーを介してプライベートを担保されたユーザーのみに、cross-originのリソースの先読みを行う。例としては、2024年現在Googleの検索結果上位3 件に適用されている。なお、Yahoo!ニュースで効果を検証したが、日本のユーザーの大半がYahoo! JAPANのCookieを持っていたため、ほとんどキャッシュされない結果となった... anonymous proxy

o preload o modulepreload o prefetch o prerender (deprecated) 15 Web標準における先読みの手法 • ServiceWorker • Fetch Priority API • Private Prefetch Proxy • Speculation Rules API 動的に行うには、JSとの連動が必要になる。動作対象や発火タイミングをより宣言的に記述するため、新しいAPIが提唱された。

© LY Corporation 16 Speculation Rules API 用途: 宣言的なルールをもとに次のページを先読みする <script
type="speculationrules"> { "prerender": [ { "where": { "and": [ { "href_matches": "/*" }, { "not": { "selector_matches": ".no-prerender" } } ] } } ] } </script> Speculation Rules APIは、宣言的なルールを記述し、条件に合致したリンク先に対して、 prerender/prefetchの挙動を細かく制御することができる。MPAを想定しており、SPAでの利用は想定していない。 • where/href_maches • URL Pattern syntaxによって対象のリンクを指定 • where/selector_matches • クエリセレクタで対象のリンクを指定

© LY Corporation 18 Speculation Rules API: eagerness設定 eagerness 挙動
prerenderキャッシュ保持上限 immediate ルールが適用され次第すぐ実行する 10 eager immediateと同じ ※2024/11時点ではこの挙動だが、将来的にはimmediateとeagerの間になる予定 10 moderate リンクの上に 200 ミリ秒間ポインタを置いた場合に実行 ※pointerdownがそれより早い場合はイベント時、モバイルの場合 hoverで実行 2 (FIFO) conservertive mousedownまたはtouchdownで実行 2 (FIFO) eagernessの設定を追加することで、先読みの挙動を変えることができる。

© LY Corporation 19 Speculation Rules API: 注意点 Prerenderを行うとページ内の描画やJavaScriptも実行される Prerenderを実行すると次のページが”見えないタ
ブで実行される”と考えて良い。ページの描画処理が行われ、JavaScriptの実行も実行される。問題がある場合は、Prerenderのリクエストを見分けて処理を実行しないでおき、Prerender Safe な実装を行うことが必要。描画処理 JSも実行される

© LY Corporation 20 ページを Prerender Safe にする Prerenderのリクエストと通常のリクエストで処理をわけ、Prerenderされても問題が起きないようにページ処理を変更する必要がある。
• Sec-Purpose: prerenderヘッダの有無 • document.prerendering • prerenderchangeイベント // 実際にページが表示されたときに一度だけ実行する例 const init = () => { /* 一度の処理 */ } if (document.prerendering) { document.addEventListener("prerenderingchange", init, { once: true, }); } else { init(); } 特に分析用のスクリプトなどは、Prerender Safeに実装を行っておかないと数値がおかしくなる。 (GAではすでに対応がなされている) リクエストを見分けるには、以下のような方法がある。

© LY Corporation 22 Prerender導入のABテスト概要 https://www.yahoo.co.jp/ https://news.yahoo.co.jp/ prerender Yahoo! JAPAN
(デスクトップ版)にて、 Speculation Rules APIを使ったPrerender導入を一部ユーザーを対象にテストを行った。(対象は青色の箇所)

© LY Corporation Internal Use Only 23 デスクトップ版でテストした理由 https://caniuse.com/mdn-html_elements_script_type_speculationrules Yahoo!
JAPANユーザーの約85%が、Speculation Rules APIに対応したブラウザを使っている。デスクトップPCではポインターを操作するので、リンク先のhoverを起点にしてPrerenderを発動することができ、検証に適していた。

© LY Corporation Internal Use Only 24 Prerender導入: 実装 <script
type="speculationrules"> { "prerender": [ { "where": { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> 遷移元の実装

type="speculationrules"> { "prerender": [ { "where": { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> 遷移元の実装 Prerender対象の指定

type="speculationrules"> { "prerender": [ { "where": { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> 遷移元の実装 Prerenderタイミングの指定 moderate: 200msec hover

© LY Corporation Internal Use Only 27 Prerender導入: 実装 if
(document.prerendering) { document.addEventListener(‘prerenderingchange’, () => { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) }, { once: true }); } else { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) } 遷移先の実装社内製ロガー、広告、タグマネージャーなどをPrerender Safe化。 Prerender時は実行せず、ユーザーが実際にページを表示したときに、実行する。

(document.prerendering) { document.addEventListener(‘prerenderingchange’, () => { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) }, { once: true }); } else { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) } 遷移先の実装社内製ロガー、広告、タグマネージャーなどをPrerender Safe化。 Prerender時は実行せず、ユーザーが実際にページを表示したときに、実行する。 Prerender時

(document.prerendering) { document.addEventListener(‘prerenderingchange’, () => { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) }, { once: true }); } else { // pageview時に実行したい処理 // (例) logger.hit(‘pageview’) } 遷移先の実装社内製ロガー、広告、タグマネージャーなどをPrerender Safe化。 Prerender時は実行せず、ユーザーが実際にページを表示したときに、実行する。実際にページを表示したとき

© LY Corporation Internal Use Only 30 Prerender導入: 実装 Supports-Loading-Mode:
credentialed-prerender 遷移先の実装レスポンスヘッダにSupports-Loading-Mode ヘッダを含めると、cross-originでもCookie を含めたPrerenderが可能になるため、YJドメインのみヘッダを返却。

(document.prerendering) { // prerenderされたとき logger.hit('prerender_prerendered'); document.addEventListener('prerenderingchange', () => { // prerenderされて、ページ表示されたとき logger.hit('prerender_viewed‘); }, { once: true }); } 遷移先の実装 • Prerenderされた数 • Prerenderされてそのページが表示された数をそれぞれロギングし、分析用のメトリクスを収集。Hitrateを算出する。

© LY Corporation ページ読み込み※ 中央値 -0.13sec (-6.9%) 33 結果サマリ
PV・滞在時間などのユーザー行動指標有意差なし広告売上変化なし ※ performance.timing におけるloadEventEnd – navigationStartの値

© LY Corporation 34 主要なコンテンツが表示されるまでの時間 Prerenderされたページに遷移: 0.4 sec Prerenderなしでページに遷移: 0.8
sec ※ Chrome DevToolsにて、CPUをx6 slowdown throttlingしたとき Good

© LY Corporation Internal Use Only 35 Prerender Hitrateは約15%
eagernessをmoderateのとき、Prerender数を100%とすると、実際に表示した数は15%。約85%のprerenderリクエストは実際にページ表示に至らず、無駄なリクエストが発生した。 Prerender 100% Actual View 15% Bad

© LY Corporation Internal Use Only 36 システム増強の必要性この結果をもとにすべてのデスクトップユーザーを対象にPrerender機能をを提供した場合、システムキャパシティは5.9倍必要となり、対策が必要という結果となった。
※ Prerender Hitrateが15%、リクエスト数に応じて線形にシステム増強が必要だと仮定 Prerender なし Prerender あり 5.9 倍 Bad

© LY Corporation Internal Use Only Prerender導入によって「ビジネス指標(PVや滞在時間)」「ディスプレイ広告売上」の向上を目指したが、全体からみた数値においては優位な傾向は得られなかった。 1
ビジネス指標は向上しなかった 38 結果の考察 2 無駄リクエストに起因する悪影響があった約85%の先読みリクエストが無駄になり、ネットワーク帯域を占有し、サーバーリソースを増加させる結果となった。なぜだろうか？

© LY Corporation 39 1: ビジネス指標が向上しなかった要因パフォーマンス改善幅が小さかった一部のユーザーを少し高速化しただけでは、必ずしも優位な結果を導かなかった。遷移先のYahoo!ニュースは比較的静的で、高速。
導入前後のパフォーマンス改善幅は小さくとどまった。広告はPrerenderできなかった Yahoo!ニュースは広告ビジネスモデル。メインコンテンツは高速に表示できるが、 iframeを伴う広告まで先読みができない。 empty 

© LY Corporation 40 2: 無駄リクエストに起因する悪影響があった Prerenderの効果を最大限得るには、無駄リクエストが生み出す負債とのトレードオフを考慮する必要がある。 prerender hitrateを高めないとメリットは得られにくい
売上の向上体験の向上サーバーリソースの増加ネットワーク帯域の占有 Prerender Hitrate

© LY Corporation 41 2-1: Prerender Hitrateが低い要因 (密集したUI) ・リンク1 ・リンク2
・リンク3 リンク1 デスクトップユーザーは、遷移先のページを選択するのにポインターを動かしながら迷うことがある (= 迷いマウス)。小さく密集したリンクでは、リンク先に複数hoverする確率が高くなり、Prerenderが発火しやすい。リンク1 リンク2 リンク3 密集度低密集度高

© LY Corporation 42 2-2: Prerender Hitrateが低い要因 (選択肢の多さ) コンテンツ特性として、選択肢が多く提示している場合、クリックされる確率は低くなる。
UX導線として必ず遷移されるものに限定したり、ユーザーの行動特性から可能性が高まったものに対して動的にPrerenderするなどして、その確率を高める工夫をする必要があった。

© LY Corporation 43 ユーザーの遷移確率が高いことを予測できる例ナビゲーショナルクエリで検索する要素特定するワードで検索される場合、マッチした上位コンテンツをクリックする可能性は非常に高い。 ex: 「ヤフー」「Github」「JSConf
JP」人気コンテンツがある一時的に人気が高まるなどしてクリック数の傾斜がかかる場合 ex: Yahoo! JAPANトップページの話題のコンテンツ導線上に必ず押すボタンがある ex: 次へ進むことが確定的に明らかな説明ページ ex: ゲームの開始前でスタートボタンを押してから読み込みを開始する場合 DON'T PUSH THE BUTTON

© LY Corporation 45 Prerender導入時の確認ポイント 1. 導入前後の改善幅が十分にあるか? o 遷移先にパフォーマンス課題があるほうが、改善余地は大きい o
ユーザー体験の課題があるかどうかをベースにして遷移対象を選定すると、結果を得やすい 2. ユーザーの遷移確率は高いか？ o ユーザーが対象に遷移する確率が高いかどうかは、コンテンツ特性とページの文脈で決まる o 過去のクリック数やユーザー行動を分析して、遷移するかどうかの可能性を動的に探るアプローチもある 3. 迷いマウスが発生しないか？ o ユーザーが迷う選択肢を羅列するUIは、hitrateの悪化をもたらす 4. 上記の選定によって、無駄なリクエストとのトレードオフは満たせるか?

© LY Corporation 46 まとめ ✓ 今回はWeb標準として考案された「先読み」の技術を振り返った ✓ 今回のYahoo! JAPANトップページからニュースへのテストでは
• 大規模なページでsame-siteでのPrerender導入を実施、高速化を実現した • パフォーマンスの向上がみられたものの、ビジネス指標への影響はみられなかった ✓ 得られた知見として • 無駄なリクエストとのトレードオフを考慮し、改善幅が大きい最適な適用先を見つけ出す必要がある • ヒットレートを向上させるには、コンテンツ特性の考慮や、ユーザー行動を考えた最適化が必要になる

LINEヤフーにおけるPrerender技術の導入とその効果

LINEヤフーにおけるPrerender技術の導入とその効果

More Decks by narirou

Other Decks in Technology

Featured

Transcript