react 프로젝트 성능 개선

기다리는 것을 좋아하는 사람은 없습니다. 사용자의 50% 이상이 로드하는 데 3초 이상 걸리는 경우 웹사이트를 이탈합니다.

IT’S TO SLOW!

“최초 화면이 열리는 시간이 너무 느리다!”는 PM님과 고객의 소리에 힘입어.. (SPA는 원래 느려요ㅠㅠ) 성능 개선을 계획하였다.

1. 먼저 목표와 대상을 정하고, 이를 측정할 도구와 지표를 정의하였다.

2. 또한 TO-DO 리스트를 만들어, 성능 개선을 차례차례 진행하여 각각의 성능을 측정해보았다.

TL;DR

• First Contentful Paint(FCP): 28% 개선 (2.5초 ➡ 1.8초)
• Time To Interactive(TTI): 17% 개선 (6.3초 ➡ 5.2초)

---

성능 개선 계획

구분	내용
목표	최초 로딩 시간 단축
대상	초기화면(오늘세종엔 + α) 구경
성능 측정 지표	FCP (First Contentful Paint), TTI (Time to Interactive)
성능 측정 도구	Lighthouse

TO-DO

TBD

일지

TBD

결과

지표가 아래와 같이 개선되었다!

• First Contentful Paint(FCP): 28% 개선 (2.5초 ➡ 1.8초)
• Time To Interactive(TTI): 17% 개선 (6.3초 ➡ 5.2초)

Lighthouse 성능 측정

1. 최초(개선 전)
   • FCP: 2.5초
   • TTI: 6.3초
2. 미사용 소스 제거
   • FCP: 2.0(🔻0.5)초
   • TTI: 5.8(🔻0.5)초
3. code splitting
   • FCP: 1.8(🔻0.2)초
   • TTI: 5.2(🔻0.6)초

PS

• SI 프로젝트에서도 성능 개선을 고민해 볼 기회가 있다.(운이 많이 좋아야 함..)
• 하지만 안타깝게도 많은 시간을 할애할 순 없다. (납기준수 === 돈; 그리고 성능개선은 필수가 아니라는 인식..)
• 또한 계획한 시간 동안에도 개선에만 온전히 집중할 순 없다.. (언제 발생할지 모를 고객의 요구사항..)
• TBD 시스템 설명: cra 기반..