LCP 최적화
SLUR UI System에서는
초기 화면 성능을 판단하는 핵심 지표로
**LCP(Largest Contentful Paint)**를 중요하게 다룹니다.
LCP는 단순한 성능 수치가 아니라,
사용자가 “화면이 로딩되었다”고 인식하는 기준입니다.
LCP를 바라보는 관점
Section titled “LCP를 바라보는 관점”SLUR UI System에서는 LCP를 다음과 같이 해석합니다.
- LCP는 첫 화면 경험의 질을 나타냅니다.
- LCP 대상 요소는 명확히 정의되어야 합니다.
- 성능 최적화는 LCP를 기준으로 우선순위를 결정합니다.
LCP가 느리다면,
다른 성능 최적화는 의미를 가지기 어렵습니다.
LCP 대상 요소 정의
Section titled “LCP 대상 요소 정의”LCP 대상은 보통 다음 요소 중 하나입니다.
- 주요 히어로 이미지
- 첫 화면의 대표 콘텐츠 블록
- 가장 큰 텍스트 콘텐츠 영역
SLUR UI System에서는
LCP 대상 요소를 의도적으로 설계하는 것을 원칙으로 합니다.
LCP 최적화 기본 원칙
Section titled “LCP 최적화 기본 원칙”LCP 최적화는 다음 원칙을 따릅니다.
- LCP 대상 요소는 즉시 로딩합니다.
- 지연 로딩을 적용하지 않습니다.
- 불필요한 스타일, 스크립트 의존성을 제거합니다.
- 화면 진입 시 바로 렌더링 가능해야 합니다.
LCP 요소는
최적화 대상이 아니라 보호 대상입니다.
이미지 기반 LCP 최적화
Section titled “이미지 기반 LCP 최적화”LCP 대상이 이미지인 경우 다음을 고려합니다.
- 적절한 이미지 포맷을 사용합니다.
- 필요 이상의 해상도를 사용하지 않습니다.
- 반응형 이미지 전략을 적용합니다.
- 크기 정보(width, height)를 명시합니다.
이미지 LCP는
대부분 포맷과 로딩 전략으로 개선할 수 있습니다.
구조와 LCP의 관계
Section titled “구조와 LCP의 관계”SLUR UI System에서는
LCP 문제를 구조 문제로 접근합니다.
- LCP 요소가 구조상 늦게 등장하지 않는가
- 불필요한 중첩으로 렌더링이 지연되지 않는가
- 상태 변경 이후에 렌더링되고 있지는 않은가
LCP가 느리다면,
구조 설계를 먼저 점검합니다.
LCP 최적화의 목적
Section titled “LCP 최적화의 목적”LCP 최적화는
점수 개선을 위한 작업이 아니라,
사용자가 빠르게 콘텐츠를 인지하도록 돕기 위한 기준입니다.
SLUR UI System은
초기 화면에서의 명확한 구조와 빠른 렌더링을 통해
체감 성능이 좋은 UI를 만드는 것을 목표로 합니다.