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. */1 *OUFSBDUJPOUP/FYU1BJOU ͸ɺϢʔβʔͷೖྗʹ ରͯ͠ΞϓϦ͕ద੾ʹԠ౴Λฦ͢·Ͱͷ࣌ؒΛද͢ࢦ ඪͰ͢ɻ Interaction to Next Paint (INP)

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

    ponterup mouseup click Ϩεϙϯε࣌ؒ ϨϯμϦϯά render paint composit input delay Ϣʔβʔͷೖྗ͔Βɺ࠷ऴग़ྗ·Ͱ͸༷ʑͳॲཧ͕ೖΔɻ͜ͷॲཧΛ્֐͢ΔΑ͏ͳ Πϕϯτϋϯυϥ͕͋ͬͨ৔߹ɺ࠷ऴදࣔ·Ͱͷ͕࣌ؒ஗Ԇ͢Δ͜ͱʹͳΓ·͢ɻ
  3. Ϣʔβʔʹ͍ۙҐஔͰͷΩϟογϡ CDN App service worker storage local cache cache db

    memory DB ͳΔ΂͘Ϣʔβʔʹ͍ۙҐஔͰΩϟογϡͯ͠ߴ଎ʹฦ٫͢Δ͜ͱͰɺύϑΥʔϚϯεΛ޲্ɻ
  4. BFCache cacheͷॊೈੑ޲্ ϒϥ΢βͰ໭ΔਐΉΛߦͬͨͱ͖ʹɺಛఆ ͷ৚݅ԼͰΩϟογϡ͔ΒಡΈࠐΉ͜ͱ ͰɺΦϦδϯʹ௨৴͢Δ͜ͱͳ͘ॲཧΛܧ ଓͰ͖Δɻ service worker storage local

    cache ࣾ಺Ͱௐࠪͨ͠ͱ͜Ζɺ໿͕ϒϥ΢β ͷ໭ΔਐΉͷϦΫΤετɻ αʔϏεಛੑʹ΋ΑΓ·͢ 4BGBSJͱ'JSFGPY͕ઌߦ͍ͯ͠Δ͕ɺࠓޙ$ISPNJVNͰ΋$BDIF$POUSPMOPTUPSFͷ৔߹ Ͱ΋ΩϟογϡͰ͖ΔͳͲɺൣғΛ޿͛ΔରԠ͕ਐΜͰ͍Δɻ 
 ϠϑʔͰ΋ରԠΛਐΊ͍ͯΔͷͰɺޙड़ɻ
  5. 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 Ωϟογϡ࣌ʹૹ৴͞ΕΔϔομ
  6. Priority Hints Ϧιʔεऔಘ༏ઌ౓ͷ࠷దԽ ཁૉͷGFUDIQSJPSJUZଐੑɺ+4ͷGFUDIͷ PQUJPOΛ࢖༻ͯ͠ɺϦιʔεͷऔಘ༏ઌ౓Λࣔ͢ ͜ͱͰɺϒϥ΢βʹਖ਼֬ʹϦιʔεͷऔಘॱংΛ ఻͑ɺಡΈࠐΈॱΛ࠷దԽ͢Δ͜ͱ͕Ͱ͖Δɻ 3FTPVDF)JOUT MJOLSFMlQSFMPBEz ͱ૬ҧ఺

    - HTMLଐੑ஋΍fetchʹΦϓγϣϯΛઃఆͰ͖ɺσʔλऔಘʹ ରͯ͠΋ར༻Ͱ͖Δɻ - ϒϥ΢βͷࣗಈ࠷దԽΛ଴ͭલʹɺΑΓ࠷దͳ༏ઌ౓Λ఻͑ Δ͜ͱ͕Ͱ͖Δɻ Χϧʔηϧͷը૾ʹࢦఆ͢Δྫ