[WP] 워드프레스 LCP(Largest Contentful Paint) 측정 방법 4가지와 해결 방법

Author:jarvis Hours 등록일 Hours 업데이트

웹 사이트를 운영할 경우 SEO 측면에서 웹 사이트의 로딩 속도는 매우 중요한 요소입니다. 이번에는 워드프레스 LCPLargest Contentful Paint란 무엇이며, 중요한 이유와 개선하는 방법에 대해 알아 보겠습니다.

LCP는 코어 웹 바이탈Core Web Vitals 지표 중 하나입니다.

코어 웹 바이탈(CWV) : 출처 클라우드플레어

ⓐ 로딩 속도를 측정하는 최대로 의미 있는 페인트(LCP)
ⓑ 페이지 상호 작용성을 측정하는 첫 번째 입력 지연(FID)
ⓒ 시각적 안정성을 측정하는 누적 레이아웃 변경(CLS)

최대 콘텐츠 페인트: LCP란?

구글은 웹 사이트의 성능 측정을 하는데 여러가지 측정 항목을 이용합니다. 그 중 하나가 LCP입니다. LPC는 웹 페이지 상단의 가장 큰 시각 콘텐츠 요소가 표시(렌더링)되는데 걸리는 시간을 측정합니다. 페이지에 접속했을 때 이미지(동영상 or 애니메이션 등) 블럭 or 텍스트 블럭이 이에 속합니다.

LCP 점수 합격 기준

LCP 점수 합격 기준은 2.5초 이하여야 합니다.

 빠름개선이 필요함느림
LCP2.5초 이하4초 이하4초 초과

워드프레스 LCP 측정 방법

1. 구글 페이지 스피드로 확인하기

워드프레스 LCP - 구글 페이지 스피드에서 확인한 최대 콘텐츠 페인트

가장 널리 알려진 구글의 페이지스피드 인사이트를 이용하는 방법입니다. [중요 요청 체이닝 차단]에서 발견된 체인과 [콘텐츠가 포함된 최대 페인트 요소]로 LCP 항목에 대한 진단을 할 수 있습니다.

구글 페이지스피드 LCP 진단 내용

2. 크롬 개발자도구 Lighthouse

크롬 개발자도구의 Lighthouse를 이용해서 LCP 결과 진단을 할 수 있습니다.

3. 구글 서치콘솔 활용

서치콘솔 내 코어 웹 바이탈에서 개선이 필요한 URL의 보고서 열기에서 CLS 및 LCP 등을 확인하여 웹 사이트의 성능을 개선할 수 있습니다.

구글 서치콘솔에서 LCP 및 CLS 등을 확인할 수 있음

4. 지티메트릭스 활용

GTmetrix를 활용한 LCP 확인은 간단하게 URL을 입력 후 진행합니다.

GTmetrix로 워드프레스 LCP 확인하기

Largest Contentful Paint 해결 방법

  • 렌더링 차단하는 리소스 제거 또는 줄이기
  • 웹 브라우저 렌더링을 줄이려면 CSS 및 JavaScript 파일을 줄이거나 제거합니다.
  • 느린 리소스(자원) 로딩 시간
  • 이미지, 동영상, HTML이나 CSS와 같은 웹 페이지의 블록 요소가 웹 사이트 내에 다른 파일의 성능 저하를 함께 일으킬 수 있습니다. 워드프레스 이미지 최적화 플러그인 등을 이용해서 리소스 시간을 단축할 수 있습니다.
  • 서버의 느린 응답 시간
  • 서버의 성능이 느린 경우 웹 사이트의 로딩 시간을 워드프레스 캐시 플러그인 및 이미지 최적화 플러그인 등을 활용하더라도 한계가 있을 수 있습니다. 어느 정도의 웹 사이트 방문자가 있다면 서버 사양을 업데이트 하는 것과 서버에 Memcached나 Redis 등의 서버 캐시가 있는 호스팅 서버로 이전을 생각할 수도 있습니다.
  • 속도 향상을 위한 CDN 사용을 고려할 수 있습니다.
  • TTFB 시간 단축
  • 구글 광고나 애널리틱스 등과 같은 타사 연결을 dns-prefetch 등과 같은 설정으로 DNS 조회를 더 빠르게 로드하여 특히 모바일 페이지에서의 속도를 더 향상시키는 방법을 생각할 수 있습니다.

