로딩 성능

로딩 성능은 두 가지 판단으로 나뉩니다. **초기 화면에 필요한 것은 즉시 로딩(LCP 보호)**하고, **즉시 필요하지 않은 것은 지연 로딩(lazy)**합니다. 이 대비를 명확히 하는 것이 로딩 전략의 핵심입니다.

즉시 로딩과 지연 로딩의 경계

리소스는 초기 화면에서의 필요 여부로 나눕니다.

화면 진입 시 바로 보이는 요소는 즉시 로딩합니다.
스크롤 이후 노출되는 이미지와 컴포넌트는 지연 로딩합니다.
사용자 상호작용 이후에 필요한 요소는 지연 로딩합니다.

즉시 필요하지 않은 모든 리소스는 지연 로딩 대상이 됩니다.

LCP 요소는 보호한다

초기 화면 성능은 **LCP(Largest Contentful Paint)**를 기준으로 판단합니다. LCP는 단순한 성능 수치가 아니라, 사용자가 “화면이 로딩되었다”고 인식하는 기준입니다.

LCP 대상은 보통 다음 요소 중 하나입니다.

주요 히어로 이미지
첫 화면의 대표 콘텐츠 블록
가장 큰 텍스트 콘텐츠 영역

LCP 대상 요소는 의도적으로 설계하는 것을 원칙으로 합니다.

LCP 요소에는 다음을 적용합니다.

LCP 대상 요소는 즉시 로딩합니다.
지연 로딩을 적용하지 않습니다.
불필요한 스타일, 스크립트 의존성을 제거합니다.
화면 진입 시 바로 렌더링 가능해야 합니다.

LCP 요소는 최적화 대상이 아니라 보호 대상입니다.

지연 로딩의 목적

지연 로딩은 다음 목적을 가집니다.

초기 로딩 시간을 줄입니다.
불필요한 네트워크 사용을 방지합니다.
LCP, CLS 등 핵심 성능 지표를 개선합니다.
사용자 체감 속도를 향상시킵니다.

지연 로딩은 성능 최적화를 위한 선택이 아니라, 기본 설계 기준입니다.

이미지 로딩 기준

이미지는 역할에 따라 로딩 전략을 나눕니다.

정보 전달이나 주요 비주얼 이미지는 즉시 로딩합니다.
장식 이미지와 하위 콘텐츠 이미지는 지연 로딩합니다.
사용자 경험에 영향을 주지 않는 범위에서 적용합니다.

지연 로딩은 이미지 역할 정의 이후에 결정되어야 합니다.

LCP 대상이 이미지인 경우 다음을 고려합니다.

적절한 이미지 포맷을 사용합니다.
필요 이상의 해상도를 사용하지 않습니다.
반응형 이미지 전략을 적용합니다.
크기 정보(width, height)를 명시합니다.

즉시 로딩과 지연 로딩의 대비를 코드로 보면 이렇습니다. LCP 대상은 fetchpriority="high"로 우선순위를 올리고(필요하면 <link rel="preload">로 앞당깁니다), 그 외 이미지는 loading="lazy"로 지연합니다. 두 경우 모두 width/height를 명시해 레이아웃 이동(CLS)을 막습니다.

<img class="i_thumb" src="/hero.webp" alt="주요 히어로 이미지" width="1200" height="600" fetchpriority="high">
<img class="i_thumb" src="/thumb.webp" alt="하위 콘텐츠 이미지" width="320" height="200" loading="lazy">

이미지 LCP는 대부분 포맷과 로딩 전략으로 개선할 수 있습니다.

로딩 성능과 사용자 경험

로딩 전략은 성능을 이유로 사용자 경험을 해쳐서는 안 됩니다.

콘텐츠가 늦게 나타나는 느낌을 주지 않습니다.
레이아웃 이동(CLS)을 유발하지 않습니다.
로딩 상태가 필요한 경우 명확히 표현합니다.

성능 최적화는 항상 사용자 경험을 기준으로 판단합니다.

구조와 로딩 성능의 관계

로딩 성능 문제는 구조 문제로 접근합니다.

LCP 요소가 구조상 늦게 등장하지 않는가
불필요한 중첩으로 렌더링이 지연되지 않는가
상태 변경 이후에 렌더링되고 있지는 않는가

성능이 느리다면, 구조 설계를 먼저 점검합니다.

로딩 성능의 목적

로딩 성능은 점수 개선을 위한 작업이 아니라, 필요한 것만 필요한 시점에 제공하기 위한 기준입니다.

무엇을 즉시 로딩하고 무엇을 지연할지 명확히 나눌수록 UI는 더 빠르고 안정적으로 동작합니다.