가장 큰 콘텐츠가 있는 페인트(LCP) 및 WordPress에서 이를 개선하는 방법

게시 됨: 2023-07-06

이 게시물은 Core Web Vitals에 대한 3부작 시리즈의 첫 번째 게시물입니다. 여기에서 우리는 웹 사이트 품질에 대한 Google의 새로운 척도의 핵심인 세 가지 메트릭을 각각 살펴보고자 합니다. 첫 번째 중지: LCP(Largest Contentful Paint) 및 WordPress에서 LCP를 개선하는 방법.

지금까지 Core Web Vitals는 Google에서 중요한 순위 요소입니다. 사용자 경험에 대한 측정으로 방문자가 귀하의 사이트에서 즐거운 시간을 보냈는지 여부를 결정하고 귀하가 검색 엔진에서 얼마나 잘하는지에 영향을 미칩니다. 그런 이유로 그것들을 올바르게 이해하는 것이 중요합니다.

그렇게 하는 데 도움이 되도록 앞서 언급한 대로 Core Web Vitals의 각 구성 요소를 자세히 살펴보고자 합니다. 아래에서 정확히 무엇이고 SEO에 중요한 이유에 대해 설명합니다. 그런 다음 WordPress 사이트에서 가장 큰 콘텐츠가 포함된 페인트 중 첫 번째인 A 등급 교육을 받습니다. 게시물에서는 LCP가 무엇인지, 측정 방법, 측정해야 하는 수치, 필요한 경우 WordPress 사이트에서 이 메트릭을 개선하는 방법에 대해 설명합니다.

핵심 성능 보고서란 무엇입니까?

핵심 웹 바이탈의 상징인 심장 모니터

먼저, 이 주제가 완전히 생소한 경우 기본 사항부터 시작하겠습니다. Core Web Vitals가 정확히 무엇입니까?

즉, Google이 2020년 5월에 도입한 웹 페이지의 로드 속도, 상호 작용 및 시각적 안정성을 측정하는 사용자 중심 측정 항목입니다. 웹 사이트 소유자와 개발자가 사용자 경험이 얼마나 좋은지 이해하는 데 도움이 됩니다. 페이지는 개선이 필요한 영역을 제공하고 식별합니다.

핵심 성능 보고서는 세 가지 측정항목으로 구성됩니다.

  1. 최대 콘텐츠 페인트(LCP)
  2. 첫 번째 입력 지연(FID)
  3. 누적 레이아웃 이동(CLS)

이들 각각은 개별적으로 측정되고 다양한 요인의 영향을 받기 때문에 이 기사 시리즈를 작성하고 있습니다.

핵심 성능 보고서가 SEO에 중요한 이유는 무엇입니까?

우리가 이 점을 강조하는 이유는 매우 간단합니다. Google은 자주 방문하는 방문자에게 즐거운 경험을 제공하는 페이지의 우선순위를 정하고 싶다는 점을 분명히 했습니다. 핵심 성능 보고서는 이를 측정하는 방법입니다.

결과적으로 지금까지 웹 페이지를 평가하고 순위를 매기는 Google 알고리즘의 핵심 구성 요소입니다. 그 문제에 대한 자신의 페이지를 인용하려면:

핵심 성능 보고서는 모든 웹페이지에 적용되고 모든 사이트 소유자가 측정해야 하며 모든 Google 도구에서 표시되는 성능 보고서의 하위 집합입니다.

따라서 페이지의 성능을 높이려면 웹 디자인, EAT, 콘텐츠 권한, 페이지 최적화, 사이트 속도 및 모바일 친화성과 같은 항목뿐만 아니라 이러한 UX 지표도 살펴봐야 합니다. 그렇지 않으면 Google에서 불이익을 받고 순위가 좋지 않을 수 있습니다.

또한 Core Web Vitals를 개선하면 더 나은 사용자 참여, 더 긴 사이트 방문, 궁극적으로 전환 및 수익 증가로 이어질 수 있습니다. 따라서 웹사이트를 최적화하면 SEO에 도움이 될 뿐만 아니라 비즈니스 결과도 향상됩니다.

공습 경보 신호? 그런 다음 첫 번째 메트릭을 다루겠습니다.

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

가장 큰 만족스러운 페인트의 상징으로 벽에 페인트 롤

