검토와 최적화

성능 코드 리뷰

Next.js 앱의 최적화는 파일 크기만이 아니라 렌더링 시점, 네트워크 요청, 사용자 체감 속도를 함께 봅니다.

next/image

이미지 비용 점검

hero, 카드 썸네일, 상세 이미지를 나눠 priority와 sizes가 실제 레이아웃과 맞는지 봅니다.

next/font

폰트 CLS 점검

폰트 변수 적용 위치와 fallback 폭 차이가 레이아웃 이동으로 남는지 비교합니다.

next/script

스크립트 로딩 전략

광고, 분석, 채팅 스크립트가 필요한 시점보다 일찍 실행되지 않게 strategy를 고릅니다.

데이터 캐싱

데이터 신선도 검토

fetch 캐시와 재검증 시간이 실제 운영 데이터 변경 주기와 어긋나지 않는지 확인합니다.

성능 측정

측정 도구로 병목을 확인한 뒤 바꿉니다

번들 분석기와 Lighthouse 결과를 보고 이미지, 폰트, 스크립트 최적화 우선순위를 정합니다.

리뷰 항목

next/font렌더링 전환 흔적은 Lighthouse CLS와 실제 스크린샷을 같이 봅니다.
next/scriptNetwork와 Performance 탭에서 실행 시점, blocking 시간, 재시도 요청을 확인합니다.
데이터 캐싱stale 데이터가 사용자 행동을 잘못 이끌 수 있는 화면부터 캐시 정책을 좁힙니다.