LCP(최대 콘텐츠 포함 페인트)를 수정하기 위한 4가지 전문가 전략 웹 세미나 요약

게시 됨: 2023-10-28

핵심 웹 바이탈이 도입된 지 3년이 지났지만 전 세계 웹사이트 중 무려 33%가 여전히 악명 높은 LCP(Largest Contentful Paint)라는 까다로운 기준을 통과하는 데 어려움을 겪고 있습니다.

Google PageSpeed Insights에서 핵심 웹 바이탈 평가 실패

이 문제를 해결하기 위해 우리는 Google과 제휴하여 4부작으로 구성된 웹 세미나 시리즈인 "귀사의 비즈니스를 위한 핵심 웹 바이탈"을 시작했습니다. LCP 최적화를 마스터하는 데 전념하는 세 번째 에피소드를 이제 YouTube에서 재생할 수 있습니다.

이 세션에서는 Google의 최고 인재인 Barry Pollard와 Adam Silverstein이 NitroPack의 CTO인 Ivailo Hristov와 함께 다음 사항에 대해 논의합니다.

LCP 관련 최신 개발 및 변경 사항
LCP를 최적화하기 가장 어려운 핵심 웹 바이탈 지표로 만드는 이유
열악한 LCP 점수를 개선하기 위한 라이브 기술

웹 세미나 하이라이트와 LCP를 "실패"에서 "통과"로 수정하기 위한 실행 가능한 체크리스트를 읽어보세요.

LCP(콘텐츠가 포함된 최대 페인트)란 무엇입니까?

콘텐츠가 포함된 최대 페인트(LCP)는 페이지가 처음 로드되기 시작한 시점을 기준으로 뷰포트 내에서 가장 큰 요소의 렌더링 시간을 측정하는 핵심 웹 바이탈 지표입니다. 이는 사용자 관점에서 인지된 로딩 성능을 이해하는 데 도움이 되므로 사용자 경험에 특히 중요합니다.

지연된 LCP는 페이지가 기본 콘텐츠를 로드하는 데 너무 오랜 시간이 걸려 사용자가 느리다고 인식하게 됨을 나타낼 수 있습니다. LCP 점수를 측정하려면 다음 기준점을 사용하세요.

2.5초 미만이 좋음
2.5 - 4.0초는 개선이 필요함을 의미합니다.
4.0초 이상이면 불량으로 간주됩니다.

LCP 요소로 간주되는 것은 무엇입니까?

웹페이지의 구조와 콘텐츠에 따라 다양한 요소가 가장 큰 콘텐츠 요소로 간주될 수 있습니다.

다음 중 하나는 가장 큰 콘텐츠 요소 후보로 분류될 수 있습니다.

이미지: 여기에는 img 태그를 사용하여 로드된 이미지와 뷰포트 내에 표시되는 CSS를 통해 배경으로 사용되는 이미지가 포함됩니다.
svg 요소 내부의 이미지 요소: SVG에 이미지 요소(예: 이미지 태그를 통해)가 포함된 경우 해당 요소는 LCP로 보고될 수 있습니다.
비디오: 비디오의 포스터 이미지(비디오가 재생되기 전에 표시되는 이미지)는 LCP일 수 있습니다. 포스터 이미지가 없고 사용자 상호 작용 없이 비디오가 자동 재생되는 경우 비디오 프레임 자체가 LCP일 수도 있습니다.
애니메이션 이미지: 예를 들어 애니메이션 GIF의 첫 번째 프레임입니다.
블록 수준 텍스트 요소: 이는 제목(h1, h2 등), 단락(p), 목록(ul, ol 등) 등과 같은 텍스트 요소와 관련됩니다. 뷰포트에서 가장 많은 공간을 차지하는 텍스트 블록이 LCP 후보가 될 수 있습니다.
CSS를 통해 로드된 배경 이미지가 있는 요소: div 또는 section 과 같은 요소에 CSS의 background-image 속성을 사용하여 설정된 배경 이미지가 있고 이 이미지가 표시되는 가장 큰 콘텐츠인 경우 LCP일 수 있습니다.

