[Performance] 분석결과 페이지 JS 번들 및 렌더링 최적화 (/analysis-result)

[bae-suho]

문제 요약

• 불필요한 polyfill 포함으로 JS 번들 비대화
• 사용되지 않는 JS 코드 다수 로딩
• Google Fonts로 인한 네트워크 페이로드 과다
• 초기 렌더 시 CSS render-blocking 발생
• 마크다운 렌더 영역에서 CLS 발생
• 메인 스레드에서 긴 JS 태스크 발생

---

Lighthouse 주요 지표

• Legacy JavaScript
  • Estimated savings: 13.4 KiB

• Reduce unused JavaScript

  • Estimated savings: 56.9 KiB

• Avoid enormous network payloads

  • Total payload: 4,214 KiB

• CLS

  • Layout shift score: 0.028

• Avoid long main-thread tasks

  • Long task duration: 4,117 ms

• LCP Element render delay

  • 370 ms

---

원인 분석 (Lighthouse 기준)

Legacy JavaScript 포함

• ES6+ 환경에서도 불필요한 polyfill 포함

• 포함된 polyfill 목록:

  • Array.prototype.at
  • Array.prototype.flat, flatMap
  • Object.fromEntries
  • Object.hasOwn
  • String.prototype.trimStart, trimEnd

• 최신 브라우저 타겟 기준으로는 불필요

사용되지 않는 JS 코드 다수

• 공통 번들(e51847de5330bab1.js)에 여러 페이지용 코드 포함
• /analysis-result에서 사용되지 않는 로직까지 로딩
• code-splitting 부족

Google Fonts 네트워크 페이로드 과다

• Google Fonts CDN 총 전송량 약 3.9MB
• woff2 폰트 다수 다운로드
• 폰트 서브셋 미적용

Render Blocking CSS

• CSS chunk 2개가 초기 렌더링 차단
• 크기는 작으나 LCP 경로에 포함됨

Layout Shift 발생

• 마크다운 본문 렌더링 시 레이아웃 이동

• 원인 요소:

  • .page-module__IP15Jq__markdown

• 폰트 로딩 시점 또는 동적 콘텐츠 삽입 영향

메인 스레드 Long Task

• JS 실행 중 4초 이상 메인 스레드 점유
• 분석 결과 데이터 가공 및 렌더링 로직 의심
• 초기 렌더 이후 실행되어도 되는 로직이 동기적으로 처리됨

---

개선 작업 (Action Items)

JavaScript 빌드 최적화

• 브라우저 타겟 재정의 (browserslist 조정)
• 최신 브라우저 기준 polyfill 제거
• useBuiltIns: false 또는 selective polyfill 적용

Code Splitting 강화

• /analysis-result 전용 JS 번들 분리
• 공통 번들에서 분석 전용 로직 제거
• dynamic import 적극 활용

Google Fonts 최적화

• 필요한 weight만 명시
• font subset 적용
• self-hosting 또는 시스템 폰트 대체 검토

Render Blocking 최소화

• 비필수 CSS 분리
• critical CSS 검토

CLS 개선

• 마크다운 영역 최소 높이 지정
• 폰트 로딩 전 fallback 폰트 명시
• 동적 콘텐츠 삽입 시 공간 확보

메인 스레드 부하 감소

• 데이터 가공 로직 분리
• 초기 렌더 이후 실행하도록 useEffect 단계 분리
• 필요 시 Web Worker 검토

---

완료 기준 (Acceptance Criteria)

• Legacy JS 경고 제거
• 사용되지 않는 JS 감소 확인
• Lighthouse Performance 점수 개선
• CLS 0.01 이하
• Long main-thread task 제거 또는 50ms 이하로 분할
• Google Fonts 네트워크 전송량 대폭 감소

---

참고

• Lighthouse Insights:

  • Legacy JavaScript
  • Reduce unused JavaScript
  • Avoid enormous network payloads
  • Avoid long main-thread tasks
  • Layout shift culprits
  • Render blocking requests