GSC에서 Core Web Vitals의 LCP 'More Than' 오류 수정하기

Google은 검색 콘솔에서 Core Web Vitals라는 새로운 보고서를 발표했습니다. 이는 속도 보고서를 대체하며 2021년에는 순위 요소로 간주될 것입니다. Core Web Vitals는 페이지 속도, HTTPS, 모바일 친화성 및 기타 페이지 내 요소와 함께 순위 요소로 고려됩니다.

Core Web Vital은 페이지의 UX 및 UI 요소를 고려하여 세 가지 핵심 메트릭에 대한 페이지의 평균을 찾습니다.

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

문제를 해결하기 위한 특정한 코드 수정은 없지만, 웹사이트를 최적화하여 오류를 해결할 수 있습니다. 여기서는 웹 페이지의 Largest Contentful Paint (LCP) ‘ More Than’ 문제를 해결하는 데 도움이 될 수 있는 몇 가지 방법을 나열하겠습니다.

LCP란 무엇인가요?

Largest Contentful Paint (LCP) 메트릭은 뷰포트 내에서 가장 큰 콘텐츠 요소의 렌더링 시간을 보고합니다. 간단히 말해, 페이지가 로드되기 시작한 후 주요 요소가 보이는 화면에 로드되는 데 걸리는 시간입니다.

좋은 사용자 경험을 제공하기 위해 사이트는 페이지가 로드되기 시작한 후 첫 2.5초 이내에 Largest Contentful Paint가 발생하도록 노력해야 합니다.

LCP에 고려되는 요소는 무엇인가요?

Largest Contentful Paint에 고려되는 요소의 유형은 다음과 같습니다;

• 요소
• 요소 내의 요소
• 요소
• url() 함수를 통해 로드된 배경 이미지가 있는 요소
• 텍스트 노드 또는 기타 인라인 텍스트 요소 자식을 포함하는 블록 수준 요소.

높은 LCP의 원인은 무엇인가요?

• 느린 서버 응답 시간
• 렌더링 차단 JavaScript 및 CSS
• 느린 리소스 로드 시간
• 클라이언트 측 렌더링

높은 LCP를 수정하기 위해 웹사이트를 최적화하는 방법은 무엇인가요?

좋은 응답 시간과 낮은 대기 시간 비율을 가진 좋은 호스팅을 사용하세요. 서버를 최적화하고 Cloudflare, jsDelivr, Statically와 같은 무료 제3자 CDN을 사용하여 정적 자산을 빠르게 제공하세요. WordPress에서 작업 중이라면, 작업을 도와줄 수 있는 여러 플러그인이 있습니다.

JPEG XR, JPEG 2000 또는 WebP와 같은 차세대 이미지 형식으로 압축된 이미지를 사용하세요. 이러한 현대적인 형식은 이미지 로드를 50% 가속화하는 데 도움이 됩니다. WordPress에는 이미지를 자동으로 압축하고 변환하는 데 도움이 되는 몇 가지 플러그인이 있습니다. 또한, WP-Photon과 같은 이미지 CDN을 사용하여 서버 대역폭을 줄이고 사이트 속도를 높이세요.

정적 HTML 페이지를 로드하기 위해 캐시 서비스를 사용할 수 있습니다. 이는 모든 요청에서 변경되지 않으며, 캐싱은 불필요하게 재생성되는 것을 방지할 수 있습니다. 캐시 플러그인은 서버에 생성된 HTML의 복사본을 저장하고 페이지가 요청될 때 서버가 캐시 로드를 해제하여 Time to First Byte (TTFB)를 줄이고 리소스 사용을 최소화할 수 있습니다.

Cloudflare와 같은 서비스를 사용하여 브라우저 백그라운드에서 서비스 작업자를 실행하고 서버의 요청을 가로챌 수 있습니다. 이들은 페이지의 전체 HTML 캐시를 가져와 HTML 페이지를 캐시 우선으로 제공하여 로딩 시간을 크게 줄일 수 있습니다.

좋은 LCP를 위해 웹사이트를 최적화할 때 고려해야 할 다른 중요한 사항은 다음과 같습니다.

• 렌더링 차단 JavaScript 및 CSS 제거
• 비핵심 CSS 지연 로드
• 리소스 최소화
• 중요한 리소스 미리 로드

LCP를 줄이고 페이지 로드를 더 빠르게 하여 더 나은 UX를 제공하는 방법에 대한 자세한 가이드는 공식 Web.Dev 사이트에서 확인할 수 있습니다.

결론: GSC에서 Core Web Vitals의 도입과 그것이 순위 요소로 간주됨에 따라, LCP는 장치의 뷰포트에서 가장 큰 요소가 로드되는 데 걸리는 시간을 기록하기 때문에 매우 중요한 메트릭입니다. 낮은 LCP를 위해 사이트를 최적화하는 몇 가지 잠정적인 수정 및 솔루션을 제공했습니다.

Fix LCP ‘More Than’ Error in Core Web Vitals on GSC에 대한 의견이 있으시면 아래 댓글란에 자유롭게 남겨주세요. 또한, 비디오 튜토리얼을 위해 DigitBin YouTube 채널을 구독해 주세요. 감사합니다!