2022년 11월 1일
LCP / INP / CLS를 현실적으로 줄이는 방법 (Next.js 기준)
core-web-vitalslcpinpclsnextjsperformance
Next.js 앱에서 LCP·INP·CLS를 줄이기 위해 이미지를 다루는 법, 클라이언트 JS 줄이는 법, 레이아웃 점프를 막는 패턴을 정리한 실전용 치트시트입니다.
1LCP는 “메인 콘텐츠가 언제 보이는지”로 이해하고, 히어로 영역을 먼저 최적화한다
2INP는 “클릭/입력 후 반응 속도”이므로, 전역 상태 남용과 무거운 위젯을 줄이는 게 핵심이다
3CLS는 이미지·위젯·폰트가 레이아웃을 밀어내지 않게 미리 공간을 예약하는 것으로 많이 해결된다
4Server Component로 정적인 섹션을 처리하고, 차트/에디터/대용량 테이블은 lazy-load로 뒤로 미룬다
5Lighthouse 같은 Lab 도구로 실수는 잡고, Field 데이터로 진짜로 손댈 페이지와 상호작용을 고른다