20220908_フロントエンドパフォーマンス改善.pdf

Slide 1

Slide 1 text

!LB[ ϑϩϯτΤϯυΞϓϦͷ ύϑΥʔϚϯεվળΛͨ͠࿩ "MUFSOBUJWF"SDIJUFDUVSF%0+0

Slide 2

Slide 2 text

8)0 ౉ลҰ޺ (Θͨͳ΂ ͔ͣͻΖ) ɹ @kaz_29 גࣜձࣾϋʔτϏʔπ ։ൃࣄۀ෦ ࣄۀ෦௕

Slide 3

Slide 3 text

גࣜձࣾϋʔτϏʔπ͕೔ຊॳʮΫϥ΢υ্Ͱಈ࣍͘ੈ୅ܕλΠϜελϯϓγεςϜʯͷ։ൃʹ੒ޭɺʮ,P[VUVNJʯ্Ͱ࣮ূ࣮ݧ΁ IUUQTQSUJNFTKQNBJOIUNMSEQIUNM IUUQTLP[VUVNJDPN

Slide 4

Slide 4 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Θͨͳ΂ͷ΍͍ͬͯΔ͜ͱ w όοΫΤϯυΤϯδχΞ w $BLF1)1࢖͍#BLFS w ϑϩϯτΤϯυΤϯδχΞ w 3FBDUOFYUKT w $*$%؀ڥͷߏஙɾӡ༻ w "[VSF%FW0QT w (JUIVC"DUJPOT

Slide 5

Slide 5 text

͋Δ೔ʜ

Slide 6

Slide 6 text

zͳΜ͔ϖʔδͷಡΈࠐΈ஗͘Ͷʁz

Slide 7

Slide 7 text

ʜ🤔

Slide 8

Slide 8 text

͍Ζ͍Ζࢼߦࡨޡͨ͠࿩Λ͠·͢

Slide 9

Slide 9 text

·ͣ͸ݱঢ়Λ೺Ѳ͍ͨ͠

Slide 10

Slide 10 text

Google Lighthouse

Slide 11

Slide 11 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse

Slide 12

Slide 12 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse w (PPHMF੡8FCͷύϑΥʔϚϯεɾΞΫηγϏϦςΟ਍அπʔϧ w %FTLUPQ 1$ϒϥ΢β .PCJMF εϚϗϒϥ΢β ͷ਍அ͕Ͱ͖Δ w ෳ਺ͷ਍அ߲໨ w 1FSGPSNBODFಡࠐΈ଎౓΍ඳըͳͲɺύϑΥʔϚϯεʹؔ͢Δ਍அ w "DDFTTJCJMJUZݴޠઃఆ΍৭ͳͲɺࢹ֮ো֐ऀ޲͚ͳͲͷΞΫηγϏϦςΟʹؔ͢Δ਍அ w #FTU1SBDUJDFTਪ঑͞ΕΔٕज़Λ࢖͍ͬͯΔ͔ʁඇਪ঑ͷ"1*ͳͲΛ࢖͍ͬͯͳ͍͔ͳͲ࣮૷ʹؔ͢Δ਍அ w 4&04&0ʹؔ͢Δ਍அ w 18"1SPHSFTTJWF8FC"QQʹؔ͢Δ਍அ

Slide 13

Slide 13 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse - Performance ओͳࢦඪ • First Contentful Paint(FCP) Ϣʔβʔ͕ϖʔδʹΞΫηεͨ͠ޙɺϒϥ΢β͕࠷ॳͷ%0.ίϯςϯπΛϨϯμϦϯά͢Δͷʹ͔͔Δ࣌ؒ • Time to Interactive(TTI) ϖʔδ͕׬શʹΠϯλϥΫςΟϒʹͳΔ·Ͱʹ͔͔Δ࣌ؒ • Speed Index ϖʔδϩʔυ࣌ʹίϯςϯπ͕ࢹ֮తʹදࣔ͞ΕΔ·Ͱͷ࣌ؒ • Total Blocking Time(TBT) Ϛ΢εΫϦοΫ εΫϦʔϯλοϓ ΩʔೖྗͳͲͷϢʔβೖྗʹରͯ͠ϖʔδ͕Ԡ౴͠ͳ͍Α͏ʹϒϩοΫ͞Εͨ࣌ؒͷ߹ܭ • Largest Contentful Paint(LCP) ϖʔδͷϝΠϯίϯςϯπ͕Ϣʔβʔʹݟ͑ΔΑ͏ʹͳΔ·Ͱͷ࣌ؒ ࠷େͷίϯςϯπཁૉ͕ը໘ʹϨϯμϦϯά͞ΕΔ࣌ؒ

Slide 14

Slide 14 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse ͍͍ײ͡ʹվળ͍͖͍ͯͨ͠

Slide 15

Slide 15 text

Reduce unused JavaScript ͕͍ͬͺ͍ग़ͨ

Slide 16

Slide 16 text

Ͳ͏΍ͬͯ୳͔͢ʁ

Slide 17

Slide 17 text

@next/bundle-analyzer

Slide 18

Slide 18 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS

Slide 19

Slide 19 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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

Slide 20

Slide 20 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS

Slide 21

Slide 21 text

!OFYUCVOEMFBOBMZ[FSΛར༻ͯ͠ όϯυϧαΠζΛ࡟ݮͨ͠ࣄྫ

Slide 22

Slide 22 text

ҙਤ͠ͳ͍ݴޠઃఆΛ ಡΈࠐΜͰ͍ͨ

Slide 23

Slide 23 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer

Slide 24

Slide 24 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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

Slide 25

Slide 25 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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 ൈਮʣ Կ͕໰୊͔ʜ

Slide 26

Slide 26 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ

Slide 27

Slide 27 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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 ֤ϖʔδͰ໿࡟ݮ

Slide 28

Slide 28 text

🎉

Slide 29

Slide 29 text

ར༻͍ͯ͠ͳ͍ΞΠίϯΛ େྔʹಡΈࠐΜͰ͍ͨ

Slide 30

Slide 30 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ར༻͍ͯ͠ͳ͍ΞΠίϯΛେྔʹಡΈࠐΜͰ͍ͨ

Slide 31

Slide 31 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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'; ݺͼग़͠ํ

Slide 32

Slide 32 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ w JOEFYUTͰ഑ԼͷίϯϙʔωϯτΛ·ͱΊΔͷ͸ѱख w JOEFYUTܦ༝ͰJNQPSU͢Δͱશͯͷίϯϙʔωϯτ͕ಡΈࠐ·Εͯ͠·͏ w JNQPSUํ๏͕ෳ਺ଘࡏ͢Δͷ΋ࠞཚͷݩʹͳΓ͏Δ w JNQPSUจ͕௕͘ͳΓ͕ͪͳͷ͸࢓ํͳ͍ͷͰڐ༰͢Δ

Slide 33

Slide 33 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ w dTSDDPNQPOFOUTJDPOTJOEFYUTͰΞΠίϯΛJNQPSU͢ΔͷΛ΍Ίͨ w ར༻͍ͯ͠ΔΞΠίϯΛ໌ࣔతʹJNQPSU͢ΔΑ͏ʹमਖ਼ w ҎԼͷΑ͏ͳܗࣜʹશͯमਖ਼ import { LoginIcon } from ‘components/icons/LoginIcon'; import { LogoutIcon } from ‘components/icons/LogoutIcon'; ֤ϖʔδͰʙ࡟ݮ

Slide 34

Slide 34 text

🎉

Slide 35

Slide 35 text

lighthouse-ci

Slide 36

Slide 36 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci w -JHIUIPVTFͷ݁Ռʹର͢Δܧଓతͳ࣮ߦɺอଘɺऔಘɺΞαʔγϣϯΛՄೳ ͳݶΓ؆୯ʹߦ͏ͨΊͷπʔϧ܈ IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

Slide 37

Slide 37 text

ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

Slide 38

Slide 38 text

w ύϑΥʔϚϯεվળ͸஍ಓͳ࡞ۀͷ܁Γฦ͠ w MJHIUIPVTFͰݱঢ়Λ೺Ѳ w !OFYUCVOEMFBOBMZ[FSͰ໰୊఺Λચ͍ग़͠ w վળ࡞ۀ w MJHIUIPVTFDJΛ࢖͏ͱΑΓศརʂ ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ lighthouse-ci IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

Slide 39

Slide 39 text

͓͠·͍ @kaz_29