[Performance] 분석 로딩 페이지 성능 개선 (/loading-analysis)

[bae-suho]

문제 요약

• Lighthouse Performance 점수 저하의 대부분이 /loading-analysis에서 발생
• LCP가 네트워크가 아닌 렌더 지연(Render Delay) 중심으로 발생
• 불필요한 JS, 폰트 payload, 렌더 블로킹 리소스가 초기 화면을 지연시킴

---

Lighthouse 주요 지표

• FCP: 21.6s
• LCP: 22.1s
• LCP Element: h1.page-module__lFg74q__title

• Element Render Delay: 1,770ms

• Total Network Payload: 4,034 KiB

  • Google Fonts: 약 3.8MB

• Unused JS: 약 28.4 KiB

• Legacy JS Polyfills: 약 13.4 KiB

---

원인 분석 (Lighthouse 항목 기준)

1. LCP Render Delay 발생

• LCP 자체의 TTFB는 20ms로 정상
• 실제 병목은 h1 텍스트 렌더가 JS 실행 이후에 지연
• 초기 화면조차 React hydration / JS 완료를 기다림

2. Render Blocking CSS 존재

• 다음 CSS 파일들이 초기 렌더를 블로킹

  • /chunks/b48fd9e05437f172.css
  • /chunks/d5dae9138b68264a.css

• 크기는 작지만 critical path 상에 존재

3. 과도한 Google Fonts Payload

• Google Fonts woff2 약 3.7MB 다운로드
• 분석 로딩 페이지의 UX 목적 대비 과도한 폰트 리소스 사용
• 폰트 로딩 완료 후 텍스트 렌더 → LCP 지연 가능성

4. 불필요한 Legacy JavaScript 포함

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

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

• JS 다운로드 + 파싱 시간 증가

5. 초기 번들에 사용되지 않는 JS 포함

• /chunks/e51847de5330bab1.js

  • Transfer: 68.6 KiB
  • Unused: 약 28.4 KiB

• 분석 로직 또는 후속 단계 코드가 초기 번들에 포함됨

---

개선 작업 (Action Items)

렌더링 구조 개선

• 초기 화면(UI)과 분석 로직을 명확히 분리

• h1 타이틀 및 로딩 UI를 JS 의존 없는 구조로 변경

  • 가능하면 SSR 또는 정적 HTML로 우선 렌더

• 분석 API 호출 및 연산 로직은 useEffect 이후 실행

LCP 최적화

• LCP 대상 요소(h1)가 즉시 렌더되도록:

  • Suspense fallback 내부에서 제거
  • hydration 이전에도 표시 가능하도록 구조 수정

• LCP 요소에 불필요한 스타일/폰트 의존 제거

CSS 로딩 최적화

• 로딩 페이지 전용 최소 CSS 분리
• Critical CSS inline 적용 검토
• 나머지 스타일은 non-blocking 로드

폰트 최적화

• /loading-analysis 페이지에서 Google Fonts 사용 최소화

  • 시스템 폰트 또는 subset 적용

• 필요 시:

  • font-weight 최소화
  • font-display: swap 명시

• 로딩 페이지에서는 브랜드 폰트 미사용 고려

JavaScript 번들 최적화

• Legacy browser 지원 범위 재검토

  • ES6+ 기준으로 transpile target 상향

• 불필요한 polyfill 제거

• 분석 관련 JS는 dynamic import로 분리

• 초기 번들에서 unused JS 제거

기타

• favicon 사이즈 축소 또는 캐시 전략 개선
• FileChooser API 사용 여부 검토 (bfcache 비활성화 원인)

---

완료 기준 (Acceptance Criteria)

• Lighthouse Performance 85 이상
• LCP 3s 이하
• LCP Render Delay 500ms 이하
• /loading-analysis 초기 렌더 시 JS 미실행 상태에서도 타이틀 표시
• Google Fonts payload 대폭 감소 또는 제거
• Unused JavaScript Lighthouse 경고 제거

---

참고

• Lighthouse Insights:

  • Network dependency tree
  • Render blocking requests
  • Legacy JavaScript
  • Reduce unused JavaScript
  • Avoid enormous network payloads
  • LCP breakdown