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

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

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

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

Yosuke Furukawa

December 15, 2020
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

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

    Paint • First Input Delay • Cumulative Layout Shift • ͷ3͔ͭΒͳΔɻ
  2. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF

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

    blocking resource ͷ༗ແ • Client Side RenderingΛආ͚Δ (JS͕ϩʔυ͞Ε͔ͯΒ͡Ό ͳ͍ͱίϯςϯπ͕දࣔ͞Εͳ͍ͷͰ) • ώʔϩʔը૾͸ Preload ͢ΔͳͲɻ
  4. /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU -BSHFTU$POUFOUGVM 1BJOU *NBHF

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

    split ͰJSΛ෼͚Δ • polyfill ͷར༻Λ߇͑ΔʢϞμϯϒϥ΢β޲͚ͷ Bundle JSΛ࡞Δ) • ࢖ΘΕͯͳ͍ JS Λ࡟Δ • ͦΕͰ΋Ͳ͏ʹ΋ͳΒͳ͍ͱ͖͸ WebWorker Λ࢖ͬͨΓ͢Δ ʢඈͼಓ۩ʣ
  6. Cumulative Layout Shift • Layout Shift = impact friction(ͲΕ͚ͩͷେ͖ ͞ͷΤϨϝϯτ͔)

    * distance friction (ͲΕͩ ͚ಈ͍͔ͨ) • Layout Shift ͷ૯࿨͕CLS
  7. Cumulative Layout Shift • Α͋͘Δͷ͸ը૾ͷॎԣ෯Λࢦఆͯ͠ͳ͍ • ಈը΍iframe΋ॎ෯΍ԣ෯Λࢦఆͯ͠ͳ͍ • Webfont ΋

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

    ͷࢫຯ͕མͪͯΔ Cumulative Layout Shift https://wicki.io/posts/2020-11-goodbye-google-fonts/
  9. Web Vitals มߋ఺ • Largest Contentful Paint: First Contentful Paintʢ࠷ॳʹCSSͷ͋ͨͬͨ

    ྖҬ͕ग़Δ·Ͱͷ࣌ؒʣ΋ࢦඪʹೖΕΔɻ Progressive ͳϩʔυ͕Ͱ͖͍ͯΔ͜ͱΛݟ Δɻ
  10. 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·Ͱશ෦ૣ͘ͳΒͳ͍ͱ͍͚ͳ͍
  11. /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
  12. Next.js / Nuxt.js • JS ͷ Code Split ΍ Server

    Side Rendering / Static Site Generation ͳͲͷݱ୅ͷϕετϓϥΫςΟεͬΆ͍͜ͱ͸ ͍͍ͩͨ΍ͬͯ͘ΕΔɻ • next/link ͰಡΈࠐΈઌͷϖʔδ͕ݟ͑ͨΒɺઌಡΈ (prefetch)ͱ͔΋ͯ͘͠ΕΔɻ • AMP͕ built-inͰ૊Έࠐ·Ε͍ͯͯɺ AMP ʹ͢Δ͜ͱ΋Ͱ ͖Δɻ
  13. ࢀߟࢿྉ • 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/