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ύϑΥʔϚϯεߴ଎Խͱ
   ͜Ε͔ΒͷΞʔΩςΫνϟ
   

   View Slide

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

   View Slide

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

   View Slide

4. Agenda
   1. Core Web Vitals ͷਐԽ
   
   
   2. ߟྀ͓ͯ͘͠΂͖WebύϑΥʔϚϯεٕज़
   
   
   3. Yahoo! JAPANͰ࣮ફ͍ͯ͠ΔऔΓ૊Έ
   

   View Slide

5. 1. Core Web Vitals ͷਐԽ
   

   View Slide

6. CoreWebVitals ͷ͓͞Β͍
   $PSF8FC7JUBMT͸ɺ8FCύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷϝτϦΫεɻύϑΥʔϚ
   ϯεͷෳࡶͳ਺஋Λɺ୭Ͱ΋؆ܿʹཧղ͠ɺࢦඪʹͰ͖ΔΑ͏ʹࡦఆ͞Ε·ͨ͠ɻ
   ॳظը໘ͷ͏ͪɺ࠷େͷྖҬΛ઎
   ΊΔίϯςϯπ͕දࣔ͞ΕΔ·Ͱ
   ͷ࣌ؒ
   LCP
   2.5ඵ 4ඵ
   ॳճͷϢʔβʔૢ࡞/ೖྗ͕Մೳ
   ʹͳΔ·Ͱͷ࣌ؒ
   FID
   100ϛϦඵ 300ϛϦඵ
   ࢹ֮తͳ҆ఆੑΛܭଌ͢ΔͨΊͷ
   ϨΠΞ΢τγϑτ਺
   
   
   (͍ΘΏΔΨλπΩ)
   CLS
   0.1 0.25
   

   View Slide

7. ܭଌ࣌ͷը໘
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. Interaction to Next Paint (INP) ͷ௥Ճ
    ͦͷʮԠ౴ੑʯͷ౴͑ͱͯ͠ɺ೥ʹ$PSF8FC7JUBMTʹ৽ͨͳϝτϦΫεͰ͋
    ΔINP(Interaction to Next Paint) ͕௥Ճ͞Εͨ͜ͱʹͳΓ·͢ɻ
    Chrome 60
    
    
    FCP௥Ճ
    77
    
    
    CLS௥Ճ
    75
    
    
    FID௥Ճ
    INP௥Ճ!
    

    View Slide

12. */1 *OUFSBDUJPOUP/FYU1BJOU
    ͸ɺϢʔβʔͷೖྗʹ
    ରͯ͠ΞϓϦ͕ద੾ʹԠ౴Λฦ͢·Ͱͷ࣌ؒΛද͢ࢦ
    ඪͰ͢ɻ
    Interaction to Next Paint (INP) ͱ͸
    ͨͱ͑͹
    • Ωʔೖྗͯ͠จࣈ͕൓ө͞ΕΔ·Ͱͷ࣌ؒ
    
    
    • ϘλϯΛλοϓͯ͠Ϟʔμϧ͕։͘·Ͱͷ࣌ؒ
    

    View Slide

13. ग़య: https://web.dev/inp/
    Interaction to Next Paint (INP) ͱ͸
    දࣔ
    ೖྗ
    ponterup mouseup click
    Ϩεϙϯε࣌ؒ ϨϯμϦϯά
    render paint
    composit
    input delay
    Ϣʔβʔͷೖྗ͔Βɺ࠷ऴग़ྗ·Ͱ͸༷ʑͳॲཧ͕ೖΔɻ͜ͷॲཧΛ્֐͢ΔΑ͏ͳ
    Πϕϯτϋϯυϥ͕͋ͬͨ৔߹ɺ࠷ऴදࣔ·Ͱͷ͕࣌ؒ஗Ԇ͢Δ͜ͱʹͳΓ·͢ɻ
    

    View Slide

14. ೖྗ஗ԆΛՄࢹԽ͢ΔྫΛݟͯΈΔͱ
    Θ͔Γ΍͍͢Ͱ͢ɻΫϦοΫॲཧΛҙ
    ਤతʹॏͨ͘͠৔߹ɺ࿈ଓ͢Δͱಈ࡞
    ͕ॏ͘ͳͬͯ੺͍දࣔʹͳΔͷ͕Θ͔
    Γ·͢ɻ
    ೥ݱࡏͷ*/1ͷج४஋Ͱ͸ɺܭଌ
    ͞ΕͨλΠϧͷείΞͰɺNT
    ҎԼͷ஋Λྑ޷ͱ͞Ε͍ͯ·͢ɻ
    Interaction to Next Paint (INP) ͱ͸
    https://inp-demo.glitch.me/
    

    View Slide

