[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

  • 워드프레스 호스팅: 안정성 및 속도를 반영한 5가지 평가 항목

    Published:I-var uknew

    워드프레스 사이트 구축을 계획하고 있다면, 먼저 도메인 구매와 함께 적합한 호스팅 서비스를 선택하는 것이 중요합니다. 호스팅은 웹사이트의 안정성과 속도에 직접적인 영향을 미치기 때문에, 내 사이트 목적과 규모에 맞는 호스팅을 신중히 고르는 것이 성공의 첫걸음입니다. 워드프레스 호스팅에 맞는 호스팅을 선택할 때 고려해야 할 5가지 핵심 평가 항목을 안내드립니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대…

  • Clearfy 설정 가이드: 워드프레스 성능 최적화

    Published:I-var uknew

    워드프레스 사이트의 속도를 높이기 위해 캐시 플러그인을 고려할 때, Clearfy Cache는 단순한 캐시 플러그인을 넘어 워드프레스 전반을 최적화하는 통합 도구로 평가받고 있습니다. 이 글에서는 Clearfy의 주요 기능과 설정 방법을 단계별로 살펴보고, 실제 사이트에서 성능을 높이기 위한 실전 팁을 함께 정리했습니다. WP Fastest Cache나 W3 Total Cache와 같이 캐시 플러그인이지만 캐시 기능보다 워드프레스 최적화…

  • [WP] 워드프레스 미디어 파일 업로드 오류: 업로드한 파일을 wp-content/uploads/20xx

    Published:jarvis

    호스팅 업체가 아닌 워드프레스 웹사이트를 직접 운영하는 경우 “업로드한 파일을 wp-content/uploads/20xx/07(으)로 이동할 수 없습니다.“와 같은 워드프레스 미디어 파일 업로드 오류 메시지를 확인하는 경우가 있습니다. 호스팅 업체에서 서비스를 받고 있다면 별도의 문의를 통해 문제를 해결할 수 있으며, 직접 관리하는 서버의 경우 직접 문제 해결을 해야 합니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트:…

  • 워드프레스 임베드 기능: 활용 및 장·단점

    Published:jarvis

    워드프레스 임베드 기능은 웹사이트에서 외부 콘텐츠(다른 워드프레스 사이트, 유튜브 영상, 트윗, 인스타그램 게시물 등)를 별도의 코드 입력 없이 손쉽게 게시글에 삽입할 수 있도록 돕는 기능입니다. 임베드 기능은 2015년 12월 8일WordPress 4.4 때 출시 되었으며, oEmbed 기능이 핵심 기능에 통합되었습니다. 목차코어 웹 바이탈(CWV) : 출처 클라우드플레어최대 콘텐츠 페인트: LCP란?LCP 점수 합격 기준워드프레스 LCP 측정 방법1….

  • WP Super Cache: 플러그인 설치 및 설정

    Published:jarvis

    워드프레스 캐시 플러그인 중 WP Super Cache는 100만 명 이상이 사용하는 인기 무료 캐시 플러그인입니다. 평점 4.3점으로 사용자 만족도도 높은 편이며, Automattic에서 직접 개발한 공식 플러그인입니다. 별도의 유료 버전은 존재하지 않으며, 캐시 플러그인에서 필요한 대부분의 기능이 무료로 제공됩니다. WP Super Cache의 설치 방법과 기본 설정, 작동 원리에 대해 확인해 보겠습니다. 기본 설치는 Neve…

  • 리눅스 서버에 워드프레스 설치하는 두 가지 방법: FTP vs wget

    Published:I-var uknew

    워드프레스는 대표적인 CMS로, 리눅스 서버 환경에서도 수동 설치 방식으로 손쉽게 구축할 수 있습니다. 이 문서에서는 워드프레스 설치를 두 가지 방법, FTP를 이용한 수동 업로드 방식과 wget 명령어를 활용한 설치 방식을 다룹니다. 서버 환경과 사용자의 숙련도에 따라 원하는 방식을 선택하여 진행하시면 됩니다. ※ 이 문서는 호스팅 계정, 데이터베이스 계정, SSL 설정이 완료된 상태를 기준으로…