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

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

narirou
November 23, 2024

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

LINEヤフーは快適なユーザー体験を追求するために、表示パフォーマンスの改善に取り組んでいます。その取組の1つとして、私達はSpeculationRulesAPIを用いてページを事前にレンダリングし、Yahoo! JAPAN トップページとYahoo!ニュース間の遷移において、その結果を検証してきました。 本セッションでは、Web標準やJavaScriptエコシステムがこれまでどのような先読みの技術を扱ってきたかその変遷を振り返りながら、SpeculationRulesAPIの基本的な仕組みとその利点について説明し、どのようにしてYahoo! JAPANのユーザー体験を向上させたかを具体例を交えて紹介します。加えて、今回の結果をもとに、導入に際して得られたノウハウや課題、重要なビジネスKPIにどう影響したか、ユーザーエンゲージメントがどの程度向上したか、サーバーリソースにどの程度影響があるのか、などについて具体的なデータをもとに解説します。WebにおけるPrerender技術を適用するべきポイントの可能性を探り、プロダクトに取り入れるために参考となる情報を提供します。

narirou

November 23, 2024
Tweet

More Decks by narirou

Other Decks in Technology

Transcript

  1. ˜-:$PSQPSBUJPO  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o

    QSFMPBE o NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1* • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1*
  2. ˜-:$PSQPSBUJPO  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o

    QSFMPBE o NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1* • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1*
  3. ˜-:$PSQPSBUJPO  3FTPVSDF)JOUTQSFMPBE ༻్ϖʔδ಺Ͱ࢖༻͢Δ༏ઌ౓ͷߴ͍ϦιʔεΛઌʹಡΈࠐΉ ओʹɺը૾ -$1 ΍$44ͳͲͷ͏ͪॳظը໘ʹඞཁͳΫ ϦςΟΧϧͳΞηοτΛ༏ઌͯ͠ಡΈࠐΉ͜ͱΛϒϥ΢ βʹࢦࣔ͢ΔͨΊʹར༻͞ΕΔɻ ҰൠԽ͓ͯ͠Γɺ/FYUKTͳͲͷ+BWB4DSJQUϑϨʔϜ

    ϫʔΫͰ΋σϑΥϧτͰ͜ͷ࠷దԽख๏͕ར༻͞Ε͍ͯ Δɻ <head> <link rel="preload" as="style” href="styles.css”> <link rel="preload" as="font” crossorigin type="font/woff2” href="font.woff2"> </head>
  4. ˜-:$PSQPSBUJPO • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o QSFMPBE o

    NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1*  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1* QSFMPBE͸ҰൠԽ͠ɺΑΓ࠷దԽ͢ΔͨΊͷ "1*͕௥Ճ͞Ε͍ͯͬͨɻ NPEVMFQSFMPBE͸ɺґଘΛؚΉ+4ͷಡΈࠐΈʹ࠷ దԽ͞Ε͓ͯΓɺ+4ͷಡΈࠐΈͱύʔεॲཧ·ͰΛ ߦ͏ɻ 'FUDI1SJPSJUZ"1*Ͱ͸ɺ)5.-ͷGFUDIQSJPSJUZଐ ੑ΍ɺGFUDIͷPQUJPOΛ௥Ճ͠ɺ༻్ʹదͨ͠هड़ ͕Մೳʹͳͬͨɻ
  5. ˜-:$PSQPSBUJPO • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o QSFMPBE o

    NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1* • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1*
  6. ˜-:$PSQPSBUJPO  3FTPVSDF)JOUTQSFGFUDI ༻్࣍ͷφϏήʔγϣϯʹඞཁͳϦιʔεϖʔδΛઌʹಡΈࠐΉ <link rel="prefetch" href="/app/style.css"> <link rel="prefetch" href="/landing-page">

    ࣍ͷߦಈͰར༻͞ΕΔՄೳੑ͕ߴ͍αϒϦιʔε΍ɺ੩ తͳ࣍ͷϖʔδΛࣄલʹ)551$BDIFʹอ࣋͢Δ͜ͱ Λϒϥ΢βʹ໌ࣔ͢Δɻ ͪ͜Β΋޿͘ҰൠԽ͓ͯ͠ΓɺϑϨʔϜϫʔΫͷϦϯΫ ભҠͷ࠷దԽʹଟ͘ར༻͞Ε͍ͯΔɻ (PPHMF"OBMZUJDTͳͲͷ౷ܭ৘ใ͔Β࠷దԽΛߦ͏ϥ ΠϒϥϦɺ(VFTTKTͳͲ͕࿩୊ʹɻ
  7. ˜-:$PSQPSBUJPO  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o

    QSFMPBE o NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1* • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1* QSFGFUDI͸ҰൠԽͯ͠ɺDSPTTPSJHJOʹ͓ ͚ΔઌಡΈͷٕज़͕ߟ͑ΒΕΔΑ͏ʹͳͬ ͨɻ
  8. ˜-:$PSQPSBUJPO • 3FTPVSDF)JOUT o EOTQSFGFUDI o QSFDPOOFDU o QSFMPBE o

    NPEVMFQSFMPBE o QSFGFUDI o QSFSFOEFS EFQSFDBUFE  8FCඪ४ʹ͓͚ΔઌಡΈͷख๏ • 4FSWJDF8PSLFS • 'FUDI1SJPSJUZ"1* • 1SJWBUF1SFGFUDI1SPYZ • 4QFDVMBUJPO3VMFT"1* ಈతʹߦ͏ʹ͸ɺ+4ͱͷ࿈ಈ͕ඞཁʹͳΔɻ ಈ࡞ର৅΍ൃՐλΠϛϯάΛΑΓએݴతʹه ड़͢ΔͨΊɺ৽͍͠"1*͕ఏএ͞Εͨɻ
  9. ˜-:$PSQPSBUJPO  4QFDVMBUJPO3VMFT"1* ༻్એݴతͳϧʔϧΛ΋ͱʹ࣍ͷϖʔδΛઌಡΈ͢Δ <script type="speculationrules"> { "prerender": [ {

    "where": { "and": [ { "href_matches": "/*" }, { "not": { "selector_matches": ".no-prerender" } } ] } } ] } </script> 4QFDVMBUJPO3VMFT"1*͸ɺએݴతͳϧʔϧΛه ड़͠ɺ৚݅ʹ߹கͨ͠ϦϯΫઌʹରͯ͠ɺ QSFSFOEFSQSFGFUDIͷڍಈΛࡉ੍͔͘ޚ͢Δ͜ ͱ͕Ͱ͖Δɻ.1"Λ૝ఆ͓ͯ͠Γɺ41"Ͱͷར ༻͸૝ఆ͍ͯ͠ͳ͍ɻ • XIFSFISFG@NBDIFT • 63-1BUUFSOTZOUBYʹΑͬͯର৅ͷϦϯΫΛࢦఆ • XIFSFTFMFDUPS@NBUDIFT • ΫΤϦηϨΫλͰର৅ͷϦϯΫΛࢦఆ
  10. ˜-:$PSQPSBUJPO  4QFDVMBUJPO3VMFT"1*FBHFSOFTTઃఆ FBHFSOFTT ڍಈ QSFSFOEFSΩϟογϡอ্࣋ݶ JNNFEJBUF ϧʔϧ͕ద༻͞Ε࣍ୈ͙࣮͢ߦ͢Δ  FBHFS

    JNNFEJBUFͱಉ͡ ˞࣌఺Ͱ͸͜ͷڍಈ͕ͩɺকདྷతʹ͸JNNFEJBUFͱFBHFSͷ ؒʹͳΔ༧ఆ  NPEFSBUF ϦϯΫͷ্ʹϛϦඵؒϙΠϯλΛஔ͍ͨ ৔߹ʹ࣮ߦ ˞QPJOUFSEPXO͕ͦΕΑΓૣ͍৔߹͸Πϕϯτ࣌ɺϞόΠϧͷ৔߹ IPWFSͰ࣮ߦ  '*'0 DPOTFSWFSUJWF NPVTFEPXO·ͨ͸UPVDIEPXOͰ࣮ߦ  '*'0 FBHFSOFTTͷઃఆΛ௥Ճ͢Δ͜ͱͰɺઌಡΈͷڍಈΛม͑Δ͜ͱ͕Ͱ͖Δɻ
  11. ˜-:$PSQPSBUJPO  ϖʔδΛ 1SFSFOEFS4BGFʹ͢Δ 1SFSFOEFSͷϦΫΤετͱ௨ৗͷϦΫΤετͰॲཧΛΘ͚ɺ1SFSFOEFS͞Εͯ΋໰୊͕ى͖ͳ͍Α͏ʹ ϖʔδॲཧΛมߋ͢Δඞཁ͕͋Δɻ • 4FD1VSQPTFQSFSFOEFSϔομͷ༗ແ • EPDVNFOUQSFSFOEFSJOH

    • QSFSFOEFSDIBOHFΠϕϯτ // ࣮ࡍʹϖʔδ͕දࣔ͞Εͨͱ͖ʹҰ౓͚࣮ͩߦ͢Δྫ const init = () => { /* Ұ౓ͷॲཧ */ } if (document.prerendering) { document.addEventListener("prerenderingchange", init, { once: true, }); } else { init(); } ಛʹ෼ੳ༻ͷεΫϦϓτͳͲ͸ɺ1SFSFOEFS4BGFʹ࣮૷Λߦ͓͔ͬͯͳ͍ͱ਺஋͕͓͔͘͠ͳΔɻ ("Ͱ͸͢ͰʹରԠ͕ͳ͞Ε͍ͯΔ ϦΫΤετΛݟ෼͚Δʹ͸ɺҎԼͷΑ͏ͳํ ๏͕͋Δɻ
  12. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ <script type="speculationrules"> { "prerender": [ { "where":

    { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> ભҠݩͷ࣮૷
  13. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ <script type="speculationrules"> { "prerender": [ { "where":

    { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> ભҠݩͷ࣮૷ 1SFSFOEFSର৅ͷࢦఆ
  14. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ <script type="speculationrules"> { "prerender": [ { "where":

    { "and": [ { "href_matches": "https://news.yahoo.co.jp/pickup/*" }, { "not": { "selector_matches": ".no-prerender" } } ] }, "eagerness": "moderate" } ] } </script> ભҠݩͷ࣮૷ 1SFSFOEFSλΠϛϯάͷࢦఆ NPEFSBUFNTFDIPWFS
  15. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ if (document.prerendering) { document.addEventListener(‘prerenderingchange’, () => {

    // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) }, { once: true }); } else { // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) } ભҠઌͷ࣮૷ ࣾ಺੡ϩΨʔɺ޿ࠂɺλάϚωʔδϟʔͳͲ Λ1SFSFOEFS4BGFԽɻ 1SFSFOEFS࣌͸࣮ߦͤͣɺϢʔβʔ͕࣮ࡍʹ ϖʔδΛදࣔͨ͠ͱ͖ʹɺ࣮ߦ͢Δɻ
  16. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ if (document.prerendering) { document.addEventListener(‘prerenderingchange’, () => {

    // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) }, { once: true }); } else { // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) } ભҠઌͷ࣮૷ ࣾ಺੡ϩΨʔɺ޿ࠂɺλάϚωʔδϟʔͳͲ Λ1SFSFOEFS4BGFԽɻ 1SFSFOEFS࣌͸࣮ߦͤͣɺϢʔβʔ͕࣮ࡍʹ ϖʔδΛදࣔͨ͠ͱ͖ʹɺ࣮ߦ͢Δɻ 1SFSFOEFS࣌
  17. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ if (document.prerendering) { document.addEventListener(‘prerenderingchange’, () => {

    // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) }, { once: true }); } else { // pageview࣌ʹ࣮ߦ͍ͨ͠ॲཧ // (ྫ) logger.hit(‘pageview’) } ભҠઌͷ࣮૷ ࣾ಺੡ϩΨʔɺ޿ࠂɺλάϚωʔδϟʔͳͲ Λ1SFSFOEFS4BGFԽɻ 1SFSFOEFS࣌͸࣮ߦͤͣɺϢʔβʔ͕࣮ࡍʹ ϖʔδΛදࣔͨ͠ͱ͖ʹɺ࣮ߦ͢Δɻ ࣮ࡍʹϖʔδΛදࣔͨ͠ͱ͖
  18. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣮૷ if (document.prerendering) { // prerender͞Εͨͱ͖ logger.hit('prerender_prerendered'); document.addEventListener('prerenderingchange',

    () => { // prerender͞Εͯɺϖʔδදࣔ͞Εͨͱ͖ logger.hit('prerender_viewed‘); }, { once: true }); } ભҠઌͷ࣮૷ • 1SFSFOEFS͞Εͨ਺ • 1SFSFOEFS͞Εͯͦͷϖʔδ͕දࣔ͞Εͨ਺ ΛͦΕͧΕϩΪϯά͠ɺ෼ੳ༻ͷϝτϦΫεΛ ऩूɻ)JUSBUFΛࢉग़͢Δɻ
  19. ˜-:$PSQPSBUJPO ϖʔδ ಡΈࠐΈ˞ தԝ஋ TFD   ݁ՌαϚϦ 17ɾ଺ࡏ࣌ؒͳͲͷ Ϣʔβʔߦಈࢦඪ

    ༗ҙࠩͳ͠ ޿ࠂച্ มԽͳ͠ ˞QFSGPSNBODFUJNJOH ʹ͓͚ΔMPBE&WFOU&OE r OBWJHBUJPO4UBSUͷ஋
  20. ˜-:$PSQPSBUJPO *OUFSOBM6TF0OMZ 1SFSFOEFSಋೖʹΑͬͯʮϏδωεࢦඪ 17΍଺ࡏ࣌ؒ ʯʮσΟεϓϨΠ ޿ࠂച্ʯͷ޲্Λ໨ࢦ͕ͨ͠ɺશମ͔ΒΈͨ਺஋ʹ͓͍ͯ͸༏Ґͳ܏޲ ͸ಘΒΕͳ͔ͬͨɻ  Ϗδωεࢦඪ͸ ޲্͠ͳ͔ͬͨ

     ݁Ռͷߟ࡯  ແବϦΫΤετʹ ىҼ͢ΔѱӨڹ͕͋ͬͨ ໿ͷઌಡΈϦΫΤετ͕ແବʹͳΓɺωοτϫʔΫଳҬΛ઎༗͠ɺ αʔόʔϦιʔεΛ૿Ճͤ͞Δ݁Ռͱͳͬͨɻ ͳͥͩΖ͏͔ʁ
  21. ˜-:$PSQPSBUJPO  1SFSFOEFS)JUSBUF͕௿͍ཁҼ ີूͨ͠6* ɾϦϯΫ ɾϦϯΫ ɾϦϯΫ ϦϯΫ σεΫτοϓϢʔβʔ͸ɺભҠઌͷϖʔδΛબ୒͢ΔͷʹϙΠϯλʔΛಈ͔͠ͳ͕Β໎͏͜ͱ͕͋Δ 

    ໎͍Ϛ΢ε ɻখ͘͞ີूͨ͠ϦϯΫͰ͸ɺϦϯΫઌʹෳ਺IPWFS͢Δ֬཰͕ߴ͘ͳΓɺ1SFSFOEFS͕ൃՐ ͠΍͍͢ɻ ϦϯΫ ϦϯΫ ϦϯΫ ີू౓ ௿ ີू౓ ߴ
  22. ˜-:$PSQPSBUJPO  ϢʔβʔͷભҠ֬཰͕ߴ͍͜ͱΛ༧ଌͰ͖Δྫ φϏήʔγϣφϧΫΤϦͰݕࡧ͢Δ ཁૉಛఆ͢ΔϫʔυͰݕࡧ͞ΕΔ৔߹ɺϚον্ͨ͠Ґ ίϯςϯπΛΫϦοΫ͢ΔՄೳੑ͸ඇৗʹߴ͍ɻ FYʮϠϑʔʯʮ(JUIVCʯʮ+4$POG +1ʯ ਓؾίϯςϯπ͕͋Δ Ұ࣌తʹਓؾ͕ߴ·ΔͳͲͯ͠ΫϦοΫ਺ͷ܏͕͔͔ࣼ

    Δ৔߹ FY:BIPP+"1"/τοϓϖʔδͷ࿩୊ͷίϯςϯπ ಋઢ্ʹඞͣԡ͢Ϙλϯ͕͋Δ FY࣍΁ਐΉ͜ͱ͕֬ఆతʹ໌Β͔ͳઆ໌ϖʔδ FYήʔϜͷ։࢝લͰελʔτϘλϯΛԡ͔ͯ͠ΒಡΈࠐΈΛ։࢝͢Δ৔߹ %0/5164)5)&#6550/
  23. ˜-:$PSQPSBUJPO  1SFSFOEFSಋೖ࣌ͷ֬ೝϙΠϯτ  ಋೖલޙͷվળ෯͕े෼ʹ͋Δ͔ o ભҠઌʹύϑΥʔϚϯε՝୊͕͋Δ΄͏͕ɺվળ༨஍͸େ͖͍ o Ϣʔβʔମݧͷ՝୊͕͋Δ͔Ͳ͏͔Λϕʔεʹͯ͠ભҠର৅Λબఆ͢Δͱɺ݁ՌΛಘ΍͍͢ 

    ϢʔβʔͷભҠ֬཰͸ߴ͍͔ʁ o Ϣʔβʔ͕ର৅ʹભҠ͢Δ֬཰͕ߴ͍͔Ͳ͏͔͸ɺίϯςϯπಛੑͱϖʔδͷจ຺Ͱܾ·Δ o աڈͷΫϦοΫ਺΍ϢʔβʔߦಈΛ෼ੳͯ͠ɺભҠ͢Δ͔Ͳ͏͔ͷՄೳੑΛಈతʹ୳ΔΞϓϩʔν΋͋Δ  ໎͍Ϛ΢ε͕ൃੜ͠ͳ͍͔ʁ o Ϣʔβʔ͕໎͏બ୒ࢶΛཏྻ͢Δ6*͸ɺIJUSBUFͷѱԽΛ΋ͨΒ͢  ্هͷબఆʹΑͬͯɺແବͳϦΫΤετͱͷτϨʔυΦϑ͸ຬͨͤΔ͔