Similar Posts

  • cPanel 워드프레스 설치하기(with softaculous)

    Published:jarvis

    cPanel은 워드프레스 뿐만 아니라 여러 CMS에서 사용하기 편리한 웹 호스팅 컨트롤 패널입니다. 이번에 cPanel 워드프레스 설치 방법에 대해 알아 보겠습니다. 기본 설치를 위해 먼저 [cPanel] > [소프트웨어] > [Softaculous]를 클릭합니다. cPanel을 사용하는 호스팅 업체라면 동일한 설정이 있기 때문에 내용 참조하여 어렵지 않게 설치가 가능합니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP…

  • [WP] 워드프레스 크론을 리눅스 크론으로 교체하기

    Published:jarvis

    워드프레스 크론을 말하기 전에 먼저 크론(cron)에 대해 확인해 보겠습니다. 크론은 자동화 된 예약 시스템입니다. 정해진 시간에 작업을 수행하게끔 지정된 프로그램입니다. 리눅스에서 항상 실행중인 프로그램을 뜻 하는 데몬(daemon)은 백그라운드에서 여러가지 작업을 합니다. 데몬 중에 크론이 있다고 보면 됩니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스 LCP 측정 방법1. 구글…

  • 워드프레스 301 리다이렉트: 정의 및 설정 방법

    Published:I-var uknew

    워드프레스로 구축한 웹사이트에서 301 리다이렉트 설정은 사이트 이전이나 URL 변경 시 방문자와 검색엔진이 새 주소로 자동 이동하도록 하는 중요한 작업입니다. 워드프레스 301 리다이렉트를 사용해야 하는 이유와 실제 적용 사례를 살펴보겠습니다. 301 리다이렉트는 현재 URL에서 다른 URL로 보내는 것을 의미합니다. 이는 전화기의 착신 전환과 비슷한 개념으로, 사용자가 기존 주소로 접속해도 자동으로 새 주소로 안내하는…

  • [WP] Softaculous 사용 워드프레스 스테이징 사이트 만드는 방법

    Published:jarvis

    워드프레스를 사용할 때 플러그인 설치 및 업데이트 등을 포함한 여러가지 변경 사항을 안전하게 테스트 하기 위한 사이트가 필요할 수 있습니다. ‘워드프레스 스테이징 사이트‘를 만든다면 안전한 테스트가 가능합니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스 LCP 측정 방법1. 구글 페이지 스피드로 확인하기2. 크롬 개발자도구 Lighthouse3. 구글 서치콘솔 활용4. 지티메트릭스…

  • wp-config.php 보안 취약점: 워드프레스 보안 강화

    Published:jarvis

    워드프레스 설치 후 반드시 확인해야 할 파일 중 하나가 바로 wp-config.php입니다. 이 파일은 데이터베이스 접속 정보와 보안 키 등이 포함된 핵심 설정 파일로, 외부에 노출되거나 잘못 설정될 경우 사이트 전체가 심각한 위협에 노출될 수 있습니다. 이번 페이지에서는 wp-config.php의 주요 보안 취약점과 이를 안전하게 보호하기 위한 점검 방법을 자세히 알아보겠습니다. 목차코어 웹 바이탈(CWV) :…

  • 워드프레스 RSS 피드 개수 설정 및 피드 주소 확인

    Published:jarvis

    워드프레스에서 RSS 피드 설정과 주소 확인 방법에 대해 알아 보겠습니다. 워드프레스의 기본 RSS 피드 개수는 10개로 설정되어 있으며 늘리거나 줄일 수 있습니다. 먼저 워드프레스 RSS 피드 개수 설정 방법입니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스 LCP 측정 방법1. 구글 페이지 스피드로 확인하기2. 크롬 개발자도구 Lighthouse3. 구글 서치콘솔…