Save 37% off PRO during our Black Friday Sale! »

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

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

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

December 15, 2020
Tweet

Transcript

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

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

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

  4. Web Vitals • Google ͕ఏএ͢Δ৽͍͠ UX ͷࢦඪ • Largest Contentful

    Paint • First Input Delay • Cumulative Layout Shift • ͷ3͔ͭΒͳΔɻ
  5. Largest Contentful Paint • ϖʔδ಺ͷ࠷େͷ໘ੵΛද͖͔ࣔͬͨ͠Ͳ͏ ͔ • 2500 ms Ҏ಺ʹද͖ࣔ͠ΕͨΒ

    Good • 4000 ms Ҏ্ͩͱ Poor
  6. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF

    5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF Կ͔දࣔ͞ ΕΔ·Ͱ ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ ݁ہϢʔβʔ͸ϝΠϯίϯςϯπ͕ಡ Έࠐ·ΕΔ·ͰಡΈਐΊͳ͍Ͱ଴ͬͯ Δࣄ͕ଟ͍ɻ Largest Contentful Paint
  7. Largest Contentful Paint • LCP͕஗͍࣌ͷվળϙΠϯτ • αʔόͷϨεϙϯελΠϜ • JS΍CSSͳͲͷ render

    blocking resource ͷ༗ແ • Client Side RenderingΛආ͚Δ (JS͕ϩʔυ͞Ε͔ͯΒ͡Ό ͳ͍ͱίϯςϯπ͕දࣔ͞Εͳ͍ͷͰ) • ώʔϩʔը૾͸ Preload ͢ΔͳͲɻ
  8. Largest Contentful Paint • ώʔϩʔը૾͸ Preload ͓ͯ͘͠ͱྑ͍ɻ https://web.dev/optimize-lcp/#preload-important-resources

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

    300ms ͩͱ Poor
  10. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF

    5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த ͜ͷ࣌ؒͷဃ཭͕௕͚Ε͹௕͍΄Ͳૢ ࡞Ͱ͖ͣʹϢʔβʔͷετϨεʹͳΔ First Input Delay
  11. First Input Delay • ͦ΋ͦ΋ಡΈࠐ·ΕͯΔJavaScriptΛݕ౼͢Δ • defer/async ͳͲͷಡΈࠐΈํͷվળ • code

    split ͰJSΛ෼͚Δ • polyfill ͷར༻Λ߇͑ΔʢϞμϯϒϥ΢β޲͚ͷ Bundle JSΛ࡞Δ) • ࢖ΘΕͯͳ͍ JS Λ࡟Δ • ͦΕͰ΋Ͳ͏ʹ΋ͳΒͳ͍ͱ͖͸ WebWorker Λ࢖ͬͨΓ͢Δ ʢඈͼಓ۩ʣ
  12. Cumulative Layout Shift • ϖʔδ͕ಡΈࠐ·Ε࢝Ί͔ͯΒྖҬ͕ͣΕͨ ৔߹ͷζϨ෯ͷ࿨ • 0.1 Ҏ಺ͷ Layout

    Shift είΞͳΒ Good • 0.25 Ҏ্ͳΒ Poor
  13. Cumulative Layout Shift • Layout Shift = impact friction(ͲΕ͚ͩͷେ͖ ͞ͷΤϨϝϯτ͔)

    * distance friction (ͲΕͩ ͚ಈ͍͔ͨ) • Layout Shift ͷ૯࿨͕CLS
  14. Cumulative Layout Shift Layout Shift ϩʔυͨ͠ޙͰҐஔ͕ͣΕΔͱ༧ظ͠ ͳ͍ঢ়گʹͳΓɺϢʔβʔ͸ށ࿭͏ɻ ϨΠΞ΢τ͸TUBCMFͰ͋Δ΂͖ɻ

  15. Cumulative Layout Shift • Α͋͘Δͷ͸ը૾ͷॎԣ෯Λࢦఆͯ͠ͳ͍ • ಈը΍iframe΋ॎ෯΍ԣ෯Λࢦఆͯ͠ͳ͍ • Webfont ΋

    FOUT ΍ FOIT ʹΑΓएׯϨΠΞ ΢τγϑτ͕ى͖Δ͕࣌͋ΓɺͦΕ΋ݪҼͷ ҰͭʹͳΓ͑Δɻ
  16. • Public CDN ͔Βαʔϒ͞ΕΔWebFont͸΋͏͍Βͳ͍͔΋ʁ • Cache Partitioning ʹΑΓɺ Public CDN

    ͷࢫຯ͕མͪͯΔ Cumulative Layout Shift https://wicki.io/posts/2020-11-goodbye-google-fonts/
  17. ͨͩ͜͠ΕΒͷࢦඪ͸มΘΓಘΔ ࣄΛ࠷ॳ͔Βࣔࠦ͞Ε͍ͯΔɻ

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

  19. Web Vitals มߋ఺ • Largest Contentful Paint: First Contentful Paintʢ࠷ॳʹCSSͷ͋ͨͬͨ

    ྖҬ͕ग़Δ·Ͱͷ࣌ؒʣ΋ࢦඪʹೖΕΔɻ Progressive ͳϩʔυ͕Ͱ͖͍ͯΔ͜ͱΛݟ Δɻ
  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·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍
  21. Web Vitals มߋ఺ • First Input Delay: γϯϓϧʹ͕࣌ؒݮΔ (50ms -

    75ms) Λᮢ஋ ͱ͢Δɻ
  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
  23. Web Vitals มߋ఺ • Cumulative Layout Shift: ϨϯμϦϯά࣌ͷΈͷγϑτͰ͸ͳ͘ɺ௕ظ ؒੜ͖ͯΔϖʔδ (SPAͷΑ͏ͳ)

    ʹ΋ಉ͡ε ίΞΛద༻͍ͯ͘͠ɻ
  24. Cumulative Layout Shift Layout Shift ϩʔυ͠ऴΘͬͨޙʹ-BZPVU4IJGU͕ ൃੜͨ͠৔߹Ͱ͋ͬͯ΋దٓͦΕ͕ධ Ձ͞ΕΔɻ

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

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

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

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

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

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

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

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

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

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

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

  36. 3ͭώϯτΛ঺հ

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

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

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

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

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

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

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

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

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

  46. Next.js / Nuxt.js

  47. Next.js / Nuxt.js • JS ͷ Code Split ΍ Server

    Side Rendering / Static Site Generation ͳͲͷݱ୅ͷϕετϓϥΫςΟεͬΆ͍͜ͱ͸ ͍͍ͩͨ΍ͬͯ͘ΕΔɻ • next/link ͰಡΈࠐΈઌͷϖʔδ͕ݟ͑ͨΒɺઌಡΈ (prefetch)ͱ͔΋ͯ͘͠ΕΔɻ • AMP͕ built-inͰ૊Έࠐ·Ε͍ͯͯɺ AMP ʹ͢Δ͜ͱ΋Ͱ ͖Δɻ
  48. Next.js • next/image ॎ෯ɾԣ෯Λࢦఆͤ͞Δ͜ͱͰ Layout Shift Λى͜͞ͳ͘͢Δɻ͞Βʹը૾ͷ࠷దԽΛߦ͏࢓ ૊Έ΋Ұॹʹఏڙ͍ͯ͠Δ • reportWebVitals

    ͰWebVitalsͷϝτϦΫε͕औΕΔɻ
  49. 3. ύϑΥʔϚϯεվળΛ ઐ໳ՈʹΑΔ৬ਓܳʹ͠ͳ͍

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

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

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

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

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

  55. ·ͱΊ

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

    • ϞμϯͳϑϨʔϜϫʔΫʹ৐Δ • ύϑΥʔϚϯεվળΛจԽʹ͢Δ
  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/
  58. ͋Γ͕ͱ͏͍͟͝·ͨ͠