위시풀 LCP 성능 개선하기

성능 개선 전후 비교

Before

https://googlechrome.github.io/lighthouse/scorecalc/#FCP=1915&LCP=6555&TBT=3&CLS=0&SI=4875&TTI=8236&device=mobile&version=13.0.1

After

https://googlechrome.github.io/lighthouse/scorecalc/#FCP=1510&LCP=6835&TBT=0&CLS=0&SI=1510&TTI=6903&device=mobile&version=13.0.1

온보딩 페이지 성능 개선 (LCP 최적화)

📌 문제 상황

온보딩 페이지에서 Lighthouse 성능 측정 결과:

• **LCP : 9.5 s (**초기 로딩 시 렌더링 지연) 로 매우 낮은 결과가 나왔다.
• 주요 경고:
  • Render Blocking Resources
  • Reduce Unused JavaScript
  • Legacy JavaScript
  • Main Thread Blocking

첫 진입 페이지임에도 불구하고 초기 렌더링이 매우 느린 상태였다.

🔍 원인 분석

1. 온보딩 페이지 전체가 Client Component로 구성