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

Author:jarvis Hours 등록일 Hours 업데이트
공정위 광고 문구 Ver 3.0

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

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

TOC
1mn read
TOC
1mn read
View more

코어 웹 바이탈(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

  • W3 Total Cache 플러그인: 최적화 세팅 방법

    Published:I-var uknew

    워드프레스 사이트의 속도는 플러그인을 설치하면 필연적으로 느려질 수 밖에 없습니다. 결국 캐시 플러그인은 워드프레스의 필수 플러그인 중 하나로 자리 잡을 수 밖에 없습니다. 프리 버전에서 100만 명 이상의 활성 설치와 4.4점의 별점을 받은 W3 Total Cache(W3TC) 플러그인은 많은 사용자들이 사용하는 플러그인 중 하나입니다. 캐시 설정은 사용 중인 다른 플러그인의 일부 기능이 작동하지 않을…

  • [WP] 워드프레스 이미지 대체 텍스트와 제목 차이점 & 캡션이란?

    Published:jarvis

    이미지는 글의 의미 전달 or 설명을 하는데 도움이 됩니다. SEO에서도 필수적인 요소로 자리 잡고 있습니다. 워드프레스를 사용할 경우 워드프레스 이미지 대체 텍스트는 무엇이며, Tltle(제목)과 캡션은 무엇인지 알아 보겠습니다. 1. 워드프레스 이미지 대체 텍스트 대체 텍스트(ALT text, alt tag)는 올바르게 만들어야 SEO에도 유리합니다. 사용하는 이미지는 필수로 Alt 택스트를 추가해야 하며, 가능하면 SEO키워드를 포함하는 것이…

  • [WP] 워드프레스 이미지 핫링크 차단 방법 4가지

    Published:jarvis

    이미지 핫링크(Image hotlinking)는 웹사이트 성능에 부정적인 영향을 줍니다. Image hotlink란 무엇이며, 웹사이트에 어떤 부정적인 영향을 주는지, 그리고 어떤 사이트에서 내 사이트에 핫링크를 적용했는지 알아 보도록 하겠습니다. 1. 이미지 핫링크(Image hotlink)란? ‘이미지 핫링크’는 누군가 내 웹사이트에서 직접 이미지(를 포함한 미디어파일)를 링크하여 자신의 웹사이트에 이미지를 삽입하는 것입니다. 핫링크는 ‘무단 도용’이며, 내 사이트의 저작권을 허가 없이…

  • CDN이란? CDN 사용 이유와 이점 5가지

    Published:jarvis

    CDN(Content delivery network:콘텐츠 전송 네트워크)은 콘텐츠를 효율적으로 전송하기 위해 여러 서버 위치에 데이터를 저장해서 제공하는 시스템입니다. HTML, CSS, 자바스크립트, 이미지 및 동영상 등의 콘텐츠를 신속하게 전달할 수 있습니다. CDN 사용 이유와 효과 1. 지리적 이점 원본 서버(Origin Server)와 떨어져 있어도(해외 등) 클라이언트가 웹 사이트에 접속했을 때 들어온 콘텐츠 요청은 가까운 CDN 서버에서 캐싱된…

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

    Published:jarvis

    워드프레스 필수 플러그인 사이트 건강에서 사이트 건강 상태를 확인할 때 “하나 이상의 필수 모듈을 누락했습니다.”와 같은 글을 확인할 수 있습니다. ‘필수 모듈 imagick’는 미디어 업로드에 더 나은 이미지 품질을 제공합니다. 1. 필수 모듈 imagick 사이트 건강에서 권장 사항 중 모듈이 누락되었다는 안내가 확인 되었을 경우입니다. 워드프레스 서버 환경 안내 페이지에서 해당 내용을 확인할…

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

    Published:jarvis

    워드프레스 임베드 기능은 웹사이트에서 외부 콘텐츠(다른 워드프레스 사이트, 유튜브 영상, 트윗, 인스타그램 게시물 등)를 별도의 코드 입력 없이 손쉽게 게시글에 삽입할 수 있도록 돕는 기능입니다. 임베드 기능은 2015년 12월 8일WordPress 4.4 때 출시 되었으며, oEmbed 기능이 핵심 기능에 통합되었습니다. 1. 워드프레스 임베드 기능 사용 방법 임베드 기능은 워드프레스 콘텐츠 작성 페이지 내 좌측 상단의…