[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

  • 워드프레스 호스팅 RocketNet 속도와 안정성 평가

    Published:I-var uknew

    RocketNet 호스팅은 안정성과 속도 모두에서 높은 평가를 받는 서비스입니다. Cloudflare Enterprise CDN을 기반으로 전 세계 엣지 서버에서 콘텐츠를 배포하며, 단순한 캐시 속도를 넘어 실제 사용자 체감 성능까지 개선한 것이 특징입니다. 이 글에서는 Rocket.net의 주요 장점과 한계, 그리고 실제 테스트 결과를 중심으로 RocketNet 속도와 안정성 테스트를 통해 속도와 안정성을 평가합니다. 워드프레스 사이트를 운영하는 입장에서,…

  • Cache Enabler: 간편한 설정의 워드프레스 캐시 플러그인

    Published:jarvis

    워드프레스 사이트는 플러그인 수가 일정 수준을 넘기 시작하면 속도 저하 현상이 나타날 수 있습니다. 기능과 성능을 모두 만족시키는 플러그인을 찾기란 쉽지 않으며, 속도 문제는 방문자의 이탈과 테크니컬 SEO에서의 불이익으로 이어질 수 있습니다. 이 때문에 캐시 플러그인은 선택이 아닌 필수로 자리 잡았습니다. 이 중에 Cache Enabler는 KeyCDN에서 제공하는 간편한 설정의 무료 캐시 플러그인으로, 워드프레스를…

  • 엔바토 엘리먼트란? $16.5 정기구독으로 2천여개 워드프레스 테마와 플러그인 사용

    Published:wilson

    엔바토 엘리먼트envato Elements는 스톡 비디오, 비디오, 음악과 음향효과, 그래픽, 사진, 글꼴을 정기구독으로 무제한 사용할 수 있는 서비스입니다. 그리고 워드프레스 테마와 플러그인, 드루팔, 줌라, 고스트 등의 CMS 템플릿 등을 사용할 수 있습니다. 이 모든 서비스는 $16.50 금액으로 크리에이트브 구독을 할 수 있습니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스…

  • [WP] 워드프레스 파비콘(Favicon) 설정하기

    Published:jarvis

    파비콘(Favicon)은 즐겨 찾기와 아이콘의 합성어 [favorites + icon]로 만들어 졌습니다. 보통 웹사이트 브랜드나 로고의 간결한 버전이나 웹사이트를 대표하는 이미지를 나타내며, 사용자가 해당 웹사이트를 쉽게 식별할 수 있도록 도와 줍니다. 파비콘은 주로 웹사이트의 루트 디렉터리에 “favicon.ico”라는 파일 이름으로 저장됩니다. 브라우저는 이 아이콘을 자동으로 로드하여 사용자에게 표시합니다. 또한, 파비콘은 웹사이트의 다양한 페이지에서 사용될 수 있으며,…

  • [WP] 워드프레스 사이트 건강 필수 모듈 imagick 설치하기

    Published:jarvis

    워드프레스 필수 플러그인 사이트 건강에서 사이트 건강 상태를 확인할 때 “하나 이상의 필수 모듈을 누락했습니다.”와 같은 글을 확인할 수 있습니다. ‘필수 모듈 imagick’는 미디어 업로드에 더 나은 이미지 품질을 제공합니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스 LCP 측정 방법1. 구글 페이지 스피드로 확인하기2. 크롬 개발자도구 Lighthouse3. 구글…

  • Clearfy Cache: 캐시 그 이상, 워드프레스 최적화에 중점을 둔 플러그인

    Published:I-var uknew

    워드프레스 사이트의 속도가 느린 경우 캐시 플러그인 또는 최적화 플러그인을 고려할 수 있습니다. Clearfy Cache는 이름처럼 캐시 기능을 포함하고 있지만, 다른 캐시 플러그인과 비교하면 그 범위는 다소 제한적입니다. 따라서 Clearfy 는 최적화와 관리 보조 도구에 중점을 둔 플러그인으로 보는 것이 더 적절합니다. Clearfy는 기본적으로 간단한 캐싱 기능을 제공하지만, 자산 관리 기능을 통해 사용되지…