LCP는 우리가 보고자 하는 첫 번째 Core Web Vitals Metric입니다. 사용자가 페이지 로드를 시작한 후 뷰포트에서 가장 큰 요소(브라우저 창에 표시되는 요소)가 화면에 완전히 렌더링되는 데 걸리는 시간을 측정합니다. 페이지에서 상당량의 공간을 차지하는 이미지, 비디오, 텍스트 블록 또는 기타 요소가 될 수 있습니다.

LCP는 사용자가 웹 페이지의 주요 콘텐츠에 얼마나 빨리 액세스할 수 있는지를 반영하기 때문에 중요한 지표입니다. 느린 LCP 점수는 사용자가 페이지 읽기 또는 상호 작용을 시작하기 전에 더 오래 기다려야 할 수 있음을 의미합니다. 이것은 좌절감으로 이어지고 단순히 떠나게 만들 수 있습니다. 아니 부에노.

최대 콘텐츠 페인트는 어떻게 계산되나요?

페이지의 LCP 점수는 뷰포트에서 가장 큰 요소가 완전히 렌더링되는 데 걸리는 시간(초)을 추적하여 결정됩니다. 그러나 메트릭은 계산을 위해 특정 유형의 요소만 고려합니다.

  • <img> 요소, 이미지를 의미
  • <svg> 문서 내의 <image> 요소
  • 미리보기 이미지를 표시하는 <video> 요소
  • url() 함수를 통해 배경 이미지를 로드하는 요소
  • 텍스트 콘텐츠가 있는 블록 및 인라인 수준 요소

요컨대 영상과 본문입니다. 동시에 LCP는 다음과 같이 사용자가 "내용이 풍부하다"고 생각하지 않는 구성 요소를 무시합니다.

  • 사용자에게 보이지 않는 불투명도가 0인 요소
  • 전체 화면을 덮고 콘텐츠가 아닌 배경으로 기능할 가능성이 있는 요소
  • 페이지의 진정한 목적을 반영하지 않을 가능성이 있는 정보가 거의 없는 자리 표시자 이미지 또는 이미지

LCP를 위해 사이트를 테스트하는 방법

WordPress 웹사이트에서 Largest Contentful Paint를 테스트하는 방법에는 여러 가지가 있습니다. 위에서 언급한 것처럼 이제 모든 Google 도구의 측정항목이므로 여기에서 시작할 수 있습니다.

예를 들어 웹사이트를 PageSpeed ​​Insights에 입력하면 LCP 값과 테스트 통과 여부를 확인할 수 있습니다.

pagespeed 통찰력의 lcp 메트릭

또한 Google Search Console의 핵심 성능 보고서에서 가장 큰 콘텐츠 페인트 관련 문제 및 기타 문제에 대한 정보를 찾을 수 있습니다.

Google 검색 콘솔의 lcp 문제

Chrome 개발자 도구에서도 이를 보여줍니다(자세한 내용은 아래 참조). 또한 Chrome용 Web Vitals 및 Firefox용 SpeedVitals와 같은 지표를 측정할 수 있는 브라우저 애드온이 있습니다. 마지막으로 개발자라면 웹 바이탈 JavaScript 라이브러리와 같은 보다 기술적인 솔루션을 사용하고 싶을 수 있습니다.

이상적인 LCP 값은 무엇입니까?

LCP를 측정하는 방법을 배운 후 다음 질문은 좋은 값이 정확히 무엇인가일 것입니다. 어떤 기준으로 촬영해야 합니까?

Largest Contentful Paint의 경우 매직 넘버는 2.5초입니다. LCP 점수가 2.5초 미만이면 좋은 것으로 간주됩니다. 문제의 페이지는 좋은 사용자 경험을 제공할 가능성이 높습니다. 점수가 2.5초에서 4초 사이이면 Google에서 개선이 필요한 것으로 간주합니다. 4초가 넘으면 불량으로 간주됩니다.

LCP 규모

그래서 예쁘게 자르고 말립니다. 검색 거인이 당신에게 무엇을 기대하는지 정확히 알고 있으므로 궁금해할 필요가 없습니다.

가장 큰 콘텐츠가 있는 페인트를 개선하는 방법(WordPress에서)

테스트 후 귀하의 사이트가 위의 벤치마크를 충족하지 못한다는 것을 알게 되더라도 두려워하지 마십시오. 필요한 경우 이 게시물의 나머지 부분에서는 가장 큰 콘텐츠가 포함된 페인트 값을 개선하는 방법에 대해 설명합니다.

