1. LCP

LCP는 사용자가 처음 페이지에 접근했을 때 화면에 표시되는 가장 큰 이미지나 동영상 혹은 텍스트 블록이 렌더링되는데 소요되는 시간을 의미함

Tip
이전에는 LCP 대신 DOMContentLoaded나 FCP(First Contentful Paint)를 통해 측정하기도 하였으나, 개념이 다소 복잡하고, 실질적인 의미가 떨어진다는 이유로 잘 사용되지 않고 있음

1. 이상적인 LCP 지표

높은 사용자 경험을 제공하기 위해서는 페이지가 처음 로딩되기 시작한 이후 2.5초 이내에 LCP 요소가 화면에 표시(Rendering)되는 것이 좋음

한줄 요약
이상적인 LCP 지표는 2.5초 이내로, 가장 큰 컨텐츠가 2.5초 이내에 표시되어야 함

2. LCP 요소 

LCP 요소 혹은 LCP 리소스란 LCP 지표의 측정 대상으로 포함되는 HTML 엘리먼트 를 의미함

2-1. 대표적인 LCP 요소

LCP API 에 명시된 바와 같이, 대표적인 LCP 요소들은 다음과 같음

• <img>
• <svg> 엘리먼트 내 <image>
• <video>, 영상을 표시할 때 사용
• url() 함수를 통해 로딩된 배경 이미지
• block 속성을 가진 HTML 엘리먼트(주로 텍스트 노드)

❌ LCP 요소로 고려되지 않는 것

1. 투명도(opacity)가 0인 엘리먼트
   → 사용자에게 보이지 않기 때문
2. 전체 화면을 덮는 엘리먼트
   → 컨텐츠라기 보다는 배경일 확률이 높기 때문
3. placeholder 이미지
   → 페이지의 실제 컨텐츠를 반영하지 않을 확률이 높기 때문