공식 문서가 떠먹여주지만 못받아 먹던 LCP 개선 방법

 

프론트엔드 개발자라면 코어 웹 바이탈 개선(CWV) 은 당연히 들어봤을것이고 적용도 해보았을거라고 생각한다.

나도 단순 구현만 생각하던 시기에서 크게는 유저의 경험과 SEO를 생각하기 시작했고

직접 내 프로젝트에 적용해가며 배워보려한다.!

(이 글에서 코어 웹 바이탈 개선(CWV) 에 대한 효과나 장점 ,설명 등은 다루지 않으려 한다. 추후에 따로!)

 

---

 

LCP (Largest Contentful Paint)

LCP : 세가지 코어 웹 바이탈 중 하나이며 한글로 설명해보자면 페이지 내 가장 큰 렌더링 요소의 렌더링 시간이다.

 

측정은 페이지 처음 로드 시작점부터이며 

좋은 점수로는 2.5초 (2500ms) 내에 유저에게 전달되면 좋은 LCP이다.

 

(여담으로 같은 페이지여도 큰 덩어리가 먼저 보이면 사용자 경험이 올라간다고 한다.)

 

 

Google에서 알려주는 개선 방법

 

4단계로 나누어지며  2 4 1 3 순으로 영향을 미치는 최적화라고 한다.

1. 첫 바이트까지의 시간 (TTFB)
사용자가 페이지 로드를 시작한 시점부터 브라우저가 HTML 문서 응답의 첫 번째 바이트를 수신할 때까지의 시간

2. 리소스 로드 지연 
TTFB부터 브라우저가 LCP 리소스 로드를 시작하는 시점 사이의 시간

LCP 요소를 렌더링하는 데 리소스 로드가 필요하지 않은 경우 (예: 요소가 시스템 글꼴로 렌더링된 텍스트 노드인 경우) 이 시간은 0

 

3. 리소스 로드 기간

LCP 리소스 자체를 로드하는 데 걸리는 시간

LCP 요소를 렌더링하는 데 리소스 로드가 필요하지 않다면 이 시간은 0

 

4. 요소 렌더링 지연

LCP 리소스의 로드가 완료된 시점부터 LCP 요소가 완전히 렌더링될 때까지의 시간

간격이나 중복이 없으며 합산하여 전체 LCP 시간!

 

 

최적의 하위 카테고리 시간 

LCP 하위 부분	LCP 비율
첫 바이트 소요 시간	~ 40%
리소스 로드 지연	< 10%
리소스 로드 기간	~ 40%
요소 렌더링 지연	< 10%
전체	100%

 

 

 

리소스 로드 지연 제거

궁극적으로는 LCP가 최대한 빨리 로드 되도록 하는것이다.

 

LCP 리소스가 페이지가 로드되는 첫번째 리소스와 동시에 시작되게 하는것이 좋다고한다!

 

 

현재 내 프로젝트는 Next.js 로 진행하므로 적용시킨점은 아래와 같다.

 

priority가 true인 경우 이미지는 높은 우선순위 및 사전 로드로 간주된다고 한다.

추가로 Next.js Image는 자동으로 지연 로딩이 적용되어 있기에 true 일 경우 비활성화

 

 <Image
      src={productDetailData?.product?.image_url}
      alt={productDetailData?.product?.productName}
      fill
      style={{ objectFit: "contain" }}
      priority={true}
/>

 

 

 

요소 렌더링 지연 제거

목표는 LCP 요소가 리소스 로드가 완료된 후 즉시 렌더링이 되도록 하는 것이다.

 

주된 이유는 렌더링이 다른 이유로 차단되어 있기 때문이다.

현재 작성하면서 공부중이기에 해결방법은 추후에.... 살려주세요 여기에 갖혀있어요...

 

리소스 로드 시간 줄이기

 

리소스의 크기를 줄이거나 리소스의 이동 거리를 없애기

 

next.config.js에 최신 이미지 포맷 설정

Next는 자동적으로 webp를 지원한다고 한다.

avif의 경우에는 webp 보다 압축률이 우수하다고 한다.

const nextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    }
   }

 

추가로 aws S3에 등록된 이미지가 아시아/서울 인지 확인. 

 

 

첫 바이트 소요 시간 단축

목표는 초기 HTML을 최대한 빨리 제공하기.

내가 이해한 바로는 백엔드의 요소도 추가 되어잇어 까다로운 사항인거 같다.

 

 

---

 

위와 같이 LCP의 속성과 각 효율적 최적화 방법을 알아보았는데

꾸준히 성능 최적화에 대해 관심을 가지고 중간중간 체크하는 습관도 들여야할것같다.

하지만 내 플젝은 왜 안되지....

 

해결되면 해결법과 같이 돌아와야겠다.

 

🙏

 

참조:

https://nextjs.org/docs/pages/api-reference/components/image#priority
https://web.dev/articles/optimize-lcp?hl=ko

최대 콘텐츠 렌더링 시간 최적화  |  Articles  |  web.dev

 

Components: <Image> | Next.js