웹페이지에서 LCP 요소를 찾는 방법

내부적으로 Chrome 브라우저는 페이지 콘텐츠가 렌더링될 때 다양한 LCP 요소를 식별합니다. 즉, 초기 페이지 로드 중에 LCP 요소는 스크롤 없이 볼 수 있는 부분이 로드되어 가장 큰 요소가 표시될 때까지 변경됩니다.

중요 사항: 다양한 화면 크기에 따라 동일한 웹페이지의 LCP 요소가 달라질 수 있습니다.

페이지 로드 중 브라우저가 식별한 콘텐츠가 포함된 최대 페인트

다행히 Chrome DevTools 및 WebPageTest와 같은 도구를 사용하면 특정 페이지 로드 시나리오에 대한 특정 LCP 요소를 쉽게 식별할 수 있습니다.

1. Chrome DevTools 사용

페이지 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하세요.
"성능" 탭으로 이동하여 페이지를 새로고침하세요.
페이지가 로드되면 이벤트 타임라인이 표시됩니다.
"타이밍" 섹션에서 "LCP" 표시를 찾아 아래로 스크롤하여 "요약" 탭에서 자세한 내용을 확인하세요.
"관련 노드" 링크 위로 마우스를 가져가면 페이지의 LCP 요소가 강조 표시됩니다.

DevTools를 사용하여 웹페이지에서 콘텐츠가 포함된 가장 큰 페인트 요소를 찾는 방법

2. WebPageTest 사용

www.webpagetest.org에 해당 웹페이지의 URL을 입력하고 테스트를 시작하세요.
테스트가 완료되면 "페이지 성능 측정항목" 탭으로 이동하여 "콘텐츠가 포함된 최대 페인트"를 클릭하세요.
LCP 요소를 강조하는 스크린샷을 포함하여 LCP에 대한 세부 정보를 확인할 수 있습니다.

WebPageTest를 사용하여 웹페이지에서 LCP 요소를 찾는 방법

콘텐츠가 포함된 최대 페인트(LCP)의 새로운 기능: 업데이트 및 개발

가장 중요한 핵심 웹 바이탈 측정항목이 도입된 이후 엣지 케이스와 웹 성능 발전을 해결하기 위해 지속적으로 업데이트되었습니다.

Chrome 브라우저의 LCP 변경사항

Chrome은 이미 몇 가지 변경을 거쳤으며, 요소의 "콘텐츠가 풍부한" 정도에 따라 요소를 제외하고 포함하는 데 중점을 두었습니다.

Chrome 86 - 불투명도 0 이미지가 제외되었습니다.
Chrome 88 - 전체 화면 이미지(일반적으로 배경 이미지)가 제외되었습니다.
Chrome 112 - 저엔트로피 이미지가 제외되었습니다(일명 매우 간단한 이미지, 즉 큰 파란색 사각형).
Chrome 116 - 동영상 포함(첫 번째 프레임)
Chrome 116 - 첫 번째 프레임을 사용하도록 GIF가 변경되었습니다.
Chrome 116 - 이미지 로딩 실험(이제 브라우저는 일부 이미지를 미리 "보고" LCP 요소 후보가 될 수 있는 이미지를 규정합니다)

WordPress의 LCP 변경 사항

2021년에 WordPress 핵심 성능 팀이 도입된 이후 WordPress는 플랫폼을 더욱 성능 친화적으로 만드는 데 많은 투자를 해왔습니다.

WordPress 6.2 및 6.3 버전은 엄청난 개선을 보여 블록 테마의 경우 로드 시간이 27%, 클래식 테마의 경우 18% 더 빨라졌습니다. 모바일 WordPress 웹사이트의 전체 CWV 통과율은 4월의 30.47%에 비해 34.71%를 기록했습니다.

