$30 off During Our Annual Pro Sale. View Details »

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

    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