좋은 소식은 여러분이 할 수 있는 일이 많다는 것입니다. 반면에 많은 요인이 LCP에 영향을 미칠 수 있으므로 이를 수정하는 것이 빠른 수정이 아닌 경우가 많습니다. 전체 페이지 로딩 프로세스를 단계별로 살펴봐야 합니다. 그럼 그렇게 해볼까요?

가장 큰 콘텐츠가 있는 페인트 요소 찾기

LCP 값을 더 좋게 만드는 첫 번째 단계는 LCP 요소가 정확히 무엇인지 알아내는 것입니다. 무엇에 집중해야 할지 모른다면 어떻게 전달을 개선할 수 있을까요?

PageSpeed ​​Insights를 사용하여 사이트를 측정하는 경우 진단 섹션의 페이지 아래에 있는 LCP 요소가 실제로 무엇인지 알려줍니다.

pagespeed 통찰력의 lcp 요소

Chrome의 브라우저 개발자 도구에서 성능 테스트를 실행하면 타임라인에도 표시되고 페이지의 LCP 요소도 강조 표시됩니다. LCP를 클릭한 다음 관련 노드 아래의 파일 위로 마우스를 가져갑니다.

크롬 개발자 도구를 통해 lcp 요소 찾기

로드 프로세스를 여러 부분으로 나누기

다음으로 Largest Contentful Paint를 최적화하기 위해 프로세스를 여러 단계로 나누는 데 도움이 됩니다. 위에서 언급한 바와 같이 모든 경우에 적용되는 획일적인 접근 방식은 없습니다. 사이트에서 수정해야 할 사항을 찾으려면 다른 각도에서 살펴봐야 합니다. Google에서 제안하는 단계는 다음과 같습니다.

  • TTFB – 사용자가 페이지를 요청한 후 HTML의 첫 번째 바이트를 수신할 때까지의 시간과 같이 "첫 번째 바이트까지의 시간"을 의미합니다.
  • 리소스 로드 지연 – 페이지 파일(HTML 및 CSS)을 수신하고 LCP 리소스 자체가 로드되기 전까지의 시간 범위입니다.
  • 리소스 로드 시간 – LCP 리소스가 로드되는 단계입니다.
  • 요소 렌더링 지연 – 마지막으로 LCP 요소를 로드하고 완전히 렌더링하는 사이의 시간입니다.

Largest Contentful Paint를 이런 방식으로 분해하면 여러 단계에 집중하고 개별적으로 개선할 수 있습니다.

사이트 호스팅 및 아키텍처 최적화

TTFB 및 리소스 부하 지연을 개선하기 위한 조치입니다.

방문자가 사이트 데이터를 받는 속도는 여러 요인에 따라 달라집니다. 우선 서버가 있습니다. 귀하의 사이트가 한 페이지 웹사이트와 같이 매우 작은 공간을 차지하더라도 느린 웹 서버로 인해 여전히 크게 지연될 수 있습니다. 또 다른 요소는 운영 체제, 테마, 플러그인 등과 같이 사이트를 구성하는 구성 요소입니다.

결과적으로 이러한 모든 요소를 ​​개선하면 가장 큰 콘텐츠가 포함된 페인트를 최적화하는 데 도움이 됩니다. 방법은 다음과 같습니다.

  • 양질의 호스팅에 투자 — 앞서 언급한 바와 같이 웹 서버는 큰 요소이며 호스팅 제공업체는 중요한 고려 사항입니다. 가능한 경우 공유 호스팅을 피하고 트래픽에 따라 호스팅 계획을 세우십시오. 또한 청중과 가까운 서버에 사이트를 두십시오.
  • 고품질 테마 및 플러그인 사용 — 좋은 소스에서 사이트 구성 요소를 가져와 잘 프로그램되고 간결하며 좋은 지원을 받고 있는지 확인하십시오. 최소한의 플러그인을 사용하여 사이트에서 HTTP 요청을 줄이십시오.
  • 사이트를 최신 상태로 유지 — WordPress 코어 및 플러그인/테마 업데이트는 성능 수정을 포함한 개선 사항과 함께 제공됩니다. 가장 최신의 최고의 정보를 얻기 위해 최신 상태를 유지하세요.