Core Web Vitals 통계를 통과하는 WordPress 웹사이트 수

가장 큰 콘텐츠가 포함된 페인트에 더 나은 영향을 미치는 WP 핵심 성능 팀의 변경 사항은 다음과 같습니다.

버전 5.8부터 기본 WebP 이미지 형식 지원 도입
업로드된 이미지 자동 변환
일반적인 페이지 로드에 대한 데이터베이스 쿼리 감소
고주파 코드 경로의 미세 조정
캐싱 계층 개선
자동 네이티브 HTML 지연 로딩 개선
LCP 요소에 자동 fetchpriority=”high” 도입
개발자가 헤더 스크립트에 대한 비동기 또는 지연 전략을 지정하는 스크립트 API "전략" 도입

콘텐츠가 포함된 최대 페인트가 실패한 이유는 무엇입니까? (일반적인 함정)

LCP가 여전히 통과하기 가장 어려운 CWV 지표인 이유가 있습니다. 그리고 이것이 반드시 최적화 전략일 필요는 없습니다.

함정 #1: LCP 점수를 완전히 통제할 수는 없습니다.

LCP는 초기 로딩 프로세스에서 많은 일이 발생하고 모든 단계에 영향을 미칠 수 없다는 점에서 복잡합니다.

방문자가 단축 링크가 포함된 광고를 통해 귀하의 웹사이트를 방문하면 사용자가 귀하의 웹페이지 콘텐츠를 보기도 전에 꽤 많은 리디렉션이 발생할 수 있습니다. 또한 네트워크 강도도 큰 역할을 합니다. 특히 웹 사이트에 연결 속도가 느린 국가에서 방문자가 방문하는 경우 더욱 그렇습니다.

“어느 정도 통제할 수 없는 일이기 때문에 짜증스러울 수도 있습니다. 그냥 가서 마술처럼 이런 것들을 고칠 수는 없습니다. 문제 자체가 무엇인지 이해해야 합니다. 문제가 귀하의 페이지에 있는 것인지, 아니면 사람들이 귀하의 사이트에 접속하는 방식에 관한 것인지 더 많은 문제가 있는지 이해해야 합니다.”

— 배리 폴라드, @Google Chrome 팀

함정 #2: 웹사이트 디자인이 인구통계와 일치하지 않습니다.

Core Web Vitals 측정항목의 핵심 아이디어로 돌아가면 LCP는실제 사용자가 웹페이지의 초기 로드를 어떻게 경험하는지 측정하는 것입니다.

모든 부가기능을 제공하는 고급 웹사이트를 구축하는 것은 훌륭합니다. 하지만 오래된 장치와 느린 네트워크 연결로 인해 방문자가 웹사이트에 액세스할 수 없다면 어떻게 될까요? 복잡한 웹 디자인은 더 많은 HTTP 요청과 느린 로딩 시간을 의미합니다.

다른 모든 방법이 효과가 없는 것 같을 때 인구 통계 및 장치 유형 사용 측면에서 기본 사항을 다시 검토하면 귀하와 귀하의 팀이 다음을 수행하는 데 도움이 될 것입니다.

보다 관련성이 높은 UX 디자인 변경 사항 도입
테스트 환경에서 사용자 조건을 더 잘 에뮬레이트합니다.
최근 데이터를 기반으로 최적화하고 회귀 방지

"웹 사이트를 다시 생각해야 할 수도 있습니다. 웹 사이트를 사용하는 사람이 누구인지, 네트워크 상태가 어떤지, 일반적인 장치 등을 파악해야 합니다."

— 이바일로 흐리스토프(Ivailo Hristov), @NitroPack

함정 #3: LCP 병목 현상을 찾아내기 위해 RUM 데이터 도구를 활용하지 않고 있습니다.

