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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