Performance Findings - libitums/FE GitHub Wiki

์ฃผ์š” ๋ฐœ๊ฒฌ๊ณผ ์ •์ •

๋ณด๊ณ ์„œ 78ํŽธ์—์„œ ์•ž์œผ๋กœ ์ˆ˜์น˜๋ฅผ ์ฝ๋Š” ๋ฒ•์„ ๋ฐ”๊พผ ๊ฒƒ๋งŒ ๋ชจ์•˜๋‹ค. ์›๋ณธ์€ ๊ธฐ๋ก ๋ชฉ๋ก์—์„œ ์ฐพ๋Š”๋‹ค.

1. ๋ Œ๋” ์‹œ๊ฐ„์€ ๊ฐ™์€ ์ฝ”๋“œ์—์„œ๋„ 12.6 ms ํ”๋“ค๋ฆฐ๋‹ค

๊ฐ™์€ commit ยท ๊ฐ™์€ ๋นŒ๋“œ ยท ๊ฐ™์€ ์‹œ๋‚˜๋ฆฌ์˜ค๋กœ 5๋ฒˆ ์Ÿ€๋‹ค(2026-09-23).

ํšŒ์ฐจ ์ฒซ ๋ Œ๋” ๋ฉ”๋ชจ๋ฆฌ
01 78.6 ms 1,286,208 B
02 70.7 ms 1,286,208 B
03 73.0 ms 1,286,208 B
04 69.1 ms 1,286,208 B
05 65.9 ms 1,286,208 B
  • ๋ Œ๋” ์‹œ๊ฐ„ โ€” 65.9 ~ 78.6 ms, ํญ 12.6 ms(์ตœ์†Ÿ๊ฐ’์˜ 19%). ๋‹ค๋ฅธ commit ์‚ฌ์ด์˜ 10 ms ์•ˆํŒŽ ์ฐจ์ด๋Š” ๋ณ€๊ฒฝ ํƒ“์ด๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์—†๋‹ค.
  • ๋ฉ”๋ชจ๋ฆฌ โ€” ๋‹ค์„ฏ ๋ฒˆ ๋ชจ๋‘ ๋ฐ”์ดํŠธ๊นŒ์ง€ ๊ฐ™๋‹ค. ๋ฒˆ๋“ค์ด ์ •ํ•ด์ง€๋ฉด ๋ฉ”๋ชจ๋ฆฌ๋„ ์ •ํ•ด์ง„๋‹ค. commit ์‚ฌ์ด์˜ ๋ฉ”๋ชจ๋ฆฌ ์ฐจ์ด๋Š” ์ž‘์•„๋„ ์‹ค์ œ ์ฐจ์ด๋‹ค.
  • ๋‹ค๋ฅธ ๊ธฐ๋ก์—์„œ๋„ ๋น„์Šทํ•œ ํญ์ด ๋‚˜์™”๋‹ค โ€” ์žฌ์ „์†ก ์ˆ˜์ • ๊ธฐ๋ก 3ํšŒ์ฐจ 10.7 ms, ์ฒซ ํ™”๋ฉด ํ‘œ์‹œ(lynxFcp)๋Š” 30~55 ms.

โ†’ ์›๋ณธ

2. 1๋ฒˆ์— ๋”ฐ๋ผ ๋ฐ”๋กœ์žก์€ ํ•ด์„

๋ณด๊ณ ์„œ ์ฒ˜์Œ ์ ์€ ๊ฒƒ ๋ฐ”๋กœ์žก์€ ๊ฒƒ
์„ค์ • ยท ํƒ์นจ ํ™”๋ฉด ์ฃผ์„ ์ •๋ฆฌ ๋ฉ”๋ชจ๋ฆฌ +13 KB๋Š” ํ”๋“ค๋ฆผ ์•ˆ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๊พผ ์‹ค์ œ ์ฐจ์ด
์—ฌ์ • ๋งต ๋ง๋ผ ๊ฒ€์‚ฌ ๋ฉ”๋ชจ๋ฆฌ +14 KB๋Š” ํ”๋“ค๋ฆผ ์•ˆ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๊พผ ์‹ค์ œ ์ฐจ์ด
ํ•™์Šต ํ™”๋ฉด ์ฃผ์„ ์ •๋ฆฌ(โ‘ฃ-A) ๋ Œ๋”๊ฐ€ ์ปค์กŒ๋‹ค(+5.8 ms) ํ”๋“ค๋ฆผ ์•ˆ โ€” ๋ณ€๊ฒฝ๊ณผ ๋ฌด๊ด€(โ‘ฃ-B๊ฐ€ ๋‹ค์‹œ ์ฝ์Œ)
ํ‰๊ฐ€ ํ™”๋ฉด ๋„์ž… +25 ms, ์›์ธ ๋ฏธํ•ด๊ฒฐ ํšŒ๊ท€๋ณด๋‹ค ํ”๋“ค๋ฆผ์ผ ๊ฐ€๋Šฅ์„ฑ์ด ํฌ๋‹ค(๋‚ญ๋… ์ˆœ์„œ ๊ธฐ๋ก์ด ๋‹ค์‹œ ์ฝ์Œ, ๋‹จ์ •์€ ์•ˆ ํ•จ)
์—ํ”ผ์†Œ๋“œ ํ†ตํ™” 01 ์—ฌ์ • ์ „ํ™˜ 36~49 ms 02์—์„œ 26~37 ms โ€” 01์€ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ๊ฐ€ ๋ถˆ์•ˆ์ •ํ–ˆ๋‹ค

3. ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํฌ๊ฒŒ ๋Š˜๋ฆฐ ๊ฒƒ์€ ํ™”๋ฉด๋ณด๋‹ค ๋ฐ์ดํ„ฐ์™€ ์ด๋ฏธ์ง€์˜€๋‹ค

  • ์ง„์ž… ํ™”๋ฉด ๋””์ž์ธ(09-21) โ€” ๊ตญ๊ฐ€ ๋ชฉ๋ก 245๊ฐœ ยท SVG๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ +332 KB. ์ด ์ €์žฅ์†Œ์—์„œ ๊ฐ€์žฅ ํฐ ํ•œ ๋ฒˆ์˜ ์ฆ๊ฐ€๋‹ค.
  • ์Šคํ”Œ๋ž˜์‹œ ๋กœ๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜(09-21) โ€” WebP ๋””์ฝ”๋”ฉ์œผ๋กœ ๋ทฐ ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ์•ฝ 3 KB โ†’ 2.4 MB.
  • ์†์„ฑ ํ•˜๋‚˜(data-testid)๋Š” ๋ฒˆ๋“ค +19 B, ๋ฉ”๋ชจ๋ฆฌ 0 โ€” ์ž‘์€ ๋ณ€๊ฒฝ์€ ์ •๋ง ์ž‘๋‹ค.

4. ์žฌ์ง€ ๋ชปํ•œ ๊ตฌ๊ฐ„์ด ๋งŽ๋‹ค

ํ™”๋ฉด์— ๊ณ„์ธก์ (timing flag)์ด ์—†์œผ๋ฉด ๊ทธ ํ™”๋ฉด์— ๋“ค์–ด๊ฐ€๋Š” ๋น„์šฉ์„ ๋ชป ์žฐ๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌ๋Ÿฌ ๊ธฐ๋ก์ด ์—ฌ์ • ๋งต ์ฒซ ์ฐฉ์ง€๋งŒ ์Ÿ€๋‹ค.

  • ๋ชป ์žฐ ๊ณณ โ€” ์•Œ๋ฆผ push ยท ๋ฐ€์–ด์„œ ์‚ญ์ œ, ๋‚˜๊ฐ€๊ธฐ ๋ชจ๋‹ฌ, ์—ํ”ผ์†Œ๋“œ ํ‘œ์ง€ ยท ํ†ตํ™” ยท ์ตœ์ข… ํ…Œ์ŠคํŠธ ๊ตฌ๊ฐ„
  • 09-28๋ถ€ํ„ฐ ํ•™์Šต ํ™”๋ฉด์—๋Š” ๊ณ„์ธก์ ์ด ์ƒ๊ฒผ๋‹ค(์ฒซ ๊ธฐ์ค€ 18.9~41.4 ms)
  • 9-28 ์ดํ›„ 15ํŽธ์€ Release ๋นŒ๋“œ ์—†์ด ๋ฒˆ๋“ค ํฌ๊ธฐ๋งŒ ์Ÿ€๋‹ค โ€” ๋ Œ๋” ยท ๋ฉ”๋ชจ๋ฆฌ๋Š” ๋น„์–ด ์žˆ๋‹ค

5. ์ธก์ • ๋ฐฉ๋ฒ•์ด ํ”๋“ค๋ฆผ์„ ํ‚ค์šด ๋•Œ

  • 9-5~9-9 โ€” ๊ฐ™์€ ํ˜ธ์ŠคํŠธ ์•ฑ์—์„œ ๋ฒˆ๋“ค๋งŒ ๋ฐ”๊ฟ” ๋ฒˆ๊ฐˆ์•„ ์Ÿ€๋‹ค. ์ธก์ • ์ˆœ์„œ์™€ ์บ์‹œ์˜ ์˜ํ–ฅ์„ ๋–ผ์–ด ๋‚ด์ง€ ๋ชปํ•ด, ๋ฉ”์‹ ์ € ยท ์ „ํ™” ๊ธฐ๋ก ์—ฌ์„ฏ ํŽธ ๋ชจ๋‘ ใ€Œ๋ฐฉํ–ฅ ํŒ์ • ๋ถˆ๊ฐ€ใ€๋กœ ๋๋‚ฌ๋‹ค.
  • ๋นŒ๋“œ ์งํ›„ ์ฒซ ํšŒ์ฐจ๊ฐ€ ํฌ๊ฒŒ ๋А๋ฆฐ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋‹ค(64.7 ~ 101.6 ms). ์ฒซ ํšŒ์ฐจ๋ฅผ ๋ฒ„๋ฆฌ๊ณ  ์žฌ๋Š” ํŽธ์ด ๋‚ซ๋‹ค.
  • ์ด์ „ ์บก์ฒ˜ ํŒŒ์ผ์„ ๋‹ค์‹œ ์ฝ์–ด ๋ฒ„๋ฆฐ ํšŒ์ฐจ๊ฐ€ ์žˆ์—ˆ๋‹ค โ€” ๊ฐ’์ด ์ด์ „ ๊ธฐ๋ก๊ณผ ๋˜‘๊ฐ™์œผ๋ฉด ์˜์‹ฌํ•œ๋‹ค.