프로덕션 전 문제를 파악하려면 실험실 데이터가 필수적이지만 RUM 데이터는 프로덕션 후의 실제 사용자 경험에 대한 전체적인 보기를 제공합니다.

RUM(실제 사용자 모니터링) 도구는 실제 시나리오에서 실제 사용자가 웹 사이트를 어떻게 경험하는지에 대한 통찰력을 제공합니다. 이러한 도구는 다양한 장치 기능, 네트워크 연결 및 상호 작용 측면에서 실제 사용자가 경험한 웹 페이지의 성능을 추적하고 분석합니다.

RUM 데이터 도구를 선택할 때 데이터 세분성이 핵심입니다. CrUX 데이터 보고서는 훌륭한 공개 정보 소스이지만 그 특성과 개인 정보 보호 요구 사항으로 인해 현재 설정보다 더 깊은 수준의 데이터를 제공할 수 없습니다.

사내 원격 측정 및 데이터 수집에 의존하는 것 외에도 고려할 수 있는 다른 도구(유료 및 무료)는 다음과 같습니다.

New Relic Browser :최종 사용자 경험에 대한 통찰력을 제공하고 JavaScript 오류를 모니터링합니다. 자세한 성능 타임라인을 제공하고 병목 현상을 식별하는 데 도움이 됩니다.
Dynatrace:프런트엔드부터 백엔드까지 엔드투엔드 모니터링을 제공합니다. 스택 전체에서 성능 문제를 자동으로 발견합니다.
AppDynamics:전체 성능 데이터를 실시간으로 캡처하여 기업이 복잡한 애플리케이션 환경을 시각화할 수 있도록 합니다.
Pingdom:가동 시간 모니터링으로 잘 알려져 있지만 여러 글로벌 위치에서 사용자 경험에 대한 통찰력을 얻을 수 있는 RUM 기능도 제공합니다.
Boomerang:실제 사용자가 경험한 페이지 로드 시간을 측정하는 오픈 소스 RUM 도구입니다. 하드 및 소프트 페이지 로드와 단일 페이지 앱에 대한 측정항목을 캡처할 수 있습니다.
Perfume.js:개발자가 웹 페이지의 성능을 실시간으로 측정하는 데 도움이 되는 작은 웹 성능 라이브러리입니다.

결론적으로, 성능을 360도 뷰로 보려면 실험실 데이터를 프로덕션 전 최적화에 사용하고 RUM 데이터를 프로덕션 후 통찰력에 사용하는 것이 가장 좋습니다.

함정 #4: 타사 솔루션의 성능을 추적하지 않습니다.

분석, 광고, 위젯, 채팅 시스템, 소셜 미디어 통합 등 다양한 기능을 위해 당사가 타사 솔루션에 의존한다는 것은 비밀이 아닙니다.

이러한 외부 스크립트 및 리소스는 필수 기능이나 수익 창출 방법을 제공하는 동시에 LCP 점수에 부정적인 영향을 미칠 수 있으며, 특히 다음과 같은 영향을 미칠 수 있습니다.

도메인 외부에서 발생하는예기치 않은 가동 중지 시간, 지연 및 비효율적인 코드 업데이트
로드 시간을 증가시키는 과도한 네트워크 요청 (특히 비동기식으로 로드되지 않거나 지연되는 경우)
사이트의 렌더링 프로세스를 중단하고 종료율을 높이는 데 기여하는 렌더링 차단 리소스

"귀하(사이트 소유자)는 해당 서비스에 대한 의존도가 매우 높으므로 해당 서비스의 성능을 추적하고 있는지 확인해야 하며, 성능이 좋지 않은 경우 경보를 울려야 합니다."

— 이바일로 흐리스토프(Ivailo Hristov), @NitroPack

사용 중인 타사 솔루션이 성능 표준을 충족하지 못하는 경우 해당 솔루션을 기술 스택에서 제외하거나 개발자에게 연락하여 빠른 개선을 추진하세요.