이를 통해 방문자가 가능한 한 빨리 사이트 데이터를 받을 수 있습니다. 서버에 문제가 있는지 확인하려면 웹 사이트 속도 테스트 방법을 배우는 것이 도움이 됩니다. 또한 여러 리디렉션을 피하고 앞서 언급한 서버 요청을 살펴보십시오.

콘텐츠 전송 네트워크(CDN) 사용

첫 번째 바이트까지의 시간을 개선하는 또 다른 방법은 콘텐츠 전송 네트워크(CDN)를 사용하는 것입니다. 사용자와 웹 사이트 데이터를 수신하는 장소 사이의 거리를 줄이는 데 도움이 됩니다. 이렇게 하면 로딩 시간이 단축될 수 있습니다.

콘텐츠 전송 네트워크 cdn 다이어그램
이미지 출처: Kanoha, CC BY-SA 3.0, Wikimedia Commons를 통해

Jetpack의 Site Accelerator와 같은 외부 서버에만 이미지를 저장하는 특수 CDN도 있습니다. 이미지는 종종 콘텐츠가 포함된 가장 큰 요소이기 때문에 이치에 맞습니다. CDN은 때때로 우리가 지금 이야기할 이미지 최적화 기술을 구현합니다.

이미지 및 웹 글꼴 최적화

이제 리소스 로드 시간을 줄이는 기술을 사용하고 있습니다. 이전에 주의를 기울였다면 이것이 LCP 리소스가 브라우저에 전달되는 속도라는 것을 알게 될 것입니다. 여기서 중요한 고려 사항은 시각 자료입니다.

이미지는 전달하는 정보의 과잉으로 인해 텍스트보다 크기가 더 큰 경향이 있기 때문에 종종 가장 큰 콘텐츠 객체가 됩니다. 이러한 이유로 리소스 로드 시간을 줄이기 위해 집중해야 하는 것 중 하나는 리소스를 최적화하는 것입니다.

  • 올바른 크기 사용 — 페이지에 표시되는 크기의 이미지만 사용하십시오. 그렇지 않으면 방문자가 필요 이상으로 로드하게 됩니다. 이것은 종종 WordPress 미디어 옵션을 레이아웃에 필요한 크기로 정확하게 업로드하거나 설정하기 전에 이미지 크기를 조정하는 것을 의미합니다. 썸네일 재생성 플러그인은 사이트에 이미 있는 이미지의 크기를 최적화하는 데 도움이 될 수 있습니다.
  • 최신 이미지 형식으로 이동 — 모든 이미지 형식이 동일하게 생성되는 것은 아닙니다. 시각적 개체를 가능한 한 작게 만들려면 이전 형식보다 차지하는 공간이 더 작은 webp 또는 avif와 같은 최신 형식을 사용하세요.
  • 이미지 압축 — 압축이란 불필요한 데이터를 제거하는 것을 의미합니다. 이미지를 업로드하기 전에(예: TinyPNG/JPG 또는 RIOT를 통해) 또는 Smush 또는 Optimole과 같은 WordPress 플러그인을 사용하여 자동으로 이 작업을 수행할 수 있습니다.
  • 지연 로드 이미지가 화면에 표시되지 않음 — 지연 로드는 아직 브라우저에 표시되지 않는 이미지를 로드하지 않음을 의미합니다. 이렇게 하면 많은 시간을 절약할 수 있습니다. 즉시 표시되어야 하는 이미지는 제외해야 합니다.

이미지 최적화에 대한 기사에서 이에 대해 자세히 알아보십시오. 그 동안 웹 글꼴의 크기와 수를 줄이십시오. 실제로 필요한 항목만 로드하고 웹 글꼴을 로컬에서 호스팅하는 것을 고려하십시오.

캐싱 및 압축 설정

캐싱과 압축은 모두 사이트 파일을 더 빠르게 로드하여 일반적으로 웹 사이트 속도를 높이는 기술입니다. 리소스 로드 지연과 로드 시간 모두에 도움이 될 수 있습니다.

첫 번째 방법은 HTML 문서를 미리 렌더링하고 완성된 버전을 서버에 저장하여 방문자가 사이트를 보고 싶어할 때마다 이 프로세스를 수행할 필요가 없도록 합니다.

워드프레스 캐싱 회로도

