LCP 최적화 가이드: 이미지·CDN으로 SEO, Core Web Vitals 개선하기

Q1. LCP는 무엇인가요?

LCP(Largest Contentful Paint)는 웹 페이지 주요 콘텐츠가 완전히 표시되기까지 걸리는 시간으로, 사용자 체감 속도에 직접적인 영향을 미치는 지표입니다.

Q2. LCP를 최적화 해야하는 이유는 무엇인가요?

사용자 경험을 직접적으로 개선하고 검색 엔진 순위에 긍정적인 영향을 주기 위해 필요합니다. 월마트 연구소(Wallmart Labs)의 연구 결과에서는 전환된 사용자의 평균 페이지 로딩 시간은 3.22초, 이탈 사용자는 6.03초로 로딩 시간이 전환율의 직접적인 영향을 미치고 있는 것을 확인할 수 있습니다.

Q3. LCP가 느려지는 주요 원인은 무엇인가요?

비최적화된 이미지, 느린 서버 응답, CDN 미활용이 주요 원인입니다.

Q4. 이미지 최적화로 LCP를 개선할 수 있을까요?

네, 이미지의 포맷(WebP), 크기, 로딩 순서 전략을 조정하고 이미지 전용 CDN(Content Delivery Network) 을 활용해 전송 속도를 높이면 기존 대비 10~20배 정도의 로딩속도 개선이 가능합니다.

Q5. LCP 개선 후 효과는 어떻게 검증하나요?

PageSpeed Insights에서 LCP 수치를 측정하고 전후 데이터를 비교할 수 있습니다.

LCP 최적화: 로딩속도 개선은 전환율을 높인다

구글 리포트에 따르면 페이지 로딩속도가 빠르면 빠를 수록 사용자의 이탈율이 감소하는데요, 단순 로딩시간이 4초 증가했을 뿐인데, 이탈 확률이 90% 나 늘어난 것을 확인할 수 있습니다. 재미있게도 월마트 연구소에서도 내부 데이터를 통해 유사한 실험을 진행했는데, 전환된 사용자와 이탈한 사용자의 로딩속도를 비교해보니, 3.22초에서 6.03초로 무려 2배 차이가 존재하는 것을 확인할 수 있었습니다.

어려운 LCP(largest contentful paint)?

LCP(Largest Contentful Paint)는 웹 페이지가 사용자에게 “보인다”고 느껴지는 첫 순간을 수치로 표현한 지표입니다. 페이지가 로드되는 과정에서 가장 큰 콘텐츠 요소를 화면에 그릴 때 까지 걸리는 시간을 의미하며 보통 이미지, 영상, H1 태그 등으로 구성되어 있습니다.

지금 보고계신 위커프 블로그의 메인 페이지는 LCP 0.4s로 “우수한 기준”을 충족하는데요,

LCP의 측정 기준 (Google Core Web Vitals)

Google은 다음과 같은 기준으로 우수한 기준의 LCP를 평가합니다.

예를 들어, 메인 배너 이미지가 늦게 뜨는 페이지라면 전체 콘텐츠가 로딩되더라도 사용자는 “아직 안 떴다”고 느끼게 되어, LCP 점수 하락의 주요 원인으로 작용합니다.

느려지는 LCP 의 원인은?

구글 리서치에 따르면 대부분의 모바일 사이트는 7초 정도의 페이지 로딩 시간을 가진다고 합니다. 이는 우리의 핵심정보를 전달하기도 전에 대부분의 신규 사용자를 페이지 로딩 화면에서 잃게되는 것을 의미합니다.

이러한 LCP를 늦추는 요인은 크게 세 가지입니다.

1️⃣ 최적화되지 않은 이미지와 비디오

• 대부분의 느린 LCP 주요 원인입니다.

• 원본 크기의 JPEG, PNG를 그대로 사용하거나, 비디오를 사용하는 경우 로딩 시간이 급격히 늘어납니다.

• 특히 첫 화면에 위치한 Hero 이미지의 용량이 크면 클 수록 전체 페이지에 악 영향을 줍니다.

2️⃣ 서버 응답 지연 (TTFB)

• 서버 응답이 느리면 이미지 요청 자체가 늦게 시작됩니다.

