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

공정위 광고 문구 Ver 2.0

웹 사이트를 운영할 경우 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

  • [SEO] 2023년에 워드프레스 전자책 및 SEO 전자책과 강의를 구매하면 안되는 이유

    2023년 티스토리의 운영 정책이 블로거들에게 안 좋은 방향으로 바뀌면서 많은 블로거들이 워드프레스 CMS 또는 구글블로거로 이전하는 경우가 많아졌다. 그동안 미뤄 왔던 워드프레스 사이트의 검색엔진최적화를 진행하게 되면서 SEO 전자책이 해외에는 있지만 국내에는 없기에 나와 있는 책을 우연히 구매하게 되었다. 구매한 SEO E북은 말도 안 될 정도로 빈약한 구성을 가진 걸 보고 놀랐다. 이런 높은…

  • [WP] 워드프레스 HTTP 요청 줄이는 방법 7가지

    워드프레스로 만든 웹 사이트가 느리다면 그 중 한 가지 이유는 HTTP 요청 수가 많기 때문일 수 있습니다. 워드프레스에서 요청을 줄여 로딩 속도를 향상 시킬 수 있습니다. HTTP 요청이란? HTTP는 인터넷에서 데이터(HTML, CSS, 이미지, 비디오 등)를 전송하는데 사용되는 프로토콜입니다. 웹 상에는 서버에서 호스팅 되는 많은 정보가 있습니다. 서버의 콘텐츠에 엑세스 하기 위해 브라우저에서 요청을…

  • [WP] 워드프레스 블로그 수익 창출 가능한 이유와 방법 5가지

    워드프레스 블로그 수익 창출은 가능할까요? 우선 한국에서 대표적인 블로그는 네이버 블로그와 티스토리가 있습니다. 네이버 블로그 애드포스트라는 네이버 광고를 게재할 수 있고 티스토리는 구글 애드센스와 애드핏 광고를 게재할 수 있습니다. 애드포스트는 사실 광고 수익이 매우 낮아 전문적으로 콘텐츠를 발행하는 직업을 갖기 힘들며, 티스토리의 경우 지속적인 여러가지 웹 사이트 오류 및 티스토리 운영에 대한 문제들이…

  • 워드프레스 캐시 플러그인 WP Rocket 속도 테스트: 설정 전·후 성능 최적화 비교 분석

    WP Rocket 플러그인의 세팅 방법 및 할인된 가격 등에 대해 확인을 했습니다. 가장 보편적인 설정 이후에 WP Rocket 속도 테스트를 진행하였습니다. 크롬 개발자 도구의 DOMContentLoaded 및 구글 페이지 스피드 점수 2가지 항목으로 테스트를 진행합니다. WP Rocket의 설정 방법 및 가격 정보가 필요할 경우 아래 버튼을 눌러 확인할 수 있습니다. Ⅰ. WP Rocket 속도…

  • [WP] 테마 or 플러그인 설치 중 발생하는 워드프레스 FTP 오류 해결 방법

    설치형 워드프레스 기반 웹 사이트를 운영하면서 테마 또는 플러그인을 설치하는 중 워드프레스 FTP 오류 메시지로 설치에 시간 소요가 되는 경우가 있습니다. 두 가지 해결 방법이 있으며 한 가지를 선택해서 설정할 수 있습니다. ※ FTP 오류 메시지 내용 에러: 서버에 연결하는 중에 에러가 생겼습니다. 설정이 올바른지 확인하십시요. 1. 워드프레스 FTP 오류 해결: wp-config.php 파일…

  • Cloudways 호스팅 사용 후기(2023)

    fastcomet에서 Cloudways 호스팅으로 이전을 했습니다. Cloudways 호스팅 사용 후기는 기대했던 것 이하였습니다. 이전 이유는 깔끔한 인터페이스와 Memcached/Redis Object 캐시 활용 가능성이었습니다. Varnish 캐시도 사용할 수 있다는 점과 부가 기능들이 마음에 들어 사용하게 되었습니다. 1️⃣ 서버 이전 신청 무료 마이그레이션(서버 이전)은 fastcomet과 동일하게 진행할 수 있습니다. 서버 이전 후 3일 정도는 서울의 데이터 센터로 옴겼고…