
[성능 개선] Next.js 프로젝트 LCP 최적화하기
2023. 5. 11. 00:51
프로그래밍/Next
[딜리버블] ← 해당 프로젝트에 적용한 내용입니다. LCP(Largest Contentful Paint)란? LCP는 웹의 성능을 측정하기 위한 대표적인 지표 중 하나입니다. 이름 그대로 페이지가 처음 로드를 시작한 시점부터 뷰포트내에 있는 가장 큰 이미지 또는 텍스트 블록이 렌더링 되는 시점까지 걸리는 시간을 의미합니다. 좋은 사용자 경험을 제공하기 위해서는 페이지가 처음으로 로딩된 후 2.5초 이내인 것이 좋다고 합니다. LCP를 측정하는 방법은 여러가지가 있지만 저는 크롬 브라우저 내 개발자 도구에서 사용할 수 있는 라이트 하우스라는 퍼포먼스 측정 도구를 사용하였습니다. (크롬 확장 프로그램 설치 필요) LCP 최적화 전 제가 개선하고자 하는 페이지는 딜리버블의 홈 페이지입니다. 홈의 상단에는 다음..