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

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

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 *OUFSBDUJPO
   UP
   /FYU
   1BJOU ͕௥Ճ͞Εɺ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 มߋ͕͋Δ৔߹͸ɺ$ISPNF
   4QFFEʹ$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 *OUFSBDUJPO
    UP
    /FYU
    1BJOU ͸ɺϢʔβʔͷೖྗʹ ରͯ͠ΞϓϦ͕ద੾ʹԠ౴Λฦ͢·Ͱͷ࣌ؒΛද͢ࢦ ඪͰ͢ɻ 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 &EHF
    8PSLFSTͷొ৔ʹΑͬͯɺ)551ϔο μͷηϚϯςΟΫε಺ͷಈ࡞͚ͩͰͳ͘ɺ &EHFͰؔ਺Λ࣮ߦͯ͠ɺॊೈͳಈ࡞Λఆٛ ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ Cloud fl are Workers AWS Cloudfront Function Fastly Compute@Edge
25. Edge Workers cacheͷॊೈੑ޲্ $%/্Ͱಈ࡞͢ΔϓϩΩγΛ+BWB4DSJQUͰهड़Ͱ͖ΔΑ͏ʹͳͬͨ͜ͱͰɺΞϓϦέʔγϣϯ ʹ͍ۙهड़Ͱઃܭʹ૊ΈࠐΉ͜ͱ͕Մೳͳͬͨɻ
    7FSDFM͕FEHFGVDOUJPOͷػೳΛ/FYUʹ౷߹ͨ͠Α͏ʹɺΞϓϦέʔγϣϯಛੑͱ࿈ಈͨ͠ $%/࿈ܞ͸ߋʹൃల͍ͯ͘͜͠ͱ͕ݟࠐ·ΕΔɻ σϓϩΠͨ͠ΒɺࣗಈͰ࠷దԽ͞ΕΔΑ͏ ͳ
26. BFCache cacheͷॊೈੑ޲্ ϒϥ΢βͰ໭ΔਐΉΛߦͬͨͱ͖ʹɺಛఆ ͷ৚݅ԼͰΩϟογϡ͔ΒಡΈࠐΉ͜ͱ ͰɺΦϦδϯʹ௨৴͢Δ͜ͱͳ͘ॲཧΛܧ ଓͰ͖Δɻ service worker storage local cache ࣾ಺Ͱௐࠪͨ͠ͱ͜Ζɺ໿͕ϒϥ΢β ͷ໭ΔਐΉͷϦΫΤετɻ αʔϏεಛੑʹ΋ΑΓ·͢ 4BGBSJͱ'JSFGPY͕ઌߦ͍ͯ͠Δ͕ɺࠓޙ$ISPNJVNͰ΋$BDIF$POUSPM
    OPTUPSF
    ͷ৔߹ Ͱ΋ΩϟογϡͰ͖ΔͳͲɺൣғΛ޿͛ΔରԠ͕ਐΜͰ͍Δɻ 
 ϠϑʔͰ΋ରԠΛਐΊ͍ͯΔͷͰɺޙड़ɻ
