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

Webパフォーマンス高速化とこれからのアーキテクチャ

narirou
December 02, 2022

 Webパフォーマンス高速化とこれからのアーキテクチャ

CoreWebVitalsにINP(Interaction to Next Paint)が追加され、Webパフォーマンスに関するする技術は年々進化を遂げています。
このセッションでは、INPへの対策の他、BFCache、Private Prefetch Proxy、Priority Hintsなど、現在WebAPIとしてで検討されているパフォーマンスに関する内容をご紹介します。
また、これらを活かすことができるFEアーキテクチャとはどのような設計になるでしょうか?現在ヤフーで取り組んでいる内容も含め、今後のWebパフォーマンス改善の展望をお話できればと思います。

narirou

December 02, 2022
Tweet

More Decks by narirou

Other Decks in Technology

Transcript

  1. ඿ా ਅ੒ Yahoo! JAPAN / GYAO! PWA Night 2022/12/02 WEBύϑΥʔϚϯεߴ଎Խͱ

    ͜Ε͔ΒͷΞʔΩςΫνϟ
  2. ө૾ࣄۀྖҬͰςοΫϦʔυΛ຿Ίͳ͕ΒɺશࣾԣஅͰ ύϑΥʔϚϯεվળʹ͍ͭͯ΋औΓ૊ΜͰ͍·͢ɻ GraphQL΍Webٕज़ͷ࿩͕େ޷͖Ͱ͢ɻWEB+DB PRESS ͷ࿈ࡌهࣄͱͯ͠StorybookɺHeadlessCMSͷه ࣄΛࣥචɻ ඿ాਅ੒ @narirow Yahoo! JAPAN

    CTOࣨ ୈ11/12୅ WEBϑϩϯτΤϯυࠇଳ
  3. ࠓ೔࿩͢͜ͱ $PSF8FC7JUBMTʹ*/1 *OUFSBDUJPOUP/FYU1BJOU ͕௥Ճ͞Εɺ8FC ύϑΥʔϚϯεʹؔ͢Δ͢Δٕज़͸೥ʑਐԽΛ਱͍͛ͯ·͢ɻ ͜ͷηογϣϯͰ͸ɺݱࡏ8FCͰݕ౼͞Ε͍ͯΔύϑΥʔϚϯεٕज़ Λ঺հͰ͖Ε͹ͱࢥ͍·͢ɻ ·ͨɺ͜ΕΒΛ׆͔͢͜ͱ͕Ͱ͖Δ'&ΞʔΩςΫνϟͱ͸ͲͷΑ͏ͳ ઃܭʹͳΔͰ͠ΐ͏͔ʁݱࡏϠϑʔͰऔΓ૊ΜͰ͍Δ಺༰΋ؚΊɺࠓޙ ͷ8FCύϑΥʔϚϯεվળͷల๬Λ͓࿩Ͱ͖Ε͹ͱࢥ͍·͢ɻ

  4. Agenda 1. Core Web Vitals ͷਐԽ 2. ߟྀ͓ͯ͘͠΂͖WebύϑΥʔϚϯεٕज़ 3. Yahoo!

    JAPANͰ࣮ફ͍ͯ͠ΔऔΓ૊Έ
  5. 1. Core Web Vitals ͷਐԽ

  6. CoreWebVitals ͷ͓͞Β͍ $PSF8FC7JUBMT͸ɺ8FCύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷϝτϦΫεɻύϑΥʔϚ ϯεͷෳࡶͳ਺஋Λɺ୭Ͱ΋؆ܿʹཧղ͠ɺࢦඪʹͰ͖ΔΑ͏ʹࡦఆ͞Ε·ͨ͠ɻ ॳظը໘ͷ͏ͪɺ࠷େͷྖҬΛ઎ ΊΔίϯςϯπ͕දࣔ͞ΕΔ·Ͱ ͷ࣌ؒ LCP 2.5ඵ 4ඵ

    ॳճͷϢʔβʔૢ࡞/ೖྗ͕Մೳ ʹͳΔ·Ͱͷ࣌ؒ FID 100ϛϦඵ 300ϛϦඵ ࢹ֮తͳ҆ఆੑΛܭଌ͢ΔͨΊͷ ϨΠΞ΢τγϑτ਺ (͍ΘΏΔΨλπΩ) CLS 0.1 0.25
  7. ܭଌ࣌ͷը໘

  8. Chrome 60 FCP௥Ճ ࣮ࡍϢʔβʔͷχʔζ΍ٕज़ਐԽʹ߹ΘͤͯɺԿΛ$PSFϝτϦΫεͱ͢Δ͔ ΍ɺৄࡉͳऔಘํ๏͕มԽௐ੔͞Ε·͢ɻ 77 CLS௥Ճ 75 FID௥Ճ ??

    CoreWebVitals ͸ɺมԽΛલఏͱͨ͠஋Ͱ͋Δ
  9. '$1$IBOHFMPH มߋ͕͋Δ৔߹͸ɺ$ISPNF4QFFEʹ$IBOHF-PH͕ܝग़͞Ε·͢ɻ͜Ε͸'$1ͷมߋཤྺͰ͢ɻ CoreWebVitals ͷมߋཤྺ ग़య: https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/fcp.md

  10. Smoothness ׈Β͔͞ ը໘ͷϑϨʔϜϨʔτʹ߹Θͤͯɺ ΞϓϦέʔγϣϯ͕εϜʔζʹԠ౴ ͍ͯ͠Δ͔Ͳ͏͔Λܭଌɻ ೥ͷ$ISPNF%FW4VNNJUͰʮ׈Β͔͞ʯͱʮԠ౴ੑʯͷ̎ͭΛ࣍ͷϝτϦΫεʹ൓ө͢ Δ༧ఆͰ͋Δͱͷ͜ͱ͕ޠΒΕ·ͨ͠ɻ Ϣʔβʔͷೖྗʹରͯ͠ɺΞϓϦ έʔγϣϯ͕஗Ԇͳ͘Ԡ౴͢Δ͔Λ ܭଌɻ

    Responsiveness Ԡ౴ੑ ׈Β͔͞ͱԠ౴ੑ ग़య: https://web.dev/better-responsiveness-metric/
  11. Interaction to Next Paint (INP) ͷ௥Ճ ͦͷʮԠ౴ੑʯͷ౴͑ͱͯ͠ɺ೥ʹ$PSF8FC7JUBMTʹ৽ͨͳϝτϦΫεͰ͋ ΔINP(Interaction to Next

    Paint) ͕௥Ճ͞Εͨ͜ͱʹͳΓ·͢ɻ Chrome 60 FCP௥Ճ 77 CLS௥Ճ 75 FID௥Ճ INP௥Ճ!
  12. */1 *OUFSBDUJPOUP/FYU1BJOU ͸ɺϢʔβʔͷೖྗʹ ରͯ͠ΞϓϦ͕ద੾ʹԠ౴Λฦ͢·Ͱͷ࣌ؒΛද͢ࢦ ඪͰ͢ɻ Interaction to Next Paint (INP)

    ͱ͸ ͨͱ͑͹ • Ωʔೖྗͯ͠จࣈ͕൓ө͞ΕΔ·Ͱͷ࣌ؒ • ϘλϯΛλοϓͯ͠Ϟʔμϧ͕։͘·Ͱͷ࣌ؒ
  13. ग़య: https://web.dev/inp/ Interaction to Next Paint (INP) ͱ͸ දࣔ ೖྗ

    ponterup mouseup click Ϩεϙϯε࣌ؒ ϨϯμϦϯά render paint composit input delay Ϣʔβʔͷೖྗ͔Βɺ࠷ऴग़ྗ·Ͱ͸༷ʑͳॲཧ͕ೖΔɻ͜ͷॲཧΛ્֐͢ΔΑ͏ͳ Πϕϯτϋϯυϥ͕͋ͬͨ৔߹ɺ࠷ऴදࣔ·Ͱͷ͕࣌ؒ஗Ԇ͢Δ͜ͱʹͳΓ·͢ɻ
  14. ೖྗ஗ԆΛՄࢹԽ͢ΔྫΛݟͯΈΔͱ Θ͔Γ΍͍͢Ͱ͢ɻΫϦοΫॲཧΛҙ ਤతʹॏͨ͘͠৔߹ɺ࿈ଓ͢Δͱಈ࡞ ͕ॏ͘ͳͬͯ੺͍දࣔʹͳΔͷ͕Θ͔ Γ·͢ɻ ೥ݱࡏͷ*/1ͷج४஋Ͱ͸ɺܭଌ ͞ΕͨλΠϧͷείΞͰɺNT ҎԼͷ஋Λྑ޷ͱ͞Ε͍ͯ·͢ɻ Interaction to

    Next Paint (INP) ͱ͸ https://inp-demo.glitch.me/
  15. 0ʙ16ms ΞχϝʔγϣϯΛεϜʔζʹಈ࡞͍ͯ͠Δͱײ͡Δɻ 0ʙ100ms ૉૣ͘Ԡ౴ͨ͠ͱײ͡Δɻ͜ΕҎ্ͷ͕͔͔࣌ؒΔͱɺԠ౴ʹ͕͔͔࣌ؒͬͨͱೝࣝ͢Δɻ 100ʙ1000ms ͕͔͔࣌ؒͬͨ͜ͱ͕ೝࣝͰ͖Δ΋ͷͷɺܧଓతͳॲཧͷҰ෦ͱͯ͠ײ͡Δɻ 1000msҎ্ 1ඵΛ௒͑Δͱɺఀ଺Λײ͡ɺܧଓͨ͠ॲཧͱͯ͠ײ͡ΒΕͳ͘ͳΔɻ 10000msҎ্ 10ඵΛ௒͑ΔͱɺϢʔβʔ͸ෆຬΛײͯ͡཭୤͢ΔՄೳੑ͕ߴ͘ͳΔɻ

    INP͸FIDΑΓ΋Ϣʔβʔͷײ֮ʹ͍ۙ஋ */1͸ɺ'*%ΑΓ΋Ϣʔβʔ͕஗͍ͱ௚઀ײ͡ΔϙΠϯτ͕ࢦඪͱͳ͍ͬͯ·͢ɻ·ͨɺॳظදࣔ ͚ͩΛܭଌ͢ΔͷͰ͸ͳ͘ɺΞϓϦέʔγϣϯ͕ଘࡏ͢Δؒͣͬͱܭଌ͞Εଓ͚Δ͜ͱʹͳΓ· ͢ɻ ࢀߟ: RAILϞσϧ
  16. ը໘ͷॳظදࣔ·Ͱ͕଎͍ շదͳૢ࡞ੑ ׈Β͔͞Ԡ౴ੑͷߟ͑ํ͔Βɺ͜Ε͔ΒͷύϑΥʔϚϯεࢦඪ͸ΑΓ69ʹॏ͖Λ͓ ͘͜ͱ͕ࣔ͞Ε͍ͯ·͢ɻىಈ͚࣌ͩͰͳ͘ɺʮΞϓϦέʔγϣϯશମͷಈ࡞͕շద Ͱ͋Δ͜ͱʯ͕ٻΊΒΕΒΕ·͢ɻ ͜Ε͔ΒͷύϑΥʔϚϯεࢦඪͰॏࢹ͞ΕΔ͜ͱ

  17. ͜Ε͔ΒͷύϑΥʔϚϯεࢦඪͰߟ͍͑ͯ͘͜ͱ PWA ׈Β͔͞Ԡ౴ੑͷߟ͑ํ͔Βɺ͜Ε͔ΒͷύϑΥʔϚϯεࢦඪ͸ΑΓ69ʹॏ͖Λ͓ ͘͜ͱ͕ࣔ͞Ε͍ͯ·͢ɻىಈ͚࣌ͩͰͳ͘ɺʮΞϓϦέʔγϣϯશମͷಈ࡞͕շద Ͱ͋Δ͜ͱʯ͕ٻΊΒΕΒΕ·͢ɻ

  18. 2. ߟྀ͓ͯ͘͠΂͖ύϑΥʔϚϯεٕज़

  19. Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ ϝΠϯεϨου ͔Βͷ෼཭ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ

  20. Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ ϝΠϯεϨου ͔Βͷ෼཭

  21. Ϣʔβʔʹ͍ۙҐஔͰͷΩϟογϡ CDN App service worker storage local cache ϒϥ΢β CDNΤοδ

    ΞϓϦέʔγϣϯ cache db memory DB
  22. Ϣʔβʔʹ͍ۙҐஔͰͷΩϟογϡ CDN App service worker storage local cache ϒϥ΢β CDNΤοδ

    ΞϓϦέʔγϣϯ cache db memory DB
  23. Ϣʔβʔʹ͍ۙҐஔͰͷΩϟογϡ CDN App service worker storage local cache cache db

    memory DB ͳΔ΂͘Ϣʔβʔʹ͍ۙҐஔͰΩϟογϡͯ͠ߴ଎ʹฦ٫͢Δ͜ͱͰɺύϑΥʔϚϯεΛ޲্ɻ
  24. Edge Workers cacheͷॊೈੑ޲্ ෺ཧతʹϢʔβʔʹ͍ۙɺ$%/&EHFͰ σʔλΛฦ͢͜ͱ͕Ͱ͖Ε͹ɺΞϓϦέʔ γϣϯʹ౸ୡ͢ΔલʹϨεϙϯεͰ͖ߴ଎ Խ͕ظ଴Ͱ͖Δɻ CDN &EHF8PSLFSTͷొ৔ʹΑͬͯɺ)551ϔο μͷηϚϯςΟΫε಺ͷಈ࡞͚ͩͰͳ͘ɺ

    &EHFͰؔ਺Λ࣮ߦͯ͠ɺॊೈͳಈ࡞Λఆٛ ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ Cloud fl are Workers AWS Cloudfront Function Fastly [email protected]
  25. Edge Workers cacheͷॊೈੑ޲্ $%/্Ͱಈ࡞͢ΔϓϩΩγΛ+BWB4DSJQUͰهड़Ͱ͖ΔΑ͏ʹͳͬͨ͜ͱͰɺΞϓϦέʔγϣϯ ʹ͍ۙهड़Ͱઃܭʹ૊ΈࠐΉ͜ͱ͕Մೳͳͬͨɻ 7FSDFM͕FEHFGVDOUJPOͷػೳΛ/FYUʹ౷߹ͨ͠Α͏ʹɺΞϓϦέʔγϣϯಛੑͱ࿈ಈͨ͠ $%/࿈ܞ͸ߋʹൃల͍ͯ͘͜͠ͱ͕ݟࠐ·ΕΔɻ σϓϩΠͨ͠ΒɺࣗಈͰ࠷దԽ͞ΕΔΑ͏ ͳ

  26. BFCache cacheͷॊೈੑ޲্ ϒϥ΢βͰ໭ΔਐΉΛߦͬͨͱ͖ʹɺಛఆ ͷ৚݅ԼͰΩϟογϡ͔ΒಡΈࠐΉ͜ͱ ͰɺΦϦδϯʹ௨৴͢Δ͜ͱͳ͘ॲཧΛܧ ଓͰ͖Δɻ service worker storage local

    cache ࣾ಺Ͱௐࠪͨ͠ͱ͜Ζɺ໿͕ϒϥ΢β ͷ໭ΔਐΉͷϦΫΤετɻ αʔϏεಛੑʹ΋ΑΓ·͢ 4BGBSJͱ'JSFGPY͕ઌߦ͍ͯ͠Δ͕ɺࠓޙ$ISPNJVNͰ΋$BDIF$POUSPMOPTUPSFͷ৔߹ Ͱ΋ΩϟογϡͰ͖ΔͳͲɺൣғΛ޿͛ΔରԠ͕ਐΜͰ͍Δɻ 
 ϠϑʔͰ΋ରԠΛਐΊ͍ͯΔͷͰɺޙड़ɻ
  27. https://web.dev/bfcache/ BFCacheΛ༗ޮʹͨ͠৔߹ͷಈ࡞ σʔλͷऔಘ΋ߦΘͣJS΋్த͔Β࠶࣮ߦ͞ΕΔͨΊɺߴ଎ͳද͕ࣔظ଴Ͱ͖Δɻ

  28. Private Prefetch Proxy cacheͷॊೈੑ޲্ ࣍ʹൃల͕ظ଴Ͱ͖Δͷ͸ɺ౤ػతͳઌಡΈͷٕज़ɻϖʔδͷભҠઌΛಡΈࠐΜͰ͓͚͹ɺ࣍ ʹભҠ͢Δͱ͖ʹߴ଎ͳද͕ࣔظ଴Ͱ͖·͢ɻ(VFTTKTͳͲɺಉҰΦϦδϯؒͷٕज़͸ൃల͠ ·͕ͨ͠ɺΫϩεΦϦδϯͷ৔߹͸ηΩϡϦςΟ͕՝୊Ͱͨ͠ɻ ΞΫηεઌϖʔδ html, CSS,

    JavaScript ୯७ʹΫϩεΦϦδϯͰઌಡΈ͢Δͱ 
 IPͳͲݸਓ৘ใ͕఻Θͬͯ͠·͏
  29. Private Prefetch Proxy cacheͷॊೈੑ޲্ 1SJWBUF1SFGFUDI1SPYZ͸ɺ$ISPNF͕ಠࣗʹߦͳ͍ͬͯΔઌಡΈͷ࢓૊ΈͰɺ*1ͳͲΛӅṭ ͨ͠ঢ়ଶͰભҠલͷσʔλΛઌʹಡΈࠐΜͰ͓͖ɺΫϩεΦϦδϯؒͷϖʔδͷભҠΛߴ଎Խ ͠·͢ɻ CONNECT Proxy ΞΫηεઌϖʔδ

    html, CSS, JavaScript ֤ࠃͷαʔόʔ͔Βಗ໊Խͯ͠औಘ Ωϟογϡ͓ͯ͘͠
  30. Private Prefetch Proxy cacheͷॊೈੑ޲্ ηΩϡϦςΟͷ໰୊͕͋ΔͨΊɺ$PPLJF΍ 6TFS"HFOUͳͲͷϢʔβʔ৘ใΛ΄ͱΜͲ࣋ͨͳ͍ ܗͰΞΫηε͞ΕΔɻޮ཰తͳΩϟογϡΛ͢Δʹ ͸ɺͦΕΛલఏͱͨ͠࢓૊Έ͕ඞཁʹͳΓ·͢ɻ purpose: prefetc

    h sec-purpose: prefetch; anonymous-client-i p user-agent: <reduced > accept: <default value > accept-encoding: gzip, deflate, b r accept-language: <user's languages > sec-ch-ua: <latest stable release > sec-ch-ua-mobile: ?<0 or 1 > https://github.com/buettner/private-prefetch-proxy Ωϟογϡ࣌ʹૹ৴͞ΕΔϔομ
  31. Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ ϝΠϯεϨου ͔Βͷ෼཭ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ

  32. Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ ϖʔδΛऔಘͯ͠ϒϥ΢β͕දࣔ͢Δ·Ͱɺ༷ʑ ͳϦιʔε͕ඞཁʹͳΓ·͢ɻ)5.-ɺ$44ɺ +4ɺը૾ʜॳظϖʔδΛදࣔͤ͞Δ·Ͱʹඞཁͳ σʔλΛΑΓߴ଎ʹऔಘ͢ΔͨΊʹ͸ɺͦͷॱং ΋ॏཁʹͳΓ·͢ɻ ॳظը໘ΛϨϯμϦϯά͢Δͷʹඞཁ ༏ઌͯ͠ಡΈࠐΉ ༏ઌ౓ΛԼ͛ͯಡΈࠐΉ ͋ͱ͔ΒಡΈࠐΜͰ࣮ߦՄೳ

  33. Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ ϒϥ΢β͸ɺը໘಺ʹඞཁ͔Ͳ͏͔Λ൑அ͠ɺࣗ ಈతʹऔಘ༏ઌ౓Λมߋ͠·͕͢ɺϢʔβʔ͔Β ݟͨ৔߹ͷ༏ઌ౓Λਖ਼֬ʹ͸ଊ͖͑Ε·ͤΜɻ 
 ྫ͑͹Χϧʔηϧͷ൪໨ͷը૾΍ɺഎܠͱͯ͠ ར༻͞Ε͍ͯΔཁૉͳͲɻ·ͨɺը໘಺ʹೖΔ͜ ͱ͕൑அͰ͖͔ͯΒ༏ઌ౓͕ܾఆ͞ΕΔͨΊʹɺ ༧Ί༧ଌ͢Δ͜ͱ͕ࠔ೉Ͱ͢ɻ औಘ༏ઌ౓Λద੾ʹਪଌ͢Δٕज़ͷࡦఆ͕ਐΜͰ

    ͍·͢ɻ
  34. Priority Hints Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ ཁૉͷGFUDIQSJPSJUZଐੑɺ+4ͷGFUDIͷ PQUJPOΛ࢖༻ͯ͠ɺϦιʔεͷऔಘ༏ઌ౓Λࣔ͢ ͜ͱͰɺϒϥ΢βʹਖ਼֬ʹϦιʔεͷऔಘॱংΛ ఻͑ɺಡΈࠐΈॱΛ࠷దԽ͢Δ͜ͱ͕Ͱ͖Δɻ 3FTPVDF)JOUT MJOLSFMlQSFMPBEz ͱ૬ҧ఺

    - HTMLଐੑ஋΍fetchʹΦϓγϣϯΛઃఆͰ͖ɺσʔλऔಘʹ ରͯ͠΋ར༻Ͱ͖Δɻ - ϒϥ΢βͷࣗಈ࠷దԽΛ଴ͭલʹɺΑΓ࠷దͳ༏ઌ౓Λ఻͑ Δ͜ͱ͕Ͱ͖Δɻ Χϧʔηϧͷը૾ʹࢦఆ͢Δྫ
  35. 103 Early Hints Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ αʔόʔ͕࣮ࡍͷϨεϙϯεΛฦ͢લʹɺͦͷதͰ࢖༻͞ΕΔϦιʔεͷઌಡΈ৘ใΛฦ٫͢ ΔͨΊͷϦΫΤετΛฦ͢8FCඪ४࢓༷Ͱ͢ɻϒϥ΢β͕࠷దԽΛ࢝ΊΔͷ͸ɺ͋͘·Ͱυ ΩϡϝϯτΛड͚औͬͨஈ֊ɻͦΕ͔ΒͰͳ͍ͱɺͲͷΑ͏ͳϦιʔεΛ࢖༻͢Δ͔͸Θ͔Γ ·ͤΜɻ Server GET

    / index.html 200 OK
  36. 103 Early Hints Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ &BSMZ)JOUT͸ɺαʔόʔ͕࣮ࡍͷϨεϙϯεΛฦ͢લʹɺͦͷதͰ࢖༻͞ΕΔϦιʔεͷઌಡ Έ৘ใΛฦ٫͢ΔͨΊͷϦΫΤετΛฦ͢8FCඪ४࢓༷Ͱ͢ɻଟ͘ͷ$%/͕αϙʔτΛ։࢝ɺ 8$Ͱ͸4VQFS&BSMZ)JOUTͷٞ࿦͕͞Ε͍ͯΔɻ Server GET /

    index.html 103 Early Hints 200 OK MJOLNBJODTTSFMQSFMPBEBTTUZMF https://w3c.github.io/web-performance/meetings/2022/2022-09-TPAC/#h.8u6iseul8x8x
  37. Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ ϝΠϯεϨου ͔Βͷ෼཭ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ

  38. ϝΠϯεϨου͔Βͷॲཧͷ෼཭ +BWB4DSJQUΛޮ཰తʹॲཧ͢Δʹ͸ɺදࣔʹඞཁͳॲཧҎ֎ΛϝΠϯεϨουͰ࣮ߦ͠ͳ͍Α ͏ʹ͢Δ͜ͱ͕ඞཁʹͳΓ·͢ɻ͜Ε·Ͱ։ൃऀ͸ɺHSBOVMBSDIVOLJOHͳͲͰϑΝΠϧΛޮ ཰తʹ෼ׂͨ͠Γɺ஗ԆಡΈࠐΈ͢Δ͜ͱͰ࠷దԽΛߦ͖ͬͯ·ͨ͠ɻ ϒϩοΩϯά (Long Task)

  39. ϝΠϯεϨου͔Βͷॲཧͷ෼཭ SEύʔςΟεΫϦϓτ͸ɺ8FCͷେ൒ͷϦιʔεΛઐ༗͍ͯ͠Δͱͷௐ্͕͕͖͍ࠪͬͯͯ ·͢ɻUIJSEQBSUZXFC͸ͦͷׂ߹Λ$ISPNFͷ#JHσʔλ͔ΒՄࢹԽ͢ΔऔΓ૊ΈɻͦΕʹґ Δͱʜ z্Ґ໿ສͷαΠτશମͰɺ໿ ͷΦϦδϯ͕͢΂ͯͷεΫϦϓτ࣮ߦ࣌ؒͷ໿ Λ઎Ί͓ͯΓɺ্ҐͷΤϯςΟςΟ͕طʹ໿Λ઎Ί͍ͯ·͢ɻz https://github.com/patrickhulce/third-party-web

  40. ServiceWorkerʹΑΔαʔυύςΟεΫϦϓτͷ࣮ߦ ϝΠϯεϨου͔Βͷ෼཭ 1BSUZUPXO͸ɺSEύʔςΟεΫϦϓτΛ4FSWJDF8PSLFS಺Ͱ࣮ߦͤ͞Δ͜ͱͰɺϝΠϯε Ϩου͔Βഇ͢Δ͜ͱΛ໨తͱͯ͠࡞੒͞ΕͨϥΠϒϥϦɻOFYUTDSJQUʹࢼݧతʹऔΓೖΕΒ Ε͍ͯΔ͜ͱ΍ɺ4BGBSJ͕4FSWJDF8PSLFSʹରԠͨ͜͠ͱ͔Β΋ࠓޙͷൃలΛظ଴ɻ https://github.com/BuilderIO/partytown

  41. React18: ετϦʔϛϯάαʔόʔϨϯμϦϯά ϝΠϯεϨου͔Βͷ෼཭ 3FBDU͔Βɺ4VTQFOTFͱ3FBDU4FSWFS $PNQPOFOUTΛ࢖ͬͯɺΞϓϦέʔγϣϯΛ෦෼ తʹϨϯμϦϯάͯ͠දࣔ͢Δख๏͕औΓೖΕΒΕ ͍ͯ·͢ɻ 3FBDU4FSWFS$PNQPOFOUT͸ɺ3FBDUίϯϙʔω ϯτΛ෦෼తʹ443 αʔόʔαΠυͰग़ྗ

    ͯ͠Ξ ϓϦέʔγϣϯʹ൓ө͠·͢ɻΫϥΠΞϯτͰඞཁ ͩͬͨ+4ॲཧ͸ɺαʔόʔαΠυʹӅṭ͢Δ͜ͱ ͕Ͱ͖·͢ɻ
  42. React18: ετϦʔϛϯάαʔόʔϨϯμϦϯά ϝΠϯεϨου͔Βͷ෼཭ ίϯϙʔωϯτ͝ͱʹஈ֊తʹಡΈࠐ·Ε͍ͯ͘࢓ ૊Έ͸ɺίϯϙʔωϯτ୯ҐͰσʔλͷऔಘͱϨϯ μϦϯάΛӅṭ͢Δ͜ͱʹͳΓ·͢ɻ ࠓޙͷ։ൃͰ͸ɺίϯϙʔωϯτͷதʹ௨৴ॲཧ͕ ૊Έࠐ·Ε͍ͯ͘ɺΫΤϦίϩέʔγϣϯͷߟ͑ํ ͕ΑΓ޿͕͍ͬͯ͘͜ͱ͕ߟ͑ΒΕ·͢ɻ

  43. 3. Yahoo! JAPAN Ͱ࣮ફ͍ͯ͠ΔऔΓ૊Έ

  44. Yahoo! JAPAN Ͱ͸શࣾWEBύϑΥʔϚϯεվળΛ࣮ࢪத

  45. ࣮ࡍʹϓϩμΫτʹऔΓೖΕͯਐΊ͍ͯΔվળ 1. Priority Hints Λಋೖ 2. BFCache ͷ༗ޮԽ

  46. 1. Priority Hints ͷಋೖ ॳظϖʔδʹδϟϯϘτϩϯ ϝΠϯը૾ Λ༗͍ͯ͠Δ͍͘ ͔ͭͷαʔϏεͰɺ1SJPSJUZ)JOUTΛಋೖ͠ɺ"#ςετͰͦ ͷαʔϏεͷ-$1͕վળ͢Δ͔Λूܭ͠·ͨ͠ɻ "ύλʔϯ

    -$1ର৅ը૾ʹJNQPSUBODFIJHIΛ෇༩ $5ύλʔϯ -$1ର৅ը૾ΛMJOLSFMlQSFMPBEzͰઌಡΈ
  47. ಋೖޙͷ݁Ռ 1. Priority Hints ͷಋೖ λΠϧͰ-$1ͷ਺஋ൺֱΛͨ͠ͱ ͜Ζɺ༗ҙࠩͳ͠ͱͷ݁Ռʹɻ ΑΓߴ͍ޮՌ͕Ͱ͖Δ͜ͱΛظ଴ͯ͠ ͍ͨҰํͰɺ݁Ռ͔Β͸ΑΓ࠷దԽԼ ॲཧͰ3FTPVSDF)JOUTͱ΄΅ಉ౳ͷޮ

    Ռ͕ಘΒΕΔ͜ͱ͕Θ͔Γ·͢ɻ ϒϥ΢βͷ࣮૷͕ਐΈ࣍ୈɺશࣾͰ΋ औΓೖΕͯ࠷దԽΛਐΊ͍ͯ͘༧ఆɻ
  48. 2. BFCache ͷ༗ޮԽ લͷεϥΠυͰ΋͋ͬͨΑ͏ʹɺ#'$BDIF͕ ༗ޮԽͰ͖ͨ৔߹ͷදࣔ଎౓͸͔ͳΓ଎͘ͳ Δ͜ͱ͕ظ଴͞Ε·͢ɻ ҰൠతʹʮҰཡϖʔδʯ͔Βʮৄࡉϖʔδʯ ͱ͍͏ಈઢ͕͋ΓɺಡΈऴ͑ͨϢʔβʔ͸Ұ ཡʹ໭Δ͜ͱ͕ߟ͑ΒΕ·͢ɻ ϒϥ΢βόοΫͷׂ߹Λܭଌͨ͠ͱ͜Ζɺ໿

    ͱߴ͘ɺશࣾͰ΋ద༻͢Δํ޲ੑͰௐ੔ ΛਐΊ͍ͯ·͢ɻ
  49. ՝୊: Ωϟογϡ͕༗ޮԽ͞ΕΔ৚͕݅ෳࡶ 2. BFCacheͷ༗ޮԽ XFCͷطଘಈ࡞Λյ͞ͳ͍͜ͱΛकΔͨΊʹɺ#'$BDIFͷൃಈ৚͕݅ඇৗʹෳ ࡶͰ͢ɻ#'$BDIF͕ແޮԽ͞Εͯ͠·͏୅දతͳྫͱͯ͠͸ɺ 1. unloadΠϕϯτϋϯυϥΛ࢖༻͍ͯ͠Δ 2. ಡΈࠐΈ͕׬͍ྃͯ͠ͳ͍iframe͕ଘࡏ͢Δ

    ͜ΕΒ͕ɺͭͰ΋αϒϑϨʔϜͰݟ͔ͭΔͱ༗ޮԽ͞Εͳ͍ʜɻ
  50. ଞʹ΋ͨ͘͞Μ৚͕݅͋Γ·͢ɻ$ISPNFͷEFWUPPM͔Βͳͥແޮʹͳͬͨ ͔ͷཧ༝Λ͋Δఔ౓೺Ѳ͢Δ͜ͱ΋Ͱ͖·͕͢ɺݪҼΛݟ͚ͭΔͷ͸େมɻ

  51. ՝୊: ࣮ࡍͷϓϩμΫτͰ͸unload͕ଟ͘ར༻͞Ε͍ͯΔ 2. BFCacheͷ༗ޮԽ ಛʹVOMPBEΠϕϯτϋϯυϥ͸ɺ8FCͷྺ࢙తʹϖʔδ཭୤࣌ͷΠϕϯτิ଍Ͱ࢖ΘΕ ͖ͯͨܦҢ͕͋Γ·͢ɻϠϑʔͰߦͬͨ݁Ռɺ ϩάͱͯ͠VOMPBEΠϕϯτΛɺϖʔδ཭୤࣌ͷΠϕϯτऔಘͷͨΊʹ࢖༻͠ ͍ͯͨ SEύʔςΟϕϯμʔͰଟذʹΘͨͬͯ࢖༻͞Ε͍ͯͨ ,1*ʹେ͖ؔ͘ΘΔͨΊɺ਺஋ӨڹΛߟྀͯ͠৻ॏʹमਖ਼ΛਐΊ͍ͯΔ

    ޿ࠂϦλʔήςΟϯάλάɺ෼ੳ༻λάͳͲʜϕϯμʔΛચ͍ग़ͯ͠ॱ࣍ௐ੔த ҰาͮͭਐΊ͍ͯ·͢ɻ
  52. ·ͱΊ

  53. ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ ϝΠϯεϨου ͔Βͷ෼཭ 8FCͷ༷ʑͳٕज़ํ໘Ͱɺʮշదͳૢ࡞ੑʯΛ࣮ݱ͢Δ΂͘ϘτϧωοΫʹରॲ͍ͯ͠Δɻ 
 ࢲୡ͕Ͱ͖Δ͜ͱ͸͜ͷํ޲ੑʹదͨ͠ΞʔΩςΫνϟ΍ɺσʔλઃܭΛ࠾༻͍ͯ͘͜͠ͱ͕ॏཁɻ

  54. ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ ΩϟογϡϑΝʔετͳσʔλઃܭ 
 ϢʔβʔσʔλΛ஗ԆಡΈࠐΈ͢Δ͜ͱͰ੩తͳߏ੒ΛͱΔͳͲ ભҠઌͷઌಡΈ 
 QSJWBUFQSFGFUDIQSPYZ HVFTTKTʜͳͲ

     ϒϥ΢βͷϥΠϑαΠΫϧ ໭ΔਐΉ Λҙࣝ͠ ͨઃܭ  $%/Τοδͷ4FSWJDF8PSLFSΛલఏͱͨ͠Ξϓ Ϧέʔγϣϯઃܭ
  55. Ϧιʔεऔಘ ༏ઌ౓ͷ࠷దԽ ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ  Ϣʔβʔʹඞཁͳσʔλͷ໌֬Խ ར༻ස౓΂ͭͷϑΝΠϧ෼ׂ 
 (MBOVMBS$IVOLJOHʜͳͲ

  56. ϝΠϯεϨου ͔Βͷ෼཭ ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ  ϝΠϯཁૉͰ͸ͳ͍ॲཧɺαʔυύʔςΟεΫϦ ϓτͷ࣮ߦεϨουλΠϛϯάͷ࠶ߟ  ෦෼తʹαʔόʔαΠυͰܭࢉ͢Δઃܭ 
 3FBDU4VTQFOTF

    4FSWFS$PNQPOFOUTͳͲ  ཁૉ͝ͱʹಡΈࠐΉઃܭ 
 3FMBZ(SBQI2-ʹΑΔΫΤϦίϩέʔγϣϯͳͲ
  57. ҰาҰาɺշదͳPWAͷ࣮ݱʹΉ͚ͯ 
 าΜͰ͍͖·͠ΐ͏ɻ PWA