next 최적화

[nextJS] 성능 최적화 하기(lighthouse, 빌드 용량 개선)

💪메인페이지 최적화하기 현재 진행 중인 프로젝트 메인페이지 작업을 하고 나서 성능 검사를 하니 이미지가 많아서 그런지 좋지 않은 점수를 받고 있었다. LCP에서 좋지 않은 점수를 받고 있었고, TBT와 SI 역시 빠른 속도는 아니었다. 이에 대해 개선을 위한 최적화 작업을 진행해 보았다. lighthouse 측정 항목 FCP(First Contentful Paint): 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링 하는 데 걸리는 시간. LCP(Largest Contenful Paint): 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간 TBT(Total Blocking Time): 웹 페이지가 사용자의 입력에 응답하지 못하도록 차단된 시간 SI(Speed Index): 콘텐츠가 시..