27. https://web.dev/bfcache/ BFCacheΛ༗ޮʹͨ͠৔߹ͷಈ࡞ σʔλͷऔಘ΋ߦΘͣJS΋్த͔Β࠶࣮ߦ͞ΕΔͨΊɺߴ଎ͳද͕ࣔظ଴Ͱ͖Δɻ
28. Private Prefetch Proxy cacheͷॊೈੑ޲্ ࣍ʹൃల͕ظ଴Ͱ͖Δͷ͸ɺ౤ػతͳઌಡΈͷٕज़ɻϖʔδͷભҠઌΛಡΈࠐΜͰ͓͚͹ɺ࣍ ʹભҠ͢Δͱ͖ʹߴ଎ͳද͕ࣔظ଴Ͱ͖·͢ɻ(VFTTKTͳͲɺಉҰΦϦδϯؒͷٕज़͸ൃల͠ ·͕ͨ͠ɺΫϩεΦϦδϯͷ৔߹͸ηΩϡϦςΟ͕՝୊Ͱͨ͠ɻ ΞΫηεઌϖʔδ html, CSS, JavaScript ୯७ʹΫϩεΦϦδϯͰઌಡΈ͢Δͱ 
 IPͳͲݸਓ৘ใ͕఻Θͬͯ͠·͏
29. Private Prefetch Proxy cacheͷॊೈੑ޲্ 1SJWBUF
    1SFGFUDI
    1SPYZ
    ͸ɺ$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
    MJOL
    SFMlQSFMPBEz ͱ૬ҧ఺
    - 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 MJOL
    NBJODTT
    SFMQSFMPBE
    BTTUZMF https://w3c.github.io/web-performance/meetings/2022/2022-09-TPAC/#h.8u6iseul8x8x
37. Ϧιʔεऔಘ
    ༏ઌ౓ͷ࠷దԽ ϝΠϯεϨου
    ͔Βͷ෼཭ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ
38. ϝΠϯεϨου͔Βͷॲཧͷ෼཭ +BWB4DSJQUΛޮ཰తʹॲཧ͢Δʹ͸ɺදࣔʹඞཁͳॲཧҎ֎ΛϝΠϯεϨουͰ࣮ߦ͠ͳ͍Α ͏ʹ͢Δ͜ͱ͕ඞཁʹͳΓ·͢ɻ͜Ε·Ͱ։ൃऀ͸ɺHSBOVMBS
    DIVOLJOHͳͲͰϑΝΠϧΛޮ ཰తʹ෼ׂͨ͠Γɺ஗ԆಡΈࠐΈ͢Δ͜ͱͰ࠷దԽΛߦ͖ͬͯ·ͨ͠ɻ ϒϩοΩϯά (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ͱ3FBDU
    4FSWFS
    $PNQPOFOUTΛ࢖ͬͯɺΞϓϦέʔγϣϯΛ෦෼ తʹϨϯμϦϯάͯ͠දࣔ͢Δख๏͕औΓೖΕΒΕ ͍ͯ·͢ɻ
    3FBDU
    4FSWFS
    $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ର৅ը૾ΛMJOL
    SFMlQSFMPBEzͰઌಡΈ
47. ಋೖޙͷ݁Ռ 1. Priority Hints ͷಋೖ λΠϧͰ-$1ͷ਺஋ൺֱΛͨ͠ͱ ͜Ζɺ༗ҙࠩͳ͠ͱͷ݁Ռʹɻ ΑΓߴ͍ޮՌ͕Ͱ͖Δ͜ͱΛظ଴ͯ͠ ͍ͨҰํͰɺ݁Ռ͔Β͸ΑΓ࠷దԽԼ ॲཧͰ3FTPVSDF
    )JOUTͱ΄΅ಉ౳ͷޮ Ռ͕ಘΒΕΔ͜ͱ͕Θ͔Γ·͢ɻ
    ϒϥ΢βͷ࣮૷͕ਐΈ࣍ୈɺશࣾͰ΋ औΓೖΕͯ࠷దԽΛਐΊ͍ͯ͘༧ఆɻ
48. 2. BFCache ͷ༗ޮԽ લͷεϥΠυͰ΋͋ͬͨΑ͏ʹɺ#'$BDIF͕ ༗ޮԽͰ͖ͨ৔߹ͷදࣔ଎౓͸͔ͳΓ଎͘ͳ Δ͜ͱ͕ظ଴͞Ε·͢ɻ
    ҰൠతʹʮҰཡϖʔδʯ͔Βʮৄࡉϖʔδʯ ͱ͍͏ಈઢ͕͋ΓɺಡΈऴ͑ͨϢʔβʔ͸Ұ ཡʹ໭Δ͜ͱ͕ߟ͑ΒΕ·͢ɻ
    ϒϥ΢βόοΫͷׂ߹Λܭଌͨ͠ͱ͜Ζɺ໿ ͱߴ͘ɺશࣾͰ΋ద༻͢Δํ޲ੑͰௐ੔ ΛਐΊ͍ͯ·͢ɻ
49. ՝୊: Ωϟογϡ͕༗ޮԽ͞ΕΔ৚͕݅ෳࡶ 2. BFCacheͷ༗ޮԽ XFCͷطଘಈ࡞Λյ͞ͳ͍͜ͱΛकΔͨΊʹɺ#'$BDIFͷൃಈ৚͕݅ඇৗʹෳ ࡶͰ͢ɻ#'$BDIF͕ແޮԽ͞Εͯ͠·͏୅දతͳྫͱͯ͠͸ɺ 1. unloadΠϕϯτϋϯυϥΛ࢖༻͍ͯ͠Δ 2. ಡΈࠐΈ͕׬͍ྃͯ͠ͳ͍iframe͕ଘࡏ͢Δ ͜ΕΒ͕ɺͭͰ΋αϒϑϨʔϜͰݟ͔ͭΔͱ༗ޮԽ͞Εͳ͍ʜɻ
50. ଞʹ΋ͨ͘͞Μ৚͕݅͋Γ·͢ɻ$ISPNFͷEFW
    UPPM͔Βͳͥແޮʹͳͬͨ ͔ͷཧ༝Λ͋Δఔ౓೺Ѳ͢Δ͜ͱ΋Ͱ͖·͕͢ɺݪҼΛݟ͚ͭΔͷ͸େมɻ
51. ՝୊: ࣮ࡍͷϓϩμΫτͰ͸unload͕ଟ͘ར༻͞Ε͍ͯΔ 2. BFCacheͷ༗ޮԽ ಛʹVOMPBEΠϕϯτϋϯυϥ͸ɺ8FCͷྺ࢙తʹϖʔδ཭୤࣌ͷΠϕϯτิ଍Ͱ࢖ΘΕ ͖ͯͨܦҢ͕͋Γ·͢ɻϠϑʔͰߦͬͨ݁Ռɺ ϩάͱͯ͠VOMPBEΠϕϯτΛɺϖʔδ཭୤࣌ͷΠϕϯτऔಘͷͨΊʹ࢖༻͠ ͍ͯͨ
    SEύʔςΟϕϯμʔͰଟذʹΘͨͬͯ࢖༻͞Ε͍ͯͨ ,1*ʹେ͖ؔ͘ΘΔͨΊɺ਺஋ӨڹΛߟྀͯ͠৻ॏʹमਖ਼ΛਐΊ͍ͯΔ ޿ࠂϦλʔήςΟϯάλάɺ෼ੳ༻λάͳͲʜϕϯμʔΛચ͍ग़ͯ͠ॱ࣍ௐ੔த ҰาͮͭਐΊ͍ͯ·͢ɻ
52. ·ͱΊ
53. ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ Ϧιʔεऔಘ
    ༏ઌ౓ͷ࠷దԽ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ ϝΠϯεϨου
    ͔Βͷ෼཭ 8FCͷ༷ʑͳٕज़ํ໘Ͱɺʮշదͳૢ࡞ੑʯΛ࣮ݱ͢Δ΂͘ϘτϧωοΫʹରॲ͍ͯ͠Δɻ 
 ࢲୡ͕Ͱ͖Δ͜ͱ͸͜ͷํ޲ੑʹదͨ͠ΞʔΩςΫνϟ΍ɺσʔλઃܭΛ࠾༻͍ͯ͘͜͠ͱ͕ॏཁɻ
    
54. ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ ΩϟογϡϑΝʔετͳσʔλઃܭ 
 ϢʔβʔσʔλΛ஗ԆಡΈࠐΈ͢Δ͜ͱͰ੩తͳߏ੒ΛͱΔͳͲ
    ભҠઌͷઌಡΈ 
 QSJWBUF
    QSFGFUDI
    QSPYZ
    HVFTTKTʜͳͲ
     ϒϥ΢βͷϥΠϑαΠΫϧ ໭ΔਐΉ Λҙࣝ͠ ͨઃܭ
     $%/Τοδͷ4FSWJDF8PSLFSΛલఏͱͨ͠Ξϓ Ϧέʔγϣϯઃܭ
55. Ϧιʔεऔಘ
    ༏ઌ౓ͷ࠷దԽ ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ  Ϣʔβʔʹඞཁͳσʔλͷ໌֬Խ
    ར༻ස౓΂ͭͷϑΝΠϧ෼ׂ 
 (MBOVMBS
    $IVOLJOHʜͳͲ
56. ϝΠϯεϨου
    ͔Βͷ෼཭ ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ  ϝΠϯཁૉͰ͸ͳ͍ॲཧɺαʔυύʔςΟεΫϦ ϓτͷ࣮ߦεϨουλΠϛϯάͷ࠶ߟ
     ෦෼తʹαʔόʔαΠυͰܭࢉ͢Δઃܭ 
 3FBDU
    4VTQFOTF
    
    4FSWFS
    $PNQPOFOUTͳͲ
     ཁૉ͝ͱʹಡΈࠐΉઃܭ 
 3FMBZ
    (SBQI2-ʹΑΔΫΤϦίϩέʔγϣϯ
    ͳͲ
    
57. ҰาҰาɺշదͳPWAͷ࣮ݱʹΉ͚ͯ 
 าΜͰ͍͖·͠ΐ͏ɻ PWA