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

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

Transcript

1. ϝλɾύϑΥʔϚϯενϡʔ χϯά 2020/12/15 @FE Study #2
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa ࠷ۙͷ׆ಈ
   $ISPNF
   "EWJTPSZ
   #PBSE
   
   +4$POG+1
   PSHBOJ[FS
   FUD
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. /BWJHBUJPO
   4UBSU 'JSTU
   1BJOU 'JSTU
   $POUFOUGVM
   1BJOU Loading.. 'JSTU
   .FBOJOHGVM
   1BJOU -BSHFTU
   $POUFOUGVM
   1BJOU *NBHF 5JNF
   5P
   *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. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU -BSHFTU
    $POUFOUGVM
    1BJOU *NBHF 5JNF
    5P
    *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 /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU -BSHFTU
    $POUFOUGVM
    1BJOU *NBHF 5JNF
    5P
    *OUFSBDUJWF *NBHF 'VMMZ
    -PBEFE *NBHF Կ͔දࣔ͞ΕΔ·Ͱ ίϯςϯπͷதͰҰ൪େ͖͍ཁૉ͕ݟ͑Δ·Ͱ શମͰධՁ͞ΕΔΑ͏ʹͳΔɻ-$1͚ͩ ૣ͚Ε͹Α͍Θ͚Ͱ͸ͳ͘ɺ࠷ॳ͔Β -$1·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍
21. Web Vitals มߋ఺ • First Input Delay: γϯϓϧʹ͕࣌ؒݮΔ (50ms - 75ms) Λᮢ஋ ͱ͢Δɻ
22. /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU -BSHFTU
    $POUFOUGVM
    1BJOU *NBHF 5JNF
    5P
    *OUFSBDUJWF *NBHF 'VMMZ
    -PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த NT
    ͸௕͗ͨ͢ɻ
    UJMFͰNT
    Ͱ΋໰୊ͳͦ͞͏
    ͳͷͰɺͦͪΒʹϑΥʔΧεΛ౰ͯΔ First Input Delay
23. Web Vitals มߋ఺ • Cumulative Layout Shift: ϨϯμϦϯά࣌ͷΈͷγϑτͰ͸ͳ͘ɺ௕ظ ؒੜ͖ͯΔϖʔδ (SPAͷΑ͏ͳ) ʹ΋ಉ͡ε ίΞΛద༻͍ͯ͘͠ɻ
24. Cumulative Layout Shift Layout Shift ϩʔυ͠ऴΘͬͨޙʹ
    -BZPVU
    4IJGU
    ͕ ൃੜͨ͠৔߹Ͱ͋ͬͯ΋దٓͦΕ͕ධ Ձ͞ΕΔɻ
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. ͋Γ͕ͱ͏͍͟͝·ͨ͠