📈 성능 개선

개선 방안

---

소스 코드 최적화

• ✅ 코드 스플리팅 - 자바스크립트 번들을 페이지별로 나눠서 필요할 때만 로드되도록 하여, 초기 로딩 시간을 줄입니다.
• ✅ 트리 쉐이킹 - 사용되지 않는 코드와 라이브러리를 제거하여 불필요한 파일을 줄입니다.
• 중복된 코드 제거 - 공통 모듈이나 유틸리티 함수들이 중복되어 있지 않도록 리팩토링하여 코드를 경량화합니다.

이미지 최적화

• 이미지 포맷 최적화 - WebP 같은 최신 이미지 포맷을 사용하여, 이미지 파일 크기를 줄이고 로딩 시간을 단축합니다.
• ✅ 지연 로딩(Lazy Loading) - 페이지에 나타나지 않는 이미지나 컨텐츠는 지연 로딩을 통해 필요할 때만 로드되도록 최적화합니다.

폰트 최적화

• ✅ 폰트 포맷 최적화 - WOFF2 같은 최신 포맷을 사용하여 폰트 파일 크기를 줄이고, 압축률을 높여 로딩 시간을 줄입니다
• ✅ 필요한 글리프만 포함 - 서브셋 폰트를 사용해 필요한 글리프만 포함된 폰트 파일을 제공하여 폰트 파일 크기를 줄입니다.

Sentry Preconnect / Font Preload

• ✅ Sentry Preconnect - Sentry 같은 외부 모니터링 도구의 리소스에 대해 preconnect를 설정하여 DNS 조회 및 TLS 핸드셰이크 시간을 줄입니다.
• ✅ Font Preload - 중요한 폰트를 미리 로드함으로써 페이지가 렌더링되기 전에 폰트가 준비되어, FOUT 및 FOIT 현상을 줄입니다.

애니메이션 로직 개선

• ✅ 애니메이션 성능 최적화 - 애니메이션의 CSS 속성 중 GPU 가속을 활용할 수 있는 속성을 주로 사용하도록 최적화하여 트리거할 수 있는 리플로우를 최소화합니다.
• JavaScript 애니메이션 로직 최적화 - requestAnimationFrame을 사용해 애니메이션을 렌더링하고, 프레임 드롭을 방지합니다.

링크

https://github.com/woowacourse-teams/2024-coduo/pull/510

https://github.com/woowacourse-teams/2024-coduo/pull/517

성능 최적화 결과

---

정량 기반 지표 (Quantity Based Metrics)

자바스크립트 번들 크기

---

	개선 전	개선 후
JS 번들 크기	322kB	191kB (main.js + 325.js)

리소스 파일 크기

---

	개선 전	개선 후
폰트 크기	2302kB	134.7kB
가장 큰 이미지 파일	180kB	5.5kB

시간 기반 지표 (Timing Based Metrics)

LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint)

---

메인 페이지

	개선 전	개선 후
LCP	200ms	129ms
CLS	0	0
INP	-	40ms

페어룸 온보딩 페이지

	개선 전	개선 후
LCP	200ms	194ms
CLS	0	0
INP	-	32ms

페어룸 페이지

	개선 전	개선 후
LCP	-	171ms
CLS	0	0
INP	-	8ms

렌더링 지표 (Rendering Metrics)

Frame Drop

---

• 프레임 드롭 발생률 0%
• 모든 페이지에서 프레임 드롭 발생하지 않음.

규칙 기반 지표 (Rule Based Metrics)

Lighthouse Performance 점수

---

랜딩 페이지

메인 페이지

페어룸 온보딩 페이지