콘텐츠가 포함된 최대 페인트를 수정하는 방법(단계 및 전문가 기술)

LCP의 복잡한 특성을 고려할 때 단순히 별도의 최적화 기술을 나열하는 것은 비생산적입니다.

대신, LCP 값을 서로 겹치거나 간격이 없는 4개의 하위 부분으로 나누고 총체적으로 전체 LCP 시간을 합산하겠습니다.

첫 번째 바이트까지의 시간(TTFB)
리소스 로드 지연
리소스 로드 시간
요소 렌더링 지연

단계별로 최대 규모의 만족스러운 페인트 최적화

#1: 첫 번째 바이트까지의 시간 단축(TTFB)

TTFB를 좋은 LCP 점수를 위한 기준으로 생각하십시오. 예를 들어 TTFB가 1초인 경우 LCP를 아무리 최적화하더라도 LCP는 1초보다 낮아질 수 없습니다.

TTFB를 낮추려면 웹사이트의 고성능 생태계를 보장하는 다음과 같은 몇 가지 필수 요소가 필요합니다.

좋은 호스팅 제공업체 선택하기
리디렉션 방지
웹사이트 캐싱
CDN(콘텐츠 전송 네트워크) 사용

#2: 리소스 로드 지연 제거

이상적으로는 LCP 요소가 웹 페이지에서 로드된 첫 번째 리소스와 동시에 로드를 시작하기를 원합니다.

LCP 요소 사전 로딩 기술

이를 달성하려면 LCP 요소를 정확히 가져올 시기를 브라우저에 알려주는 우선순위 기술을 사용해야 합니다.

link rel="preload" 이미지 및 글꼴 (귀하의 경우에 따라 다름)
웹페이지에 대해 활성화한 지연 로딩에서 LCP 요소를 제거하세요.

#3: 리소스 로드 지연 제거

LCP 시간을 줄이려면 리소스를 브라우저에 전달하는 데 걸리는 시간을 줄이는 것이 필수적입니다. 여기에는 잘 알려진 여러 기술의 조합이 도움이 됩니다.

이미지 압축 및 조정
WebP와 같은 최신 이미지 형식을 사용하세요.
글꼴의 파일 크기를 줄이세요
일반적으로 LCP 영역(예: 스크롤 없이 볼 수 있는 부분)의 동영상은 피하세요.

#4: 요소 렌더링 지연 제거

LCP 점수를 효과적으로 낮추려면 LCP 요소가 로드가 완료된 후 즉시 렌더링되어야 합니다.
렌더링 지연을 제거하여 LCP 점수 감소

다른 요소가 렌더링을 차단하거나 지연하지 않도록 하려면 다음을 수행할 수 있습니다.

중요한 CSS 생성
렌더링 차단 JavaScript를 연기하거나 완전히 제거합니다.
사용자 정의 글꼴이 준비될 때까지 시스템 글꼴을 사용하도록 브라우저에 지시한 다음 로드되면 교체하도록 글꼴 표시 속성을 설정합니다.

최대 규모의 콘텐츠가 포함된 페인트 최적화: 이전 및 이후 예

데모 웹 사이트와 랩 환경을 사용하여 LCP 점수 13초로 시작했으며 위에서 논의한 모든 최적화를 적용한 후 LCP 점수를 1.9초로 낮출 수 있었습니다.

참고로 2.5초 미만의 LCP 점수는 "양호"로 간주되며 핵심 웹 바이탈 평가에서 "통과"로 표시됩니다.

LCP 최적화 전: 13초 LCP 값

최적화 전 LCP 점수가 나쁨

LCP 최적화 후:1.9초 LCP 값

최적화 후 좋은 LCP 점수

Google 및 NitroPack에 대한 최대 규모의 콘텐츠가 포함된 페인트 FAQ

정확히 동일한 크기의 이미지가 여러 개 있는 경우 LCP는 무엇입니까?