15. 0ʙ16ms ΞχϝʔγϣϯΛεϜʔζʹಈ࡞͍ͯ͠Δͱײ͡Δɻ
    0ʙ100ms ૉૣ͘Ԡ౴ͨ͠ͱײ͡Δɻ͜ΕҎ্ͷ͕͔͔࣌ؒΔͱɺԠ౴ʹ͕͔͔࣌ؒͬͨͱೝࣝ͢Δɻ
    100ʙ1000ms ͕͔͔࣌ؒͬͨ͜ͱ͕ೝࣝͰ͖Δ΋ͷͷɺܧଓతͳॲཧͷҰ෦ͱͯ͠ײ͡Δɻ
    1000msҎ্ 1ඵΛ௒͑Δͱɺఀ଺Λײ͡ɺܧଓͨ͠ॲཧͱͯ͠ײ͡ΒΕͳ͘ͳΔɻ
    10000msҎ্ 10ඵΛ௒͑ΔͱɺϢʔβʔ͸ෆຬΛײͯ͡཭୤͢ΔՄೳੑ͕ߴ͘ͳΔɻ
    INP͸FIDΑΓ΋Ϣʔβʔͷײ֮ʹ͍ۙ஋
    */1͸ɺ'*%ΑΓ΋Ϣʔβʔ͕஗͍ͱ௚઀ײ͡ΔϙΠϯτ͕ࢦඪͱͳ͍ͬͯ·͢ɻ·ͨɺॳظදࣔ
    ͚ͩΛܭଌ͢ΔͷͰ͸ͳ͘ɺΞϓϦέʔγϣϯ͕ଘࡏ͢Δؒͣͬͱܭଌ͞Εଓ͚Δ͜ͱʹͳΓ·
    ͢ɻ
    ࢀߟ: RAILϞσϧ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Ϣʔβʔʹ͍ۙҐஔͰͷΩϟογϡ
    CDN App
    service
    
    
    worker
    storage
    local
    
    
    cache
    cache db
    memory
    DB
    ͳΔ΂͘Ϣʔβʔʹ͍ۙҐஔͰΩϟογϡͯ͠ߴ଎ʹฦ٫͢Δ͜ͱͰɺύϑΥʔϚϯεΛ޲্ɻ
    

    View Slide

24. Edge Workers
    cacheͷॊೈੑ޲্
    ෺ཧతʹϢʔβʔʹ͍ۙɺ$%/&EHFͰ
    σʔλΛฦ͢͜ͱ͕Ͱ͖Ε͹ɺΞϓϦέʔ
    γϣϯʹ౸ୡ͢ΔલʹϨεϙϯεͰ͖ߴ଎
    Խ͕ظ଴Ͱ͖Δɻ
    CDN
    &EHF8PSLFSTͷొ৔ʹΑͬͯɺ)551ϔο
    μͷηϚϯςΟΫε಺ͷಈ࡞͚ͩͰͳ͘ɺ
    &EHFͰؔ਺Λ࣮ߦͯ͠ɺॊೈͳಈ࡞Λఆٛ
    ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ
    Cloud
    fl
    are Workers
    AWS Cloudfront Function
    Fastly Compute@Edge
    

    View Slide

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

    View Slide

26. BFCache
    cacheͷॊೈੑ޲্
    ϒϥ΢βͰ໭ΔਐΉΛߦͬͨͱ͖ʹɺಛఆ
    ͷ৚݅ԼͰΩϟογϡ͔ΒಡΈࠐΉ͜ͱ
    ͰɺΦϦδϯʹ௨৴͢Δ͜ͱͳ͘ॲཧΛܧ
    ଓͰ͖Δɻ
    service
    
    
    worker
    storage
    local
    
    
    cache
    ࣾ಺Ͱௐࠪͨ͠ͱ͜Ζɺ໿͕ϒϥ΢β
    ͷ໭ΔਐΉͷϦΫΤετɻ αʔϏεಛੑʹ΋ΑΓ·͢
    
    4BGBSJͱ'JSFGPY͕ઌߦ͍ͯ͠Δ͕ɺࠓޙ$ISPNJVNͰ΋$BDIF$POUSPMOPTUPSFͷ৔߹
    Ͱ΋ΩϟογϡͰ͖ΔͳͲɺൣғΛ޿͛ΔରԠ͕ਐΜͰ͍Δɻ
    

    ϠϑʔͰ΋ରԠΛਐΊ͍ͯΔͷͰɺޙड़ɻ
    

    View Slide

