20220908_フロントエンドパフォーマンス改善.pdf

Transcript

1. !LB[ ϑϩϯτΤϯυΞϓϦͷ
   ύϑΥʔϚϯεվળΛͨ͠࿩ "MUFSOBUJWF
   "SDIJUFDUVSF
   %0+0
   
   
2. 8)0 ౉ลҰ޺ (Θͨͳ΂ ͔ͣͻΖ) ɹ @kaz_29 גࣜձࣾϋʔτϏʔπ ։ൃࣄۀ෦ ࣄۀ෦௕
3. גࣜձࣾϋʔτϏʔπ͕
   ೔ຊॳʮΫϥ΢υ্Ͱಈ࣍͘ੈ୅ܕλΠϜελϯϓγεςϜʯͷ։ൃʹ੒ޭɺʮ,P[VUVNJʯ্Ͱ࣮ূ࣮ݧ΁ IUUQTQSUJNFTKQNBJOIUNMSEQIUNM IUUQTLP[VUVNJDPN
4. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Θͨͳ΂ͷ΍͍ͬͯΔ͜ͱ w όοΫΤϯυΤϯδχΞ
   w $BLF1)1࢖͍
   
   #BLFS
   w ϑϩϯτΤϯυΤϯδχΞ
   w 3FBDU
   
   OFYUKT
   w $*$%؀ڥͷߏஙɾӡ༻
   w "[VSF
   %FW0QT
   w (JUIVC
   "DUJPOT 
5. ͋Δ೔ʜ
6. zͳΜ͔ϖʔδͷಡΈࠐΈ஗͘Ͷʁz
7. ʜ🤔
8. ͍Ζ͍Ζࢼߦࡨޡͨ͠࿩Λ͠·͢
9. ·ͣ͸ݱঢ়Λ೺Ѳ͍ͨ͠
10. Google Lighthouse
11. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse
12. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse w (PPHMF੡
    8FCͷύϑΥʔϚϯεɾΞΫηγϏϦςΟ਍அπʔϧ
    w %FTLUPQ 1$ϒϥ΢β
    
    .PCJMF εϚϗϒϥ΢β ͷ਍அ͕Ͱ͖Δ
    w ෳ਺ͷ਍அ߲໨
    w 1FSGPSNBODF
    
    ಡࠐΈ଎౓΍ඳըͳͲɺύϑΥʔϚϯεʹؔ͢Δ਍அ
    w "DDFTTJCJMJUZ
    
    ݴޠઃఆ΍৭ͳͲɺࢹ֮ো֐ऀ޲͚ͳͲͷΞΫηγϏϦςΟʹؔ͢Δ਍அ
    w #FTU
    1SBDUJDFT
    
    ਪ঑͞ΕΔٕज़Λ࢖͍ͬͯΔ͔ʁඇਪ঑ͷ"1*ͳͲΛ࢖͍ͬͯͳ͍͔ͳͲ࣮૷ʹؔ͢Δ਍அ
    w 4&0
    
    4&0ʹؔ͢Δ਍அ
    w 18"
    
    1SPHSFTTJWF
    8FC
    "QQʹؔ͢Δ਍அ
13. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse - Performance ओͳࢦඪ • First Contentful Paint(FCP) Ϣʔβʔ͕ϖʔδʹΞΫηεͨ͠ޙɺϒϥ΢β͕࠷ॳͷ%0.ίϯςϯπΛϨϯμϦϯά͢Δͷʹ͔͔Δ࣌ؒ
    • Time to Interactive(TTI) ϖʔδ͕׬શʹΠϯλϥΫςΟϒʹͳΔ·Ͱʹ͔͔Δ࣌ؒ
    • Speed Index ϖʔδϩʔυ࣌ʹίϯςϯπ͕ࢹ֮తʹදࣔ͞ΕΔ·Ͱͷ࣌ؒ
    • Total Blocking Time(TBT) Ϛ΢εΫϦοΫ εΫϦʔϯλοϓ ΩʔೖྗͳͲͷϢʔβೖྗʹରͯ͠ϖʔδ͕Ԡ౴͠ͳ͍Α͏ʹϒϩοΫ͞Εͨ࣌ؒͷ߹ܭ
    • Largest Contentful Paint(LCP) ϖʔδͷϝΠϯίϯςϯπ͕Ϣʔβʔʹݟ͑ΔΑ͏ʹͳΔ·Ͱͷ࣌ؒ ࠷େͷίϯςϯπཁૉ͕ը໘ʹϨϯμϦϯά͞ΕΔ࣌ؒ
14. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse ͍͍ײ͡ʹվળ͍͖͍ͯͨ͠
15. Reduce unused JavaScript ͕͍ͬͺ͍ग़ͨ
16. Ͳ͏΍ͬͯ୳͔͢ʁ
17. @next/bundle-analyzer
18. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS
19. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer • Installation • Setting - next.con fi g.js • Run IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withBundleAnalyzer({}); yarn add —dev @next/bundle-analyzer ANALYZE=true yarn build
20. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS
21. !OFYUCVOEMFBOBMZ[FSΛར༻ͯ͠
    όϯυϧαΠζΛ࡟ݮͨ͠ࣄྫ
22. ҙਤ͠ͳ͍ݴޠઃఆΛ
    ಡΈࠐΜͰ͍ͨ
23. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer
24. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ $ ls node_modules/date-fns/locale _lib da et hr ko pl th af de eu hu lb pt tr ar-DZ el fa-IR hy lt pt-BR types.js ar-MA en-AU fi id lv ro ug ar-SA en-CA fr index.js mk ru uk az en-GB fr-CA index.js.flow ms sk uz be en-IN fr-CH is mt sl vi bg en-NZ gd it nb sr zh-CN bn en-US gl ja nl sr-Latn zh-TW ca en-ZA gu ka nl-BE sv cs eo he kk nn ta cy es hi kn package.json te $ du -hs node_modules/date-fns/locale 2.8M node_modules/date-fns/locale
25. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ import { Ja } from ‘date-fns/locale'; … var _index39 = _interopRequireDefault(require("./id/index.js")); var _index40 = _interopRequireDefault(require("./is/index.js")); var _index41 = _interopRequireDefault(require("./it/index.js")); var _index42 = _interopRequireDefault(require("./ja/index.js")); var _index43 = _interopRequireDefault(require("./ka/index.js")); var _index44 = _interopRequireDefault(require("./kk/index.js")); var _index45 = _interopRequireDefault(require(“./kn/index.js")); … ౰ॳͷ࢖༻ํ๏ OPEF@NPEVMFTEBUFGOTMPDBMFJOEFYKT
    ൈਮʣ Կ͕໰୊͔ʜ
26. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
27. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ Page Size First Load JS ! ◦ / (7997 ms) 2.05 kB 333 kB " /_app 0 B 331 kB " ◦ /404 195 B 331 kB " λ /api/callback 0 B 331 kB " ◦ /bucket/[id] (8016 ms) 5.05 kB 342 kB " ◦ /buckets (8015 ms) 1.86 kB 333 kB " ◦ /download/[id] (8016 ms) 669 B 331 kB " ◦ /faq (8186 ms) 1.4 kB 363 kB " ◦ /home (8000 ms) 674 B 331 kB " ◦ /inbox (8012 ms) 3.83 kB 335 kB " ◦ /inbox/[id] (8018 ms) 3.93 kB 341 kB " ◦ /manual (8192 ms) 1.41 kB 363 kB " ◦ /oauth/callback (8029 ms) 1.4 kB 332 kB " ◦ /privacy (8188 ms) 1.42 kB 363 kB " ◦ /signup (8010 ms) 1.91 kB 333 kB " ◦ /tos (8186 ms) 1.41 kB 363 kB # ◦ /users/login (8025 ms) 641 B 331 kB + First Load JS shared by all 331 kB " chunks/framework.2f6124.js 42.4 kB " chunks/main.4804be.js 23.4 kB " chunks/pages/_app.b8d6b2.js 264 kB " chunks/webpack.f9197a.js 1.01 kB # css/52ba53715136f2f1420a.css 2.17 kB Page Size First Load JS ! ◦ / (7959 ms) 2.04 kB 237 kB " /_app 0 B 235 kB " ◦ /404 194 B 235 kB " λ /api/callback 0 B 235 kB " ◦ /bucket/[id] (7986 ms) 5 kB 246 kB " ◦ /buckets (7997 ms) 1.83 kB 237 kB " ◦ /download/[id] (7985 ms) 659 B 236 kB " ◦ /faq (8194 ms) 1.38 kB 268 kB " ◦ /home (7994 ms) 667 B 236 kB " ◦ /inbox (7994 ms) 3.79 kB 239 kB " ◦ /inbox/[id] (7994 ms) 3.88 kB 245 kB " ◦ /manual (8196 ms) 1.39 kB 268 kB " ◦ /oauth/callback (7968 ms) 1.38 kB 237 kB " ◦ /privacy (8197 ms) 1.4 kB 268 kB " ◦ /signup (7992 ms) 1.89 kB 237 kB " ◦ /tos (8192 ms) 1.39 kB 268 kB # ◦ /users/login (7997 ms) 628 B 236 kB + First Load JS shared by all 235 kB " chunks/framework.2191d1.js 42.4 kB " chunks/main.6cb893.js 23.3 kB " chunks/pages/_app.b10a04.js 168 kB " chunks/webpack.f9197a.js 1.01 kB # css/52ba53715136f2f1420a.css 2.17 kB ֤ϖʔδͰ໿࡟ݮ
28. 🎉
29. ར༻͍ͯ͠ͳ͍ΞΠίϯΛ
    େྔʹಡΈࠐΜͰ͍ͨ
30. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ར༻͍ͯ͠ͳ͍ΞΠίϯΛେྔʹಡΈࠐΜͰ͍ͨ
31. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ export * from './CheckIcon'; export * from './SuccessIcon'; export * from './CloseIcon'; export * from './OpenIcon'; export * from './ErrorIcon'; export * from './InformationIcon'; export * from './LoginIcon'; export * from './LogoutIcon'; export * from './FileIcon'; export * from ‘./HomeIcon’; … ~/src/components/icons/index.ts import { LoginIcon, LogoutIcon, } from 'components/icons'; ݺͼग़͠ํ
32. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ w JOEFYUTͰ഑ԼͷίϯϙʔωϯτΛ·ͱΊΔͷ͸ѱख
    w JOEFYUTܦ༝ͰJNQPSU͢Δͱશͯͷίϯϙʔωϯτ͕ಡΈࠐ·Εͯ͠·͏
    w JNQPSUํ๏͕ෳ਺ଘࡏ͢Δͷ΋ࠞཚͷݩʹͳΓ͏Δ
    w JNQPSUจ͕௕͘ͳΓ͕ͪͳͷ͸࢓ํͳ͍ͷͰڐ༰͢Δ
33. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ w dTSDDPNQPOFOUTJDPOTJOEFYUT
    ͰΞΠίϯΛJNQPSU͢ΔͷΛ΍Ίͨ
    w ར༻͍ͯ͠ΔΞΠίϯΛ໌ࣔతʹJNQPSU͢ΔΑ͏ʹमਖ਼
    w ҎԼͷΑ͏ͳܗࣜʹશͯमਖ਼ import { LoginIcon } from ‘components/icons/LoginIcon'; import { LogoutIcon } from ‘components/icons/LogoutIcon'; ֤ϖʔδͰ
    ʙ
    ࡟ݮ
34. 🎉
35. lighthouse-ci
36. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci w -JHIUIPVTFͷ݁Ռʹର͢Δܧଓతͳ࣮ߦɺอଘɺऔಘɺΞαʔγϣϯΛՄೳ ͳݶΓ؆୯ʹߦ͏ͨΊͷπʔϧ܈ IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ
37. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ
38. w ύϑΥʔϚϯεվળ͸஍ಓͳ࡞ۀͷ܁Γฦ͠
    w MJHIUIPVTFͰݱঢ়Λ೺Ѳ
    w !OFYUCVOEMFBOBMZ[FSͰ໰୊఺Λચ͍ग़͠
    w վળ࡞ۀ
    w MJHIUIPVTFDJΛ࢖͏ͱΑΓศརʂ ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ
39. ͓͠·͍ @kaz_29