가장 중요한 페이지 로딩 지표: Largest Contentful Paint(LCP) 이해하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *웹 개발자, 성능 최적화 엔지니어, UX/UI 디자이너**
- 난이도: 중급 이상 (성능 지표 분석 및 최적화 기술 요구)*
핵심 요약
- LCP(가장 큰 콘텐츠 렌더링 시간)는 사용자가 페이지에 가장 큰 요소가 보이는 시점으로, 사용자 경험에 직접 영향을 주는 핵심 성능 지표
- 고려 요소:
, 텍스트 블록 등 시각적 콘텐츠에 한정, 불투명 요소/배경 이미지/플레이스홀더는 제외 - 성능 기준: 2.5초 이하 목표, 75% 분위수로 측정 (모바일/데스크탑 차별화)
섹션별 세부 요약
1. LCP의 정의와 목적
- LCP는 사용자가 페이지의 가장 큰 요소를 보는 시점으로, 페이지 로딩 속도의 주관적 지표
- 목적: 사용자 경험 향상을 위한 크리티컬 성능 지표로, 첫 번째 콘텐츠 렌더링 시간을 기준으로 판단
- 사용자 인식: 요소가 보이기 시작하는 시점으로, 이미지/비디오/텍스트 모두 적용
2. LCP에 고려되는 요소
- 포함 요소:
내(포스터 이미지 또는 첫 프레임 시간 중 빠른 시간 기준)url()로 로드된 배경 이미지 (CSS 그라디언트 제외)- 텍스트 블록 (예:
,,) - 제외 요소:
- 투명도 0 요소, 뷰포트 전체 커버 요소, 플레이스홀더 이미지
- CSS 마진/패딩/보더는 무시
3. LCP 요소의 크기 계산 방식
- 보이는 영역 기준으로 계산 (뷰포트 외부/클립된 부분은 제외)
- 이미지 크기: 가시 크기 또는 내재 크기 중 작은 값 기준
- 텍스트 요소: 모든 텍스트 노드를 포함하는 최소 직사각형 기준
- CSS 스타일: 마진/패딩/보더는 무시
4. LCP의 측정 방식
- 브라우저 성능 API를 통해
PerformanceEntry로 기록 - 업데이트 조건:
- 더 큰 요소가 렌더링 완료 (예: 히어로 이미지 로딩)
- DOM에 새로운 더 큰 요소 추가
- 정지 조건: 사용자 인터랙션(스크롤/클릭/키보드 입력) 발생 시
5. LCP 분석과 최적화 전략
- 분석 시점: 사용자 인터랙션 전 마지막 LCP 기록만 사용
- 최적화 방법:
- 2.5초 이하 목표, 75% 분위수로 측정 (모바일/데스크탑 구분)
- 크리티컬 CSS/JS 최적화, 이미지 압축, 프레임워크 로딩 순서 조정
- Lighthouse 같은 도구로 측정 및 분석
6. 예시 분석
- 인스타그램: 로고가 초기 로딩 후 가장 큰 요소 유지
- 구글 검색 결과: 텍스트 블록이 이미지/로고 전에 렌더링되어 LCP 기준
- 동적 콘텐츠: 새로운 요소 추가 시 LCP 요소 변경 가능
결론
- LCP 최적화는 사용자 경험을 향상시키는 핵심 전략으로, 2.5초 이하 목표 달성과 75% 분위수 측정을 통해 모바일/데스크탑 사용자 모두를 고려해야 한다.
- Lighthouse 도구를 활용해 크리티컬 CSS/JS, 이미지 로딩 순서, 프레임워크 초기화를 분석하고, 뷰포트 내 보이는 요소에 집중하는 것이 중요하다.