27. https://web.dev/bfcache/
    BFCacheΛ༗ޮʹͨ͠৔߹ͷಈ࡞
    σʔλͷऔಘ΋ߦΘͣJS΋్த͔Β࠶࣮ߦ͞ΕΔͨΊɺߴ଎ͳද͕ࣔظ଴Ͱ͖Δɻ
    

    View Slide

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

    IPͳͲݸਓ৘ใ͕఻Θͬͯ͠·͏
    

    View Slide

29. Private Prefetch Proxy
    cacheͷॊೈੑ޲্
    1SJWBUF1SFGFUDI1SPYZ͸ɺ$ISPNF͕ಠࣗʹߦͳ͍ͬͯΔઌಡΈͷ࢓૊ΈͰɺ*1ͳͲΛӅṭ
    ͨ͠ঢ়ଶͰભҠલͷσʔλΛઌʹಡΈࠐΜͰ͓͖ɺΫϩεΦϦδϯؒͷϖʔδͷભҠΛߴ଎Խ
    ͠·͢ɻ
    CONNECT Proxy
    ΞΫηεઌϖʔδ
    html, CSS, JavaScript
    ֤ࠃͷαʔόʔ͔Βಗ໊Խͯ͠औಘ
    Ωϟογϡ͓ͯ͘͠
    

    View Slide

30. Private Prefetch Proxy
    cacheͷॊೈੑ޲্
    ηΩϡϦςΟͷ໰୊͕͋ΔͨΊɺ$PPLJF΍
    6TFS"HFOUͳͲͷϢʔβʔ৘ใΛ΄ͱΜͲ࣋ͨͳ͍
    ܗͰΞΫηε͞ΕΔɻޮ཰తͳΩϟογϡΛ͢Δʹ
    ͸ɺͦΕΛલఏͱͨ͠࢓૊Έ͕ඞཁʹͳΓ·͢ɻ
    purpose: prefetc
    h
    
    sec-purpose: prefetch; anonymous-client-i
    p
    
    user-agent: >
    
    accept: >
    
    accept-encoding: gzip, deflate, b
    r
    
    accept-language: >
    
    sec-ch-ua: >
    
    sec-ch-ua-mobile: ?<0 or 1
    >
    
    https://github.com/buettner/private-prefetch-proxy
    Ωϟογϡ࣌ʹૹ৴͞ΕΔϔομ
    

    View Slide

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

    View Slide

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

    View Slide

33. Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ
    ϒϥ΢β͸ɺը໘಺ʹඞཁ͔Ͳ͏͔Λ൑அ͠ɺࣗ
    ಈతʹऔಘ༏ઌ౓Λมߋ͠·͕͢ɺϢʔβʔ͔Β
    ݟͨ৔߹ͷ༏ઌ౓Λਖ਼֬ʹ͸ଊ͖͑Ε·ͤΜɻ
    

    ྫ͑͹Χϧʔηϧͷ൪໨ͷը૾΍ɺഎܠͱͯ͠
    ར༻͞Ε͍ͯΔཁૉͳͲɻ·ͨɺը໘಺ʹೖΔ͜
    ͱ͕൑அͰ͖͔ͯΒ༏ઌ౓͕ܾఆ͞ΕΔͨΊʹɺ
    ༧Ί༧ଌ͢Δ͜ͱ͕ࠔ೉Ͱ͢ɻ
    औಘ༏ઌ౓Λద੾ʹਪଌ͢Δٕज़ͷࡦఆ͕ਐΜͰ
    ͍·͢ɻ
    

    View Slide

34. Priority Hints
    Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ
    ཁૉͷGFUDIQSJPSJUZଐੑɺ+4ͷGFUDIͷ
    PQUJPOΛ࢖༻ͯ͠ɺϦιʔεͷऔಘ༏ઌ౓Λࣔ͢
    ͜ͱͰɺϒϥ΢βʹਖ਼֬ʹϦιʔεͷऔಘॱংΛ
    ఻͑ɺಡΈࠐΈॱΛ࠷దԽ͢Δ͜ͱ͕Ͱ͖Δɻ
    3FTPVDF)JOUT MJOLSFMlQSFMPBEz
    ͱ૬ҧ఺
    - HTMLଐੑ஋΍fetchʹΦϓγϣϯΛઃఆͰ͖ɺσʔλऔಘʹ
    ରͯ͠΋ར༻Ͱ͖Δɻ
    
    
    - ϒϥ΢βͷࣗಈ࠷దԽΛ଴ͭલʹɺΑΓ࠷దͳ༏ઌ౓Λ఻͑
    Δ͜ͱ͕Ͱ͖Δɻ
    Χϧʔηϧͷը૾ʹࢦఆ͢Δྫ
    

    View Slide

