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

メタ・パフォーマンスチューニング

 メタ・パフォーマンスチューニング

2020/12/15 @ FE Study #2
パフォーマンスチューニングの話です。

Yosuke Furukawa
PRO

December 15, 2020
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. ϝλɾύϑΥʔϚϯενϡʔ
    χϯά
    2020/12/15 @FE Study #2

    View Slide

  2. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa
    ࠷ۙͷ׆ಈ
    $ISPNF"EWJTPSZ#PBSE
    +4$POG+1PSHBOJ[FSFUD

    View Slide

  3. ͜͜࠷ۙɺύϑΥʔϚϯεप
    Γͷߋ৽͕ଟ͍ɻ
    ಛʹ Web Vitals पΓɻ

    View Slide

  4. Web Vitals
    • Google ͕ఏএ͢Δ৽͍͠ UX ͷࢦඪ
    • Largest Contentful Paint
    • First Input Delay
    • Cumulative Layout Shift
    • ͷ3͔ͭΒͳΔɻ

    View Slide

  5. Largest Contentful Paint
    • ϖʔδ಺ͷ࠷େͷ໘ੵΛද͖͔ࣔͬͨ͠Ͳ͏
    ͔
    • 2500 ms Ҏ಺ʹද͖ࣔ͠ΕͨΒ Good
    • 4000 ms Ҏ্ͩͱ Poor

    View Slide

  6. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM
    1BJOU
    Loading..
    'JSTU.FBOJOHGVM
    1BJOU
    -BSHFTU$POUFOUGVM
    1BJOU
    *NBHF
    5JNF5P*OUFSBDUJWF
    *NBHF
    'VMMZ-PBEFE
    *NBHF
    Կ͔දࣔ͞
    ΕΔ·Ͱ
    ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ
    ݁ہϢʔβʔ͸ϝΠϯίϯςϯπ͕ಡ
    Έࠐ·ΕΔ·ͰಡΈਐΊͳ͍Ͱ଴ͬͯ
    Δࣄ͕ଟ͍ɻ
    Largest Contentful Paint

    View Slide

  7. Largest Contentful Paint
    • LCP͕஗͍࣌ͷվળϙΠϯτ
    • αʔόͷϨεϙϯελΠϜ
    • JS΍CSSͳͲͷ render blocking resource ͷ༗ແ
    • Client Side RenderingΛආ͚Δ (JS͕ϩʔυ͞Ε͔ͯΒ͡Ό
    ͳ͍ͱίϯςϯπ͕දࣔ͞Εͳ͍ͷͰ)
    • ώʔϩʔը૾͸ Preload ͢ΔͳͲɻ

    View Slide

  8. Largest Contentful Paint
    • ώʔϩʔը૾͸ Preload ͓ͯ͘͠ͱྑ͍ɻ
    https://web.dev/optimize-lcp/#preload-important-resources

    View Slide

  9. First Input Delay
    • ϖʔδ͕ೖྗʹ൓ԠͰ͖Δ·Ͱͷ࣌ؒ
    • 100ms Ͱ Good
    • 300ms ͩͱ Poor

    View Slide

  10. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM
    1BJOU
    Loading..
    'JSTU.FBOJOHGVM
    1BJOU
    -BSHFTU$POUFOUGVM
    1BJOU
    *NBHF
    5JNF5P*OUFSBDUJWF
    *NBHF
    'VMMZ-PBEFE
    *NBHF
    දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ
    ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த
    ͜ͷ࣌ؒͷဃ཭͕௕͚Ε͹௕͍΄Ͳૢ
    ࡞Ͱ͖ͣʹϢʔβʔͷετϨεʹͳΔ
    First Input Delay

    View Slide

  11. First Input Delay
    • ͦ΋ͦ΋ಡΈࠐ·ΕͯΔJavaScriptΛݕ౼͢Δ
    • defer/async ͳͲͷಡΈࠐΈํͷվળ
    • code split ͰJSΛ෼͚Δ
    • polyfill ͷར༻Λ߇͑ΔʢϞμϯϒϥ΢β޲͚ͷ Bundle JSΛ࡞Δ)
    • ࢖ΘΕͯͳ͍ JS Λ࡟Δ
    • ͦΕͰ΋Ͳ͏ʹ΋ͳΒͳ͍ͱ͖͸ WebWorker Λ࢖ͬͨΓ͢Δ
    ʢඈͼಓ۩ʣ

    View Slide

  12. Cumulative Layout Shift
    • ϖʔδ͕ಡΈࠐ·Ε࢝Ί͔ͯΒྖҬ͕ͣΕͨ
    ৔߹ͷζϨ෯ͷ࿨
    • 0.1 Ҏ಺ͷ Layout Shift είΞͳΒ Good
    • 0.25 Ҏ্ͳΒ Poor

    View Slide

  13. Cumulative Layout Shift
    • Layout Shift = impact friction(ͲΕ͚ͩͷେ͖
    ͞ͷΤϨϝϯτ͔) * distance friction (ͲΕͩ
    ͚ಈ͍͔ͨ)
    • Layout Shift ͷ૯࿨͕CLS

    View Slide

  14. Cumulative Layout Shift
    Layout Shift
    ϩʔυͨ͠ޙͰҐஔ͕ͣΕΔͱ༧ظ͠
    ͳ͍ঢ়گʹͳΓɺϢʔβʔ͸ށ࿭͏ɻ
    ϨΠΞ΢τ͸TUBCMFͰ͋Δ΂͖ɻ

    View Slide

  15. Cumulative Layout Shift
    • Α͋͘Δͷ͸ը૾ͷॎԣ෯Λࢦఆͯ͠ͳ͍
    • ಈը΍iframe΋ॎ෯΍ԣ෯Λࢦఆͯ͠ͳ͍
    • Webfont ΋ FOUT ΍ FOIT ʹΑΓएׯϨΠΞ
    ΢τγϑτ͕ى͖Δ͕࣌͋ΓɺͦΕ΋ݪҼͷ
    ҰͭʹͳΓ͑Δɻ

    View Slide

  16. • Public CDN ͔Βαʔϒ͞ΕΔWebFont͸΋͏͍Βͳ͍͔΋ʁ
    • Cache Partitioning ʹΑΓɺ Public CDN ͷࢫຯ͕མͪͯΔ
    Cumulative Layout Shift
    https://wicki.io/posts/2020-11-goodbye-google-fonts/

    View Slide

  17. ͨͩ͜͠ΕΒͷࢦඪ͸มΘΓಘΔ
    ࣄΛ࠷ॳ͔Βࣔࠦ͞Ε͍ͯΔɻ

    View Slide

  18. Chrome Dev Summit Ͱ΋ૣ଎ม
    ΘΔ͜ͱ͕ൃද͞Ε͍ͯͨ

    View Slide

  19. Web Vitals มߋ఺
    • Largest Contentful Paint:
    First Contentful Paintʢ࠷ॳʹCSSͷ͋ͨͬͨ
    ྖҬ͕ग़Δ·Ͱͷ࣌ؒʣ΋ࢦඪʹೖΕΔɻ
    Progressive ͳϩʔυ͕Ͱ͖͍ͯΔ͜ͱΛݟ
    Δɻ

    View Slide

  20. Web Vitals มߋ఺
    • Progressive Loading
    /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM
    1BJOU
    Loading..
    'JSTU.FBOJOHGVM
    1BJOU
    -BSHFTU$POUFOUGVM
    1BJOU
    *NBHF
    5JNF5P*OUFSBDUJWF
    *NBHF
    'VMMZ-PBEFE
    *NBHF
    Կ͔දࣔ͞ΕΔ·Ͱ
    ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ
    શମͰධՁ͞ΕΔΑ͏ʹͳΔɻ-$1͚ͩ
    ૣ͚Ε͹Α͍Θ͚Ͱ͸ͳ͘ɺ࠷ॳ͔Β
    -$1·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍

    View Slide

  21. Web Vitals มߋ఺
    • First Input Delay:
    γϯϓϧʹ͕࣌ؒݮΔ (50ms - 75ms) Λᮢ஋
    ͱ͢Δɻ

    View Slide

  22. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM
    1BJOU
    Loading..
    'JSTU.FBOJOHGVM
    1BJOU
    -BSHFTU$POUFOUGVM
    1BJOU
    *NBHF
    5JNF5P*OUFSBDUJWF
    *NBHF
    'VMMZ-PBEFE
    *NBHF
    දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ
    ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த
    NT͸௕͗ͨ͢ɻ
    UJMFͰNTͰ΋໰୊ͳͦ͞͏
    ͳͷͰɺͦͪΒʹϑΥʔΧεΛ౰ͯΔ
    First Input Delay

    View Slide

  23. Web Vitals มߋ఺
    • Cumulative Layout Shift:
    ϨϯμϦϯά࣌ͷΈͷγϑτͰ͸ͳ͘ɺ௕ظ
    ؒੜ͖ͯΔϖʔδ (SPAͷΑ͏ͳ) ʹ΋ಉ͡ε
    ίΞΛద༻͍ͯ͘͠ɻ

    View Slide

  24. Cumulative Layout Shift
    Layout Shift
    ϩʔυ͠ऴΘͬͨޙʹ-BZPVU4IJGU͕
    ൃੜͨ͠৔߹Ͱ͋ͬͯ΋దٓͦΕ͕ධ
    Ձ͞ΕΔɻ

    View Slide

  25. ॳظදࣔ࣌఺ͰͷධՁ͔Β
    navigation ΍ scroll ͳͲͷ
    ૢ࡞ΛؚΊͨτʔλϧͷධՁ
    ͕伴ʹͳΔ

    View Slide

  26. ͱɺ͜ͷΑ͏ʹ
    Core Web Vitals
    ͱҰޱʹݴͬͯ΋ࢦඪ΋มΘ
    Δ͠ɺ΍Δ͜ͱ΋มΘΔɻ

    View Slide

  27. աڈʹ͋ͬͨ(ࠓ΋͋Δ?)ࢦඪ
    PRPL / RAIL

    View Slide

  28. WebύϑΥʔϚϯε͸ੜ͖෺
    ࢦඪ΋มΘΕ͹վળϙΠϯτ
    ΋ৗʹมΘΓਐԽ͢Δ

    View Slide

  29. ୭ͷͨΊͷύϑΥʔϚϯεʁ

    View Slide

  30. ຐ๏ͷݴ༿:
    ݕࡧΤϯδϯʹධՁ͞ΕΔ

    View Slide

  31. ݕࡧΤϯδϯʹධՁ͞ΕΔ
    ͔ͩΒύϑΥʔϚϯενϡʔ
    χϯάΛ΍Δɺͱ͍͏ͷ͸ख
    ஈͱ໨త͕มΘͬͯΔ

    View Slide

  32. ຊདྷ͸ϢʔβʔͷମݧΛ޲্
    ͤ͞ΔͨΊʹύϑΥʔϚϯε
    Λ্͛Δɺͦͷ݁ՌݕࡧΤϯ
    δϯʹ΋ධՁ͞ΕΔ

    View Slide

  33. ύϑΥʔϚϯε͸
    ϢʔβʔͷͨΊͷ΋ͷ

    View Slide

  34. ύϑΥʔϚϯε͸ੜ͖෺Ͱ͋
    ΓɺϢʔβʔͷମݧΛ޲্͞
    ͤΔͨΊʹߟ͑ͳ͍ͱ͍͚ͳ
    ͍΋ͷ

    View Slide

  35. զʑ͸Ͳ͏͢Δ΂͖͔ʁ

    View Slide

  36. 3ͭώϯτΛ঺հ

    View Slide

  37. 1.
    ͳΔ΂͘ݟ͑ΔԽ͢Δɺطଘͷ
    ՄࢹԽπʔϧ͚ͩͰ͸ͳࣗ͘෼
    Ͱ࡞Δ͜ͱ΋ࢹ໺ʹೖΕΔ

    View Slide

  38. ݟ͑ͳ͍΋ͷ͸ଌΕͳ͍
    ଌΕͳ͍΋ͷ͸վળͰ͖ͳ͍

    View Slide

  39. طଘͷπʔϧΛ࢖͏
    • SpeedCurve
    • Lighthouse CI
    • CrUX
    • Page Speed Insights
    • etc

    View Slide

  40. طଘͷπʔϧΛ࢖͏
    • ࠷ۙग़ͨ΍ͭ (AutoWebPerf)

    View Slide

  41. ΋ͪΖΜطଘͷπʔϧ΋ॏཁ
    ͚ͩͲɺ࠷ۙ͸UI͕ߴ౓Խ͠
    ͍ͯΔࣄ΋͋Γɺ୯७ͳई౓
    ͚ͩͰ͸଍Γͳ͍͜ͱ΋͋Δ

    View Slide

  42. ՄࢹԽ͕ॏཁ
    • AirSHIFTͰ͸ɺϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ
    ͔͔ͬͨඵ਺ΛkibanaͰݟ͑ΔΑ͏ʹ͍ͯ͠
    Δɻ

    View Slide

  43. طଘͷπʔϧͰऔΕΔϝτϦΫε͸࠷௿
    ݶඞཁͳ΋ͷͱͯ͠ɺϢʔβʔͷମݧͦ
    ͷ΋ͷͷύϑΥʔϚϯεΛՄࢹԽ͢Δ͜
    ͱͰΑΓମݧʹ௚͕݁ͨ࣌ؒ͠औΕΔɻ

    View Slide

  44. 2.
    ͳΔ΂͘ϞμϯͳϑϨʔϜ
    ϫʔΫʹ৐ΔɺͰ͖ͳ͍ͳΒ
    ΍ͬͯΔ͜ͱΛ஌Δ

    View Slide

  45. ϞμϯͳΑ͘࢖ΘΕ͍ͯΔϑϨʔ
    ϜϫʔΫʹ͸ϕετϓϥΫςΟ
    εͬΆ͍͜ͱ͕٧·ͬͯΔɻ

    View Slide

  46. Next.js / Nuxt.js

    View Slide

  47. Next.js / Nuxt.js
    • JS ͷ Code Split ΍ Server Side Rendering / Static Site
    Generation ͳͲͷݱ୅ͷϕετϓϥΫςΟεͬΆ͍͜ͱ͸
    ͍͍ͩͨ΍ͬͯ͘ΕΔɻ
    • next/link ͰಡΈࠐΈઌͷϖʔδ͕ݟ͑ͨΒɺઌಡΈ
    (prefetch)ͱ͔΋ͯ͘͠ΕΔɻ
    • AMP͕ built-inͰ૊Έࠐ·Ε͍ͯͯɺ AMP ʹ͢Δ͜ͱ΋Ͱ
    ͖Δɻ

    View Slide

  48. Next.js
    • next/image ॎ෯ɾԣ෯Λࢦఆͤ͞Δ͜ͱͰ Layout
    Shift Λى͜͞ͳ͘͢Δɻ͞Βʹը૾ͷ࠷దԽΛߦ͏࢓
    ૊Έ΋Ұॹʹఏڙ͍ͯ͠Δ
    • reportWebVitals ͰWebVitalsͷϝτϦΫε͕औΕΔɻ

    View Slide

  49. 3.
    ύϑΥʔϚϯεվળΛ
    ઐ໳ՈʹΑΔ৬ਓܳʹ͠ͳ͍

    View Slide

  50. ύϑΥʔϚϯεվળ͕৬ਓܳ
    ʹͳΔͱ৬ਓ్͕ઈ͑ͨॠؒ
    ʹվળ͸ݟࠐΊͳ͘ͳΔɻ

    View Slide

  51. εϐʔυϋοΧιϯ/ISUCON

    View Slide

  52. ΢ΣϒϑϩϯτΤϯυ͚ͩͰ
    Ͳ͜·ͰLighthouseͷείΞ
    Λ্͛ΒΕΔ͔ڝ͏େձ

    View Slide

  53. ୹ظతʹੑೳʹؔ͢ΔφϨο
    δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ

    View Slide

  54. ͳΔ΂͘஌ݟΛڞ༗͢Δɻ
    ΋ͬͱݴ͏ͱจԽʹ͢Δɻ

    View Slide

  55. ·ͱΊ

    View Slide

  56. ·ͱΊ
    • ύϑΥʔϚϯε͸ੜ͖෺ɺࢦඪ΋มΘΕ͹վળϙΠϯτ΋มΘ͍ͬͯ͘ɻ
    • ύϑΥʔϚϯε͸ϢʔβʔͷͨΊͷ΋ͷɻχʔζʹΑͬͯݟΔ΂͖ϙΠϯ
    τ΋มΘΔɻ
    • զʑ͕Ͱ͖Δ͜ͱ
    • ͳΔ΂͘ݟ͑ΔԽ͢Δ
    • ϞμϯͳϑϨʔϜϫʔΫʹ৐Δ
    • ύϑΥʔϚϯεվળΛจԽʹ͢Δ

    View Slide

  57. ࢀߟࢿྉ
    • https://web.dev/lcp/
    • https://web.dev/fid/
    • https://web.dev/cls/
    • https://web.dev/optimize-lcp/#preload-important-resources
    • https://wicki.io/posts/2020-11-goodbye-google-fonts/
    • https://ja.nuxtjs.org/
    • https://nextjs.org/
    • https://nextjs.org/docs/advanced-features/measuring-performance
    • https://nextjs.org/docs/basic-features/image-optimization
    • https://recruit-tech.co.jp/blog/2020/01/29/wow-the-beauty-speed-hackathon/
    • http://isucon.net/

    View Slide

  58. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide