Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Loading Performanceとの向き合い方 / InsideFrontend 2019

Loading Performanceとの向き合い方 / InsideFrontend 2019

Sho Miyamoto

May 18, 2019
Tweet

More Decks by Sho Miyamoto

Other Decks in Technology

Transcript

  1. Loading Performanceͱͷ

    ޲͖߹͍ํ
    ೔ຊܦࡁ৽ฉࣾ ٶຊ ক (@shqld)

    View full-size slide

  2. - ٶຊ ক (Sho Miyamoto)
    - @shqld (Github, Twitter)
    - ೔ຊܦࡁ৽ฉࣾ ৽ଔ2೥໨
    - ࠷ۙ͸։ൃϝΠϯ
    - r.nikkei.com ͷϑϩϯτɺBFFɺCDN
    - Իָ
    - τϥϯϖοτ(JazzFunkܥʣɺϐΞϊ
    - ౦ೆΞδΞʹॅΈ͍ͨ
    ͩΕʁ

    Who am I

    View full-size slide

  3. ೔ܦిࢠ൛ a.k.a Nikkei
    2010೥3݄૑ץ
    ຖ೔໿900ຊͷهࣄΛ഑৴
    ݄ؒ3ԯΞΫηεҎ্
    2017೥11݄ʹϞόΠϧ൛ϦχϡʔΞϧ

    View full-size slide

  4. Google IO 2019
    Credit: @sisidovski (twitter) Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19)

    View full-size slide

  5. 7݄ʹ2౓໨ͷϦχϡʔΞϧ

    2nd time renewal in next July
    ະެ։

    View full-size slide

  6. ✔ LoadingPerformanceͱ೔ܦిࢠ൛
    ✔ ֎෦εΫϦϓτͱύϑΥʔϚϯε
    ✔ ݎ࿚ੑͱύϑΥʔϚϯε
    ✔ DXͱύϑΥʔϚϯε
    ✘ PWA
    ✘ CDN
    ✘ αʔόαΠυ
    ࠓ೔࿩͢͜ͱ
    Agenda

    View full-size slide

  7. A brief introduction of
    Loading Performance

    View full-size slide

  8. Loading Performance
    ϏδωεΠϯύΫτ

    Business Impacts
    https://dexecure.com/blog/business-web-performance-slow-website-eats-up-your-revenue/

    View full-size slide

  9. Loading Performance
    ΩʔϝτϦΫε

    Key Metrics
    https://developers.google.com/web/fundamentals/performance/rail

    View full-size slide

  10. ೔ܦిࢠ൛ͷύϑΥʔϚϯε

    Performance on Nikkei

    View full-size slide

  11. LightHouse Score
    (Top Page)
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε

    View full-size slide

  12. ΋͠ݹ͍୺຤Λ࢖͍ͬͯͨΒʁ
    ΋͠Windows7 & IEͩͬͨΒʁ
    ΋͠ΪΨΛ࢖͍Ռ͍ͨͯͨ͠Βʁ
    ΋͠Wifi͕஗͍؀ڥͩͬͨΒʁ
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε

    View full-size slide

  13. No Throttling
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε
    LightHouse Score
    (Top Page) Applied Slow 4G, 4x CPU Slowdown

    View full-size slide

  14. - Good FMP
    - ཉ͍͠ίϯςϯπ͸͙͢ʹݟ͑ΔΑ͏ʹͳΔ
    - Bad TTI
    - ϘλϯΛԡͯ͠΋൓Ԡ͕ͳ͍
    - ϓϩάϨεόʔ͕ফ͑ͳ͍
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε
    Ͳ͏ͳΔͷ͔
    How it affects

    View full-size slide

  15. TTI
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε
    ͍ͭͰ΋Ϣʔβ͔ΒͷೖྗΛड͚ΒΕΔঢ়ଶ

    View full-size slide

  16. Bad TTI
    5.7s
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε

    View full-size slide

  17. https://developers.google.com/web/updates/2018/05/first-input-delay
    جຊతʹ͸First CPU Idleͱಉ͡λΠϛϯά
    Long Tasks͕Ұఆ࣌ؒͳ͍ঢ়ଶ
    FIDͱ͸ࣅ͍ͯΔ͕ҟͳΔ
    ೔ܦిࢠ൛ͷύϑΥʔϚϯε

    View full-size slide

  18. ओͳݪҼ: (֎෦ͷ)޿ࠂεΫϦϓτ
    Main culprit: external ad scripts
    ޿ࠂεΫϦϓτ

    View full-size slide

  19. ޿ࠂεΫϦϓτ
    Ad scripts
    ޿ࠂεΫϦϓτ

    View full-size slide

  20. ؆୯ʹಋೖͰ͖Δ

    Introduce easily
    ࣮֬ʹදࣔ͢Δ

    Display certainly
    ਖ਼֬ʹܭଌ͢Δ
    Measure precisely
    ޿ࠂεΫϦϓτ

    View full-size slide

  21. - ༩͑ΒΕͨεΫϦϓτλάΛష
    Δ͚ͩͰಋೖͰ͖Δ
    - ෆมͳεΫϦϓτΛೖΓޱʹ

    ଟஈݺͼग़͠Λ͍ͯ͠Δ
    ؆୯ʹಋೖͰ͖Δ

    Introduce easily
    - ωοτϫʔΫϦΫΤετ͕ෳ਺
    ճ૸Δ
    - ίϯτϩʔϧͰ͖ͳ͍
    ޿ࠂεΫϦϓτ

    View full-size slide

  22. - ϓϩμΫτͷίʔυʹӨڹ͞Ε
    ͳ͍Α͏ͳڧ͍࣮૷
    - iframeͰදࣔ
    ࣮֬ʹදࣔ͢Δ

    Display certainly
    - αΠζ͕͔ͳΓॏ͍
    - ࣮ߦ࣌ؒ΋͔ͳΓ௕͍
    - `document.write()`
    ޿ࠂεΫϦϓτ

    View full-size slide

  23. - ޿ࠂ͕Ϣʔβʹݟ͑ͯॳΊͯΠϯ
    ϓϨογϣϯͷϏʔίϯ͕ඈͿ
    - ը໘ʹೖΔ·Ͱ޿ࠂΛग़͞ͳ͍
    ਖ਼֬ʹܭଌ͢Δ

    Measure precisely
    - `onScroll` Ͱ؂ࢹ
    - `img` λάͷsrc
    ޿ࠂεΫϦϓτ

    View full-size slide

  24. ΍ͬͺΓ޿ࠂ͸ͭΒ͍ɺͰ΋֎ͤͳ͍

    View full-size slide

  25. ޿ࠂεΫϦϓτͷ࠷దԽ
    Advertisement
    Performance
    τϨʔυΦϑʁ
    Trade off?

    View full-size slide

  26. ޿ࠂεΫϦϓτͷ࠷దԽ
    Ad Scripts Optimization
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  27. ԿΛ͍ͯ͠Δͷ͔෼͔Βͳ͍
    υΩϡϝϯτ͕ͳ͍
    ͪ͜ΒଆͰ͸มߋͰ͖ͳ͍
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  28. ԿΛ͍ͯ͠Δͷ͔෼͔Βͳ͍
    υΩϡϝϯτ͕ͳ͍
    ͪ͜ΒଆͰ͸มߋͰ͖ͳ͍
    ͦΕͰ΋Ͱ͖Δ͜ͱ͸͋Δ
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  29. minify͞ΕͨίʔυΛಡΉ
    debuggerͰॲཧΛ௥͏
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  30. 1. εΫϦϓτΛݺͼग़͢ॲཧΛ୳͢
    2. ଟஈʹݺͼग़͞ΕΔεΫϦϓτΛμ΢ϯϩʔυ
    3. ݺͼग़͠෦෼Λ௵͢
    4. 1ϑΝΠϧʹ࿈݁ͯ͠minify
    5. Fastly͔Β഑৴
    Build
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  31. const bundledScripts = []
    const script = await fetch(AD_ENTRY_URL)
    const nextScriptURL = script.match(NEXT_URL_REGEX)
    bundledScripts.push(
    script.replace(
    'createElement("script")',
    'createElement("div")'
    )
    )
    const nextScript = fetch(nextScriptURL)
    // …
    minify(bundledScripts.join(''))
    Build
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  32. ίϯτϩʔϥɿ޿ࠂSDKΛϥοϓ
    Ϗϡʔɿ֤ΫϦΤΠςΟϒͷදࣔ෦෼ΛiframeͰϥοϓ
    Encapsulate
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  33. Encapsulate
    Controller
    View (iframe)
    View (iframe)
    View (iframe)
    Ad Server
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  34. - ίϯτϩʔϥɿSDKͷಈ͖Λ཈੍
    - e.g. `onScroll` -> `IntersectionObserver`
    - Ϗϡʔɿ޿ࠂϨεϙϯεΛड͚औΓऔಘͨ͠

    ΫϦΤΠςΟϒͷHTMLΛύʔε
    - e.g. `document.write`
    Override
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  35. Off The Main Thread
    - UIͷදࣔʹؔ͢Δ΋ͷҎ֎͸WebWorkerͰ
    - ޿ࠂͷϦΫΤετ΍ύʔεΛWorkerͷεϨουͰॲ
    ཧ͍ͨ͠
    - ޿ࠂεΫϦϓτ͕ݺͿϦΫΤετΛ෼ੳͯ͠ɺ
    WorkerଆͰϦΫΤετΛ૊ΈཱͯΔॲཧΛॻ͘
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  36. import * as Comlink from ‘comlink’
    // worker.js
    const request = () => {
    const url = new URL('AD_SERVER_ENDPOINT')
    url.searchParams = { /*...*/ }
    return fetch(

    url.toString(),

    { headers: { /*...*/ } }

    ).then((res) => res.json())
    }
    Comlink.expose(request)
    // main.js
    const request = Comlink.wrap(

    new Worker(paths.controllerWorker)
    )
    // ...

    if (useWorker) {
    request(sectionId).then(renderAd)
    }
    Off The Main Thread
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  37. Off The Main Thread
    ޿ࠂεΫϦϓτͷ࠷దԽ

    View full-size slide

  38. ޿ࠂ͸ઈରʹग़͞ͳͯ͘͸ͳΒͳ͍
    but…
    छʑͷ࠷దԽࢪࡦʹΑͬͯ༧ظͤ͵ΫϦΤΠςΟϒͰ
    දࣔʹࣦഊ͢Δ͜ͱ͕͋Δ

    View full-size slide

  39. Robustness
    Performance
    τϨʔυΦϑʁ
    Trade off?
    ୤࠷దԽ

    View full-size slide

  40. ୤࠷దԽ

    Deoptimization
    ୤࠷దԽ

    View full-size slide

  41. Ͳ͔͜ͰҰ౓Ͱ΋ॲཧʹࣦഊͨ͠ͱ͖

    ͔ͦ͜Βਖ਼نͷॲཧʹ੾Γସ࣮͑ͯߦ
    if (!expectedData) { deoptimize() }
    try { process() } catch { deoptimize() }
    ୤࠷దԽ
    ࣦഊ࣌ͷϑΥʔϧόοΫ

    Fallback on failure

    View full-size slide

  42. Optimized

    Ad Handler
    Ad
    Ad
    Ad
    Deoptimize
    Default

    Ad Handler
    ࣦഊ࣌ͷϑΥʔϧόοΫ

    Fallback on failure
    ୤࠷దԽ

    View full-size slide

  43. 2nd-level
    ୤࠷దԽ
    Dynamic
    Deoptimization
    optimized
    3rd-level
    default

    View full-size slide

  44. - ෳ਺ͷ࠷దԽϨϕϧΛઃఆ
    - σϑΥϧτ͸࠷΋ߴ͍Ϩϕϧ
    - ϙΠϯτͱͳΔՕॴͰͷॲཧʹࣦഊͨ͠ΒɺҰͭϨ
    ϕϧΛԼ͛ͯܧଓ
    - ABςετͰσϑΥϧτϨϕϧΛ෼͚Ε͹

    ֤Ϩϕϧͷ࠷దԽॲཧͷΠϯύΫτ΍੒ޭ཰ΛଌΕ
    Δɺͱ͍͏෭࣍తͳϝϦοτ΋
    ୤࠷దԽ
    Dynamic
    Deoptimization

    View full-size slide

  45. ύϑΥʔϚϯεΛ௥͍ٻΊΔͱɺ

    ։ൃମݧ͕௿͘ͳΔέʔε΋͋Δ

    View full-size slide

  46. ϑϩϯτΤϯυઃܭͷ࡮৽
    Developer

    Experience
    Performance
    τϨʔυΦϑʁ
    Trade off?

    View full-size slide

  47. - จࣈྻςϯϓϨʔτ & VanillaJS͸ͭΒ͍
    - όά΋ग़΍͍͢
    - ։ൃऀͷࢀೖোนʹͳΔ
    ϞμϯͳϑϨʔϜϫʔΫͰ҆৺ɾշదʹ։ൃ͍ͨ͠
    ϑϩϯτΤϯυઃܭͷ࡮৽
    ύϑΥʔϚϯεͷཪͰ
    Behind the scenes

    View full-size slide

  48. ϑϩϯτΤϯυઃܭͷ࡮৽
    Redesigning Frontend
    ϑϩϯτΤϯυઃܭͷ࡮৽

    View full-size slide

  49. Frontend
    Backend
    VanillaJS
    ϑϩϯτΤϯυઃܭͷ࡮৽
    Handlebars
    ~ 2018

    View full-size slide

  50. ϑϩϯτΤϯυઃܭͷ࡮৽
    Frontend
    Backend JSX
    VanillaJS
    Handlebars
    ~ 2018 2019 ~

    View full-size slide

  51. ϑϩϯτΤϯυઃܭͷ࡮৽
    Backend
    Frontend
    JSX
    VanillaJS VanillaJS
    Handlebars
    ~ 2018 2019 ~

    View full-size slide

  52. - جຊతʹCSR͸͠ͳͯ͘Α͍
    - Universalͳίϯϙʔωϯτ࣮૷͸ඞཁͳ͍
    - ͱ͸͍͑ΠϯλϥΫγϣϯཁૉ͸গͳ͘ͳ͍
    - ը૾ͷLazyloadɺ ೔࣌ͷ૬ରදࣔɺ֤छϘλϯ…
    ϑϩϯτΤϯυઃܭͷ࡮৽
    ੩తͳαΠτ͸
    Static websites is …

    View full-size slide

  53. ϑϩϯτΤϯυઃܭͷ࡮৽
    ඞཁͷͳ͍΋ͷ
    Dispensable stuff
    Components State
    React

    View full-size slide

  54. VNode
    VNode VNode
    VNode
    Building

    Virtual DOM Tree
    ϑϩϯτΤϯυઃܭͷ࡮৽
    Hydration
    ඞཁͷͳ͍΋ͷ
    Dispensable stuff

    View full-size slide

  55. ϑϩϯτΤϯυઃܭͷ࡮৽
    WebComponents/
    CustomElements
    ✔ ϥΠϒϥϦෆཁ

    ✔ ωΠςΟϒ࣮૷
    ✔ Webඪ४
    ✔ ੜDOMૢ࡞ͱൺ΂ͯ͸Δ͔ʹָ
    ✔ SSRͷ࣮૷ͱᴥᴪ͕ͳ͍

    View full-size slide

  56. ϑϩϯτΤϯυઃܭͷ࡮৽
    WebComponents/
    CustomElements
    export const Card = (props) => (

    {props.title}

    {props.publishedAt}



    {props.thumbnail}



    )

    View full-size slide

  57. ·ͱΊ

    Summary

    View full-size slide

  58. ۜͷ஄ؙ͸ଘࡏ͠ͳ͍
    τϨʔυΦϑ͕͋ͬͯ΋ఘΊͳ͍
    Կ͕ඞཁͳͷ͔
    ԿΛ͢΂͖ͳͷ͔
    Ͱ͖Δ͜ͱΛண࣮ʹ΍͍ͬͯ͘
    ·ͱΊ

    View full-size slide

  59. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    Thank you

    View full-size slide