• CDN이 없는 환경에서는 사용자와 서버의 네트워크 거리도 큰 영향을 미칩니다.

3️⃣ 렌더링 차단 리소스

• CSS나 JS가 Hero 이미지 렌더링을 지연시키면,

• 실제 콘텐츠는 로드돼도 브라우저가 “그리지 못하는” 상태가 됩니다.

LCP 개선을 위한 방법

1️⃣ 이미지 포맷 최적화

이미지 포맷 변경은 LCP 개선의 기본 단계입니다.

• JPEG → WebP 또는 AVIF로 변환하면 용량이 30~70% 줄어듭니다.

• <picture>와 srcset을 사용해 브라우저별로 최적화된 포맷을 제공할 수 도 있습니다.

<img src="/img/hero.webp" alt="Hero Image" loading="eager" />

2️⃣ 크리티컬 이미지 Preload

LCP 요소는 lazy-loading하면 오히려 역효과가 납니다.

첫 화면에 보이는 이미지는 반드시 즉시 로드되도록 설정해야합니다.

<link rel="preload" as="image" href="/img/hero.webp" />

Tip: Preload는 브라우저가 렌더링보다 우선적으로 요청하도록 지시하는 기능이에요.

3️⃣ Lazy Loading의 올바른 적용

모든 이미지를 lazy로 처리하면 LCP 측정 요소까지 늦어집니다. 따라서 스크롤 아래 이미지만 lazy 처리하고, 첫 화면(Above the Fold) 이미지는 loading="eager"로 지정하세요.

4️⃣ CDN 과 Edge Computing 활용

CDN(Content Delivery Network)은 정적 콘텐츠를 제공하는 네트워크로 서버와 사용자의 물리적 거리를 단축해 응답 속도를 개선합니다. 추가로 송신 속도가 빠른 캐싱서버에 이미지를 보관하기에 전 세계 어디에서든 빠른 이미지 송/수신을 보장합니다.

예시: AWS의 Cloudfront와 Lambda@Edge는 CDN과 Edge Computing을 직접 구축할 수 있습니다.

Weekerp Image는 CDN과 엣지컴퓨팅을 활용하여 별도 구축없이 WebP 포맷 변환, 사이즈 조정을 손쉽게 바꿀 수 있습니다.

위커프 사례, 개선 결과와 검증

테스트 환경

• 기존: 웹 서버(NextJS) 직출력, PNG 원본 이미지

• 개선: Weekerp Image CDN + WebP 변환 적용

비교적 용량이 적은 이미지를 통해 테스트 했는데요, 이미지 용량이 크면 클 수록 효과는 더욱 체감됩니다. 특히, 큰 이미지나 비디오의 경우 CDN 및 최적화는 웹 서버 트래픽을 안정시키고 서버 비용을 낮추는데 반드시 필요한 방법입니다.

테스트는 Weekerp Image 환경에서 진행했습니다.

• 위커프 이미지는 전 세계 400개 넘는 글로벌 엣지 포인트에서 빠른 속도 / 용량을 보장합니다.

• 사용하는 클라우드 스토리지와 연동하여 사용할 수 있어, 별도의 데이터 이전이 필요 없습니다.

• Weekerp Image는 AVIF/WebP 변환과 글로벌 캐싱을 통해 LCP 개선을 자동화합니다.

핵심 요약

• LCP 최적화는 Core Web Vitals 중 사용자 체감 속도를 대표하는 지표입니다.

• 이미지 포맷·Preload·CDN만으로도 대부분의 LCP를 50% 이상 단축할 수 있습니다.

• LCP 개선은 전환율, SEO, UX 세 마리 토끼를 모두 잡을 수 있는 고효율 방안입니다.

오늘은 웹사이트의 첫인상을 좌우하는 LCP에 대해서 알아봤는데요, 현대적인 웹사이트 일 수록 이미지나 비디오를 상단에 배치하는 경우가 많아, 더욱 중요해진 LCP 최적화 요소를 소개했습니다. 테크니컬 SEO는 정답이 있는 분야인 만큼, 효율적인 이미지 최적화 만으로 큰 성과를 얻을 수 있습니다.

다음 번에 더 유익한 글로 찾아올게요.