콘텐츠가 포함된 최대 페인트는 전체 요소를 주요 후보로 간주합니다. 이미지가 동일한 컨테이너에 있으면 모든 이미지가 가장 큰 콘텐츠로 간주됩니다. 그렇지 않은 경우 일반적으로 먼저 나타나는 이미지(페이지의 위쪽)가 LCP로 간주됩니다.

모바일과 데스크톱에 서로 다른 LCP 이미지가 있는 경우 어떤 것을 최적화해야 합니까?

두 가지 모두를 최적화하는 것이 중요하지만 대부분의 사용자가 유입되는 플랫폼에 집중하세요. 모바일을 통해 사이트를 방문하는 사용자가 늘어나면 모바일 최적화에 우선순위를 두세요. 결정을 내리려면 항상 사이트 분석을 확인하세요.

귀하의 웹 사이트가 글로벌이 아닌 로컬인 경우 CDN이 정말로 필요합니까?

사이트의 리소스가 국가 간 수백 킬로미터 이상 이동할 필요가 없는 경우 CDN은 선택 사항으로 간주될 수 있습니다. 그러나 한 가지 중요한 세부 사항은 CDN 서비스를 건너뛰면 들어오는 모든 트래픽이 원본 서버로 이동하여 일반적으로 성능이 저하되거나 극단적인 경우 서버 가동 중지 시간이 발생한다는 것입니다. 결론적으로 저렴한 옵션을 위해 호스팅과 함께 제공되는 CDN을 활성화하는 것이 좋습니다.

광고를 통해 사이트를 방문하면 LCP 시간에 영향을 미치나요?

단축 링크(유료 캠페인에서 일반적)를 사용할 때 사용자는 일반적으로 페이지에 도달하기 전에 적어도 한 번의 리디렉션이 발생할 때까지 기다립니다. 이것은 모두 LCP 점수에 포함됩니다. 이는 통제할 수 없는 일이지만 랜딩 페이지가 최대한 빨리 사용자의 관심을 끌 수 있도록 간단하고 최적화되어 있는지 확인할 수 있습니다.

속도가 느린 국가에서 트래픽이 많이 발생하면 어떻게 되나요?

인터넷 연결이 느린 지역에서 상당한 트래픽이 발생하는 경우 콘텐츠 전송 네트워크(CDN)와 같은 성능 최적화를 구현하여 해당 지역에 콘텐츠를 더 빠르게 제공하는 것이 필수적입니다. 또한 핵심 고객에게 더 나은 서비스를 제공하기 위해 UX 및 웹 디자인을 단순화하는 것을 고려해보세요.

큰 글꼴을 사용하면 LCP에 영향을 줍니까?

웹 글꼴 파일이 클수록 사용자가 웹 사이트를 로드하려고 할 때 웹 사이트에서 더 많은 요청이 발생합니다. 작업 속도를 높이고 LCP 시간을 개선하려면 글꼴 하위 설정, 스크롤 없이 볼 수 있는 스타일 미리 로드, 글꼴 표시 속성 사용과 같은 글꼴 로딩 기술을 사용하세요.

모바일에서 전체 크기 배경 이미지로 LCP를 최적화하는 가장 좋은 방법은 무엇입니까?

일반적으로 전체 크기 배경 이미지는 LCP 후보로 간주되지 않습니다(Chrome 88 업데이트 기준). 배경 이미지가 실제로 모바일의 LCP 요소임을 이미 식별했다고 가정하면 다음을 수행할 수 있습니다.

이미지를 압축하고 WebP 형식을 사용합니다.
로드 프로세스에서 우선 순위를 지정하도록 브라우저에 알리려면 미리 로드하세요.
background-size:cover와 같은 CSS 속성을 사용하여 이미지 크기가 적절하게 조정되는지 확인하세요.
적응형 이미지 크기 조정을 사용하여 이미지를 사용자의 뷰포트에 맞게 자동 조정