35. 103 Early Hints
    Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ
    αʔόʔ͕࣮ࡍͷϨεϙϯεΛฦ͢લʹɺͦͷதͰ࢖༻͞ΕΔϦιʔεͷઌಡΈ৘ใΛฦ٫͢
    ΔͨΊͷϦΫΤετΛฦ͢8FCඪ४࢓༷Ͱ͢ɻϒϥ΢β͕࠷దԽΛ࢝ΊΔͷ͸ɺ͋͘·Ͱυ
    ΩϡϝϯτΛड͚औͬͨஈ֊ɻͦΕ͔ΒͰͳ͍ͱɺͲͷΑ͏ͳϦιʔεΛ࢖༻͢Δ͔͸Θ͔Γ
    ·ͤΜɻ
    Server
    GET / index.html
    200 OK
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. ಋೖޙͷ݁Ռ
    1. Priority Hints ͷಋೖ
    λΠϧͰ-$1ͷ਺஋ൺֱΛͨ͠ͱ
    ͜Ζɺ༗ҙࠩͳ͠ͱͷ݁Ռʹɻ
    ΑΓߴ͍ޮՌ͕Ͱ͖Δ͜ͱΛظ଴ͯ͠
    ͍ͨҰํͰɺ݁Ռ͔Β͸ΑΓ࠷దԽԼ
    ॲཧͰ3FTPVSDF)JOUTͱ΄΅ಉ౳ͷޮ
    Ռ͕ಘΒΕΔ͜ͱ͕Θ͔Γ·͢ɻ
    ϒϥ΢βͷ࣮૷͕ਐΈ࣍ୈɺશࣾͰ΋
    औΓೖΕͯ࠷దԽΛਐΊ͍ͯ͘༧ఆɻ
    

    View Slide

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

    View Slide

49. ՝୊: Ωϟογϡ͕༗ޮԽ͞ΕΔ৚͕݅ෳࡶ
    2. BFCacheͷ༗ޮԽ
    XFCͷطଘಈ࡞Λյ͞ͳ͍͜ͱΛकΔͨΊʹɺ#'$BDIFͷൃಈ৚͕݅ඇৗʹෳ
    ࡶͰ͢ɻ#'$BDIF͕ແޮԽ͞Εͯ͠·͏୅දతͳྫͱͯ͠͸ɺ
    1. unloadΠϕϯτϋϯυϥΛ࢖༻͍ͯ͠Δ
    
    
    2. ಡΈࠐΈ͕׬͍ྃͯ͠ͳ͍iframe͕ଘࡏ͢Δ
    ͜ΕΒ͕ɺͭͰ΋αϒϑϨʔϜͰݟ͔ͭΔͱ༗ޮԽ͞Εͳ͍ʜɻ
    

    View Slide

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

    View Slide

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

    View Slide

52. ·ͱΊ
    

    View Slide

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

    ࢲୡ͕Ͱ͖Δ͜ͱ͸͜ͷํ޲ੑʹదͨ͠ΞʔΩςΫνϟ΍ɺσʔλઃܭΛ࠾༻͍ͯ͘͜͠ͱ͕ॏཁɻ
    

    View Slide

54. ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ
    Ϣʔβʔʹ͍ۙ
    Ωϟογϡઓུ
    ΩϟογϡϑΝʔετͳσʔλઃܭ
    

    ϢʔβʔσʔλΛ஗ԆಡΈࠐΈ͢Δ͜ͱͰ੩తͳߏ੒ΛͱΔͳͲ
    ભҠઌͷઌಡΈ
    

    QSJWBUFQSFGFUDIQSPYZ HVFTTKTʜͳͲ
    ϒϥ΢βͷϥΠϑαΠΫϧ ໭ΔਐΉ
    Λҙࣝ͠
    ͨઃܭ
    $%/Τοδͷ4FSWJDF8PSLFSΛલఏͱͨ͠Ξϓ
    Ϧέʔγϣϯઃܭ
    

    View Slide

55. Ϧιʔεऔಘ
    ༏ઌ౓ͷ࠷దԽ
    ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ
    Ϣʔβʔʹඞཁͳσʔλͷ໌֬Խ
    ར༻ස౓΂ͭͷϑΝΠϧ෼ׂ
    

    (MBOVMBS$IVOLJOHʜͳͲ
    

    View Slide

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

    3FBDU4VTQFOTF4FSWFS$PNQPOFOUTͳͲ
    ཁૉ͝ͱʹಡΈࠐΉઃܭ
    

    3FMBZ(SBQI2-ʹΑΔΫΤϦίϩέʔγϣϯͳͲ
    

    View Slide

57. ҰาҰาɺշదͳPWAͷ࣮ݱʹΉ͚ͯ
    

    าΜͰ͍͖·͠ΐ͏ɻ
    PWA
    

    View Slide