두 번째는 더 빨리 전송할 수 있도록 웹 사이트 파일의 크기를 줄이는 것을 의미합니다. Gzip 압축 또는 최신 Brotli 압축을 사용하여 후자를 수행할 수 있습니다. 파일 축소와 결합하여 공간을 덜 차지하고 더 빠르게 로드할 수 있습니다.

자동 최적화 또는 많은 WordPress 캐싱 플러그인과 같은 플러그인은 위의 모든 작업을 수행할 수 있으며 사이트에서 가장 큰 콘텐츠가 포함된 페인트를 개선하는 쉬운 방법입니다.

렌더링 차단 리소스 제거

이제 요소 렌더링 지연을 개선하고 있습니다. 페이지 로딩 속도와 LCP 요소의 전달을 최적화했더라도 요소 자체가 페이지에 표시되는 데 오랜 시간이 걸리면 점수가 여전히 나쁠 것입니다. 여기서 렌더링 차단 리소스가 가장 일반적인 원인입니다.

이를 처리하는 방법에 대한 자세한 지침은 위의 링크된 문서를 사용할 수 있습니다. 그러나 여기에 몇 가지 간단한 참고 사항이 있습니다.

  • 스크립트를 비동기식으로 로드하고 필수 JavaScript를 인라인하십시오.
  • HTML에 인라인 스타일 시트(인라인 요소가 캐시되지 않기 때문에 작은 스타일 시트만 적용됨).
  • 사용하지 않는 CSS 및 JavaScript를 제거하여 스타일 시트 크기를 줄입니다. 또는 중요하지 않은 CSS를 연기하고 스타일 시트를 축소 및 압축합니다.

브라우저 개발자 도구의 범위 탭을 사용하여 방문자가 먼저 로드해야 하는 요소를 식별하십시오. 또한 제거할 수 있는 사용하지 않는 코드를 식별하는 데 도움이 됩니다.

chrome 개발자 도구에서 사용하지 않는 css javascript의 커버리지 데이터

정말 기술적인 것들

기술적 설득력이 있는 경우 WordPress 및 그 이상에서 Largest Contentful Paint를 추가로 개선하기 위해 수행할 수 있는 몇 가지 괴상한 작업이 있습니다.

  • HTML에서 이미지 미리 로드 — 특히 CSS 배경 또는 유사 항목으로 사용할 때 <link rel="preload"> 추가하여 가장 중요한 이미지에 우선순위를 두세요. 이는 본문을 표시하는 데 필요할 수 있는 글꼴에도 적용됩니다.
  • 가져오기 우선순위 조정 — fetchpriority="high" 추가하여 브라우저에 먼저 로드해야 하는 항목을 알려줍니다. 이것을 하나 또는 두 개의 이미지로 제한하십시오. 그렇지 않으면 목적을 상실합니다.
  • 서버 측 렌더링 또는 사전 렌더링 사용 — 특히 빠른 서버가 있는 경우. 이렇게 하면 브라우저에서 수행해야 하는 작업량이 줄어듭니다.
  • font-display를 통해 웹 글꼴 최적화 — font-display 규칙을 swap , fallback 또는 optional 로 설정하여 웹 글꼴 로드 중에 텍스트 렌더링이 차단되지 않도록 합니다.

간단히 말해서 가장 큰 콘텐츠가 있는 페인트 및 WordPress

Largest Contentful Paint는 Google이 Core Web Vitals로 간주하고 웹 사이트의 사용자 경험과 궁극적으로 검색 순위를 판단하는 데 사용하는 세 가지 메트릭 중 하나입니다. 사이트 및 검색 성능으로 어려움을 겪고 있다면 살펴봐야 할 요소 중 하나입니다.

이 게시물에서는 이것이 WordPress 사이트의 요인인지 파악하는 방법, 촬영할 LCP 값 및 개선 방법을 배웠습니다. 바라건대, 지금쯤이면 LCP를 더 나은 방향으로 바꿀 수 있다고 느끼실 것입니다.

늘 그렇듯이 완벽할 필요는 없습니다. 당신이 할 수 있다고 생각하는 것을 선택하고 구현하고 거기에서 가져옵니다.

가장 큰 콘텐츠가 포함된 페인트 메트릭과 WordPress에서 이를 개선하는 방법에 대한 추가 팁이 있습니까? 의견에 자유롭게 참여하십시오 .