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

by narirou

Slide 1

Slide 1 text

඿ా ਅ੒ Yahoo! JAPAN / GYAO! PWA Night 2022/12/02 WEBύϑΥʔϚϯεߴ଎Խͱ ͜Ε͔ΒͷΞʔΩςΫνϟ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

1. Core Web Vitals ͷਐԽ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ܭଌ࣌ͷը໘

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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 Ωϟογϡ࣌ʹૹ৴͞ΕΔϔομ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

·ͱΊ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ Ϣʔβʔʹ͍ۙ Ωϟογϡઓུ ΩϟογϡϑΝʔετͳσʔλઃܭ   ϢʔβʔσʔλΛ஗ԆಡΈࠐΈ͢Δ͜ͱͰ੩తͳߏ੒ΛͱΔͳͲ ભҠઌͷઌಡΈ   QSJWBUFQSFGFUDIQSPYZ HVFTTKTʜͳͲ ϒϥ΢βͷϥΠϑαΠΫϧ ໭ΔਐΉ Λҙࣝ͠ ͨઃܭ $%/Τοδͷ4FSWJDF8PSLFSΛલఏͱͨ͠Ξϓ Ϧέʔγϣϯઃܭ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ϝΠϯεϨου ͔Βͷ෼཭ ࠓޙͷํ޲ੑʹ޲͚ͨΞʔΩςΫνϟΛߟ͑Δ ϝΠϯཁૉͰ͸ͳ͍ॲཧɺαʔυύʔςΟεΫϦ ϓτͷ࣮ߦεϨουλΠϛϯάͷ࠶ߟ ෦෼తʹαʔόʔαΠυͰܭࢉ͢Δઃܭ   3FBDU4VTQFOTF4FSWFS$PNQPOFOUTͳͲ ཁૉ͝ͱʹಡΈࠐΉઃܭ   3FMBZ(SBQI2-ʹΑΔΫΤϦίϩέʔγϣϯͳͲ

Slide 57

Slide 57 text

ҰาҰาɺշదͳPWAͷ࣮ݱʹΉ͚ͯ   าΜͰ͍͖·͠ΐ͏ɻ PWA