가장 큰 콘텐츠가 있는 페인트 설명: 시간을 개선하는 방법

게시 됨: 2023-02-11

웹사이트에서 Largest Contentful Paint를 개선하는 방법에 어려움을 겪고 계십니까? 또는 가장 큰 콘텐츠가 있는 페인트가 무엇인지, 왜 처음부터 관심을 가져야 하는지 잘 모르시겠습니까?

어디에서 시작하든 관계없이 이 게시물은 가장 큰 콘텐츠가 있는 페인트에 대해 알아야 할 모든 것을 배울 것이기 때문에 당신을 위한 것입니다.

여기에는 가장 큰 콘텐츠가 포함된 페인트의 의미, 중요한 이유, 측정 방법 및 개선 방법이 포함됩니다.

아래 목차를 사용하여 현재 지식 수준에 따라 특정 섹션으로 이동할 수 있습니다. 또는 처음부터 계속 읽으십시오.

최대 콘텐츠 페인트(LCP)란 무엇입니까? 가장 큰 만족스러운 페인트 의미 설명

가장 큰 콘텐츠가 있는 페인트는 웹 페이지의 기본 콘텐츠를 로드하는 데 걸리는 시간을 측정하는 성능 지표입니다.

가장 큰 콘텐츠 페인트는 CLS(Cumulative Layout Shift) 및 FID(First Input Delay)와 함께 Google의 Core Web Vitals 측정항목의 일부입니다.

보다 기술적인 수준에서 Largest Contentful Paint는 사용자가 페이지 로드를 시작한 후 가장 큰 텍스트 블록, 이미지 또는 비디오가 뷰포트 내에서 렌더링될 때까지 걸리는 시간을 측정합니다.

LCP에서 "메인 콘텐츠"란 무엇을 의미합니까?

주요 콘텐츠는 문제의 실제 페이지에 따라 다르지만 다음 중 하나일 수 있습니다.

텍스트 – 보다 구체적으로 텍스트 노드 또는 기타 인라인 수준 텍스트 요소를 포함하는 모든 블록 수준 요소입니다.
이미지 – <img> 요소 내의 요소 또는 <svg> 요소 내의 <image> 요소.
비디오 – 모든 <비디오> 요소(포스터 이미지 사용).
배경 이미지가 있는 요소 – CSS url() 함수를 통해 로드된 경우에만(CSS 그래디언트에는 적용되지 않음).

이 게시물의 뒷부분에서 사이트의 모든 페이지에 대한 정확한 가장 큰 콘텐츠가 포함된 페인트 요소를 찾는 방법을 배우게 됩니다.

사이트의 UX를 개선하고 SEO 순위를 최대화하고 싶습니까? LCP 시간을 최적화하면 도움이 될 수 있습니다! 지금 시작하세요 ️ 트윗하려면 클릭하세요

가장 큰 콘텐츠가 있는 페인트와 첫 번째 콘텐츠가 있는 페인트

일반적인 질문 중 하나는 또 다른 일반적인 성능 메트릭인 가장 큰 콘텐츠 페인트와 첫 번째 콘텐츠 페인트의 차이점이 무엇인지입니다.

두 용어는 유사하지만 주요 차이점은 가장 큰 콘텐츠 페인트는 페이지 의 "주요 콘텐츠"를 로드하는 데 걸리는 시간을 측정하는 반면 첫 번째 콘텐츠 페인트는 "첫 번째 개체"를 로드하는 데 걸리는 시간을 측정한다는 것입니다. 주요 내용입니다 ).

원래:

LCP = 주요 콘텐츠만
FCP = 콘텐츠가 무엇이든 관계없이 첫 번째 콘텐츠

이와 같이 "메인 콘텐츠" 요소가 일반적으로 가장 먼저 로드되지 않기 때문에 LCP 시간은 거의 항상 FCP 시간보다 약간 높습니다.

사이트의 최대 콘텐츠 페인트 시간이 중요한 이유는 무엇입니까?

사이트의 최대 콘텐츠 페인트 시간이 중요한 두 가지 주요 이유는 다음과 같습니다.

사용자 경험
검색 엔진 최적화

사용자 경험

사이트의 최대 콘텐츠 페인트 시간에 관심을 가져야 하는 가장 큰 이유는 이 메트릭이 사이트 성능과 관련하여 사용자 경험을 이해하는 데 좋은 대용물이기 때문입니다.

대부분의 사용자는 웹사이트가 모든 단일 스크립트와 요소를 완전히 로드하는 데 걸리는 시간에 대해 신경 쓰지 않습니다. 대신 그들은 귀하의 웹 사이트에서 가치를 얻기 시작하는 데 걸리는 시간에 관심이 있습니다.

Largest Contentful Paint는 메인 콘텐츠를 로드하는 데 걸리는 시간을 확인하여 "가치 있는" 순간을 측정하는 데 효과적입니다.

콘텐츠가 포함된 가장 빠른 페인트 시간을 달성하기 위해 사이트를 최적화하는 경우 최소한 성능 측면에서 사용자에게 사이트에서 확실한 경험을 제공하고 있다고 확신할 수 있습니다(또한 고객 친화적인 디자인을 원할 것입니다). 그리고 좋은 사용성).

물론 그렇다고 해서 다른 성능 지표를 무시해야 한다는 의미는 아닙니다. 우리는 항상 사이트의 성능과 병목 현상을 전체적으로 살펴볼 것을 권장합니다. 그래서 Kinsta 호스팅을 사용하는 경우 무료로 사용할 수 있는 자체 애플리케이션 성능 모니터링(APM) 도구인 Kinsta APM을 만들었습니다.

검색 엔진 최적화(SEO)

검색 엔진 최적화 측면에서 Largest Contentful Paint는 Google의 2022 Page Experience 알고리즘 업데이트에서 SEO 순위 요소로 사용하기 시작한 Core Web Vitals 메트릭의 Google 트리오의 일부입니다.

즉, 최대 콘텐츠 페인트 시간이 좋지 않으면 Google 검색 결과에서 사이트 성능이 저하될 수 있습니다.

콘텐츠 품질/관련성 및 백링크와 같은 다른 요소는 여전히 웹사이트 순위에서 훨씬 더 큰 역할을 하지만 SEO 노력을 최대한 활용하려면 사이트의 최대 콘텐츠 페인트 시간을 최적화하는 것이 중요합니다.

가장 큰 콘텐츠 페인트 점수에 영향을 미칠 수 있는 것은 무엇입니까?

두 가지 "주요" 유형의 문제가 페이지의 최대 콘텐츠 페인트 시간에 영향을 미칠 수 있습니다.

서버가 초기 HTML 문서로 응답하는 데 걸리는 시간입니다.
실제 LCP 리소스를 로드하는 데 걸리는 시간입니다.

첫 번째 유형의 문제는 TTFB(Time to First Byte)라고도 하는 서버 응답 시간을 다룹니다. 사용자의 브라우저가 기본 콘텐츠를 로드하는 것에 대해 생각하기 전에 먼저 서버에서 응답을 받아야 합니다.

여기에 영향을 미치는 몇 가지 일반적인 문제는 다음과 같습니다.

페이지 캐싱을 사용하지 않음 – 페이지 캐싱을 사용하지 않으면 서버가 HTML 문서로 응답하기 전에 더 많은 "작업"을 수행해야 합니다.
느린 호스팅 – 느린 호스팅 공급자는 사용자가 무엇을 하든 항상 느린 TTFB를 갖습니다.
CDN을 사용하지 않음 – 콘텐츠 전송 네트워크(CDN)는 사용자가 사이트의 원본 서버에서 페이지를 다운로드하도록 요구하는 대신 글로벌 네트워크에서 페이지를 제공하여 TTFB 속도를 높일 수 있습니다.

사이트의 서버가 초기 HTML 문서를 전달한 후 실제 기본 콘텐츠 요소를 로드할 때 추가 병목 현상이 발생할 수 있습니다.

여기에 영향을 미치는 몇 가지 일반적인 문제는 다음과 같습니다.

렌더링 차단 JavaScript 또는 CSS(또는 일반적으로 최적화되지 않은/불필요한 코드) – 사용자의 브라우저가 기본 요소를 로드하기 전에 불필요한 JavaScript 또는 CSS를 다운로드 및/또는 처리해야 하는 경우 LCP 속도가 느려집니다.
최적화되지 않은 이미지 – LCP 요소가 이미지인 경우 최적화되지 않은 이미지를 사용하면 더 큰 이미지를 다운로드하는 데 시간이 더 오래 걸리므로 시간이 느려집니다.
최적화되지 않은 글꼴 로드 – LCP 요소가 텍스트인 경우 최적화되지 않은 방식으로 사용자 지정 글꼴을 로드하면 해당 텍스트가 표시되는 데 시간이 더 오래 걸릴 수 있습니다.
압축되지 않은 파일 – Gzip 또는 Brotli와 같은 압축 기술을 사용하지 않는 경우 사용자의 브라우저에서 사이트 파일을 다운로드하는 데 시간이 더 오래 걸립니다.

사이트에 따라 두 영역 또는 영역 중 하나에서 병목 현상이 발생할 수 있습니다. 이 게시물의 뒷부분에서 이러한 모든 문제를 해결하는 방법을 배우게 됩니다.

좋은 가장 큰 콘텐츠 페인트 시간은 무엇입니까?

Google은 "좋은" 가장 큰 콘텐츠가 포함된 페인트 시간을 2.5초 미만으로 정의합니다.

페이지의 최대 콘텐츠 페인트 시간이 2.5초에서 4.0초 사이인 경우 Google은 이를 "개선 필요"로 분류합니다. 그리고 페이지의 시간이 4.0초를 초과하면 Google은 이를 "나쁨"으로 정의합니다.

이를 시각적으로 보여주는 Google의 그래픽은 다음과 같습니다.

가장 큰 콘텐츠 페인트를 측정하는 방법: 최고의 LCP 테스트 도구

Largest Contentful Paint에 대한 사이트 성능을 테스트하는 데 사용할 수 있는 여러 가지 도구가 있습니다. 가장 유용한 몇 가지를 살펴보겠습니다.

PageSpeed 통계

PageSpeed Insights는 4가지 유용한 정보를 제공하기 때문에 Largest Contentful Paint를 평가하기 위한 최고의 도구 중 하나입니다.

Chrome UX 보고서에서 실제 사용자의 사이트 최대 콘텐츠 페인트 시간을 확인할 수 있습니다( 사이트에 보고서에 포함할 트래픽이 충분한 경우 ).
시뮬레이션된 테스트를 실행하여 사이트 성능을 확인할 수 있습니다.
Google은 테스트에 사용 중인 실제 LCP 요소를 알려주므로 최적화할 요소를 알 수 있습니다.
Google은 LCP 시간을 개선하는 방법에 대한 제안을 제공합니다.

사용 방법은 다음과 같습니다.

PageSpeed Insights 웹사이트로 이동합니다.
테스트할 페이지의 URL을 입력합니다.
분석 을 클릭합니다.

그러면 Google에서 모바일과 데스크톱 모두에 대한 결과를 표시합니다. 둘 다 확인해야 합니다.

Google에서 LCP를 계산하는 데 사용하는 기본 요소를 찾으려면 진단 섹션까지 아래로 스크롤하고 가장 큰 콘텐츠가 포함된 페인트 요소 섹션을 확장하세요.

다시 말하지만 LCP 요소가 각각 다를 수 있으므로 모바일과 데스크톱을 모두 확인해야 합니다.

크롬 개발자 도구

성능 탭 또는 Lighthouse 감사 기능을 사용하여 Chrome 개발자 도구에서 직접 가장 큰 콘텐츠가 포함된 페인트 시간을 테스트할 수도 있습니다. 자세한 정보를 제공하는 성능 탭을 사용하는 것이 좋습니다.

시작하는 방법은 다음과 같습니다.

테스트할 페이지를 엽니다.
Chrome 개발자 도구를 엽니다.
성능 탭으로 이동합니다.
성능 보고서 체크 박스가 선택되어 있는지 확인합니다.
다시 로드 버튼을 클릭합니다( 아래 참조 ).

이제 사이트에 대한 전체 분석이 표시됩니다.

네트워크 탭에서 LCP 위로 마우스를 가져가면 시간을 볼 수 있습니다.

타이밍 탭에서 LCP 위로 마우스를 가져가면 실제 LCP 요소를 볼 수 있습니다.

구글 서치 콘솔

Google Search Console에서는 최대 콘텐츠 페인트 시간에 대해 개별 페이지를 테스트할 수 없지만 사이트 전체 성능을 평가하는 데는 매우 유용합니다.

사이트의 각 페이지에는 서로 다른 LCP 시간이 있으므로 홈페이지를 테스트하고 끝낼 수는 없습니다.

Google Search Console을 사용하면 사이트의 각 페이지가 Google의 '좋음', '개선 필요' 및 '나쁨' 카테고리에 해당하는지 확인할 수 있습니다. 성능 데이터는 Chrome UX 보고서에서 가져오므로 실제 사용자 데이터를 기반으로 합니다.

아직 확인하지 않았다면 먼저 Google Search Console에서 사이트를 확인해야 합니다.

완료한 후 LCP 보고서에 액세스하는 방법은 다음과 같습니다.

사이트에서 Google 검색 콘솔을 엽니다.
경험 탭에서 Core Web Vitals 로 이동합니다.
모바일 또는 데스크톱 차트 옆에 있는 보고서 열기를 클릭합니다.
URL이 좋은 것으로 간주되지 않는 이유 섹션에서 문제를 찾습니다. 문제를 클릭하면 문제를 일으키는 URL에 대한 자세한 정보를 볼 수 있습니다.

*데스크톱과 모바일 결과가 각각 다를 수 있으므로 반드시 확인하시기 바랍니다.

웹페이지 테스트

WebPageTest는 시뮬레이션된 성능 테스트를 실행하기 위한 또 다른 편리한 옵션입니다.

PageSpeed Insights와 달리 WebPageTest를 사용하면 테스트 위치, 연결 속도, 장치 등과 같은 다양한 테스트 메트릭을 완전히 사용자 지정할 수 있습니다. 이것이 다른 도구에 비해 이 도구를 사용하는 주요 이점입니다. 테스트를 구성할 수 있는 더 많은 옵션을 제공합니다.

테스트를 실행하는 방법은 다음과 같습니다.

WebPageTest로 이동합니다.
테스트할 페이지 URL을 추가합니다.
고급 구성 옵션을 확장하여 테스트를 완전히 구성하십시오.

결과 페이지에는 LCP 데이터와 수많은 다른 성능 지표(폭포 분석 포함)가 표시됩니다.

가장 큰 콘텐츠가 있는 페인트 요소를 찾는 방법

Largest Contentful Paint를 개선하려면 Google에서 LCP 시간을 계산하는 데 사용하는 요소를 정확히 아는 것이 정말 도움이 될 수 있습니다.

예를 들어, Google이 홈페이지에서 영웅 이미지를 LCP 요소로 사용하고 있다는 것을 알고 있다면 홈페이지의 LCP 시간을 개선하려면 해당 영웅 이미지를 가능한 한 빨리 제공할 방법을 찾아야 합니다.

앞에서 언급했듯이 PageSpeed Insights 또는 Chrome 개발자 도구를 사용하여 가장 큰 콘텐츠가 포함된 페인트 요소를 찾을 수 있습니다.

LCP 요소는 기기마다 다를 수 있으므로 모바일 및 데스크톱 결과를 모두 확인하세요.

WordPress(또는 다른 플랫폼)에서 가장 큰 콘텐츠 페인트를 개선하는 방법

이제 Largest Contentful Paint에 대해 모두 알았으므로 WordPress에서 Largest Contentful Paint를 개선하는 방법에 대한 몇 가지 실행 가능한 팁을 살펴보겠습니다.

이 팁은 WordPress에 중점을 두지만 모든 팁은 보편적이며 다른 유형의 웹 사이트에 적용됩니다.

서버 응답 시간 개선을 위한 캐싱 설정

캐싱은 완료된 HTML 문서를 방문자의 브라우저에 전달하기 전에 서버에서 수행해야 하는 처리 작업을 줄임으로써 서버 응답 시간을 개선할 수 있습니다.

Kinsta로 WordPress 사이트를 호스팅하는 경우 Kinsta가 최적화된 캐싱을 자동으로 구현하므로 캐싱 구성에 대해 걱정할 필요가 없습니다.

다른 곳에서 호스팅하는 경우 WP Super Cache와 같은 무료 플러그인이나 WP Rocket과 같은 유료 플러그인을 사용하여 사이트에서 캐싱을 활성화할 수 있습니다.

더 많은 옵션을 보려면 최고의 WordPress 캐싱 플러그인으로 게시물을 확인하십시오.

더 빠른 WordPress 호스팅으로 업그레이드

이 목록에 있는 모든 전술이 LCP 시간을 개선하는 데 도움이 될 수 있지만 덤불 주위를 두드리는 것은 없습니다.

느리고 최적화되지 않은 WordPress 호스팅을 사용하는 경우 LCP 시간은 항상 호스트의 품질에 따라 제한됩니다.

상황을 조금 더 개선할 수는 있지만 호스트가 느린 경우 2.5초 미만의 LCP 시간을 달성하는 데 항상 어려움을 겪을 것입니다.

가장 큰 콘텐츠가 있는 페인트 시간을 개선하는 가장 쉬운 방법을 원한다면 사이트를 Kinsta로 마이그레이션할 수 있습니다. Kinsta는 성능에 최적화된 호스팅 인프라를 제공할 뿐만 아니라 이 목록에 있는 다른 많은 최적화를 처리할 수 있는 내장 기능도 있습니다.

즉, 가장 큰 콘텐츠 페인트 시간을 최적화하는 대신 사이트 성장에 집중할 수 있습니다.

관심이 있는 경우 Kinsta는 모든 호스트에서 무료로 무제한 웹사이트를 마이그레이션합니다 . 여기에서 무료 마이그레이션에 대해 자세히 알아보세요.

아직 확신이 서지 않는다면 이 목록의 나머지 팁을 먼저 시도해 보십시오. 그러나 이 목록에 있는 모든 작업을 수행한 후에도 여전히 어려움을 겪고 있다면 더 나은 호스팅이 필요할 수 있습니다.

콘텐츠 전송 네트워크(CDN) 사용

CDN이 없으면 사이트의 모든 방문자가 호스팅 서버에서 페이지의 HTML 및 정적 자산을 다운로드해야 합니다.

방문자가 서버 근처에 있는 경우 일반적으로 문제가 되지 않습니다. 그러나 방문자가 전 세계에 흩어져 있는 경우 방문자와 사이트 서버 사이의 물리적 거리 때문에 사이트 속도가 느려질 수 있습니다.

CDN을 사용하면 사이트의 정적 자산(또는 사이트의 완성된 HTML 페이지)을 CDN의 글로벌 네트워크에 배포할 수 있습니다. 이렇게 하면 방문자는 CDN의 가장 가까운 위치에서 파일을 다운로드할 수 있으며 훨씬 더 빠릅니다.

Kinsta로 호스팅하는 경우 최상의 결과를 위해 Kinsta의 Edge Caching 기능을 사용하는 것이 좋습니다.

Kinsta의 에지 캐싱 기능은 대부분의 CDN 솔루션과 같은 정적 자산을 캐싱하는 대신 사이트의 전체 HTML 페이지와 정적 자산을 Cloudflare의 글로벌 네트워크에 캐싱하여 작동합니다.

즉, 사이트 방문자가 가장 가까운 엣지 로케이션에서 전체 페이지를 다운로드할 수 있으므로 서버 응답 시간 과 LCP 리소스를 로드하는 데 걸리는 시간이 모두 빨라집니다.

Kinsta의 Edge Caching을 활성화하려면 MyKinsta의 사이트 대시보드에서 Edge Caching 탭으로 이동하십시오.

다른 곳에서 호스팅하는 경우 KeyCDN, Bunny, StackPath 등과 같은 널리 사용되는 CDN 서비스를 사용하여 사이트의 정적 자산에 대한 CDN을 설정할 수 있습니다.

렌더링 차단 JavaScript 방지(연기 또는 제거)

렌더링 차단 JavaScript는 당시에는 필요하지 않더라도 기본 LCP 요소보다 먼저 로드되는 JavaScript입니다.

LCP 요소의 로드를 지연하면 LCP 로드 시간이 느려집니다.

이 문제를 해결하기 위해 구현할 수 있는 몇 가지 전략이 있습니다.

가능한 경우 불필요한 JavaScript를 제거하십시오.
사이트의 기본 요소 로드를 차단하지 않도록 JavaScript를 연기하십시오.
사용자가 사이트와 상호 작용할 때까지 JavaScript를 지연시킵니다.

대부분의 사람들에게 이 기능을 구현하는 가장 쉬운 방법은 Autooptimize 또는 WP Rocket과 같은 플러그인을 사용하는 것입니다.

이 작업을 수행하는 방법에 대한 전체 가이드를 보려면 두 개의 매우 자세한 게시물이 있습니다.

WordPress에서 렌더링 차단 리소스를 제거하는 방법
JavaScript 구문 분석을 연기하는 방법

렌더링 차단 CSS 방지 및 CSS 전달 최적화

최적화되지 않은 JavaScript가 사이트 속도를 저하시키는 것처럼 최적화되지 않은 CSS도 마찬가지입니다.

기본적으로 가능한 한 적은 CSS를 로드하려고 합니다. 그리고 로드해야 하는 CSS의 경우 최적의 방식으로 로드하려고 합니다. 일반적으로 이는 중요한 CSS를 일찍 로드하고 중요하지 않은 CSS는 로드 프로세스 후반까지 지연시키려는 것을 의미합니다.

개발자가 아닌 경우 이를 달성하는 가장 쉬운 방법은 Perfmatters, WP Rocket 또는 FlyingPress와 같은 성능 최적화 플러그인을 사용하는 것입니다.

예를 들어 WP Rocket은 페이지별로 사용하지 않는 CSS를 제거하고 최적의 방식으로 CSS를 제공하는 내장 기능을 제공합니다.

이 모든 작업을 수행하는 방법을 더 자세히 살펴보려면 CSS를 최적화하는 방법에 대한 전체 가이드를 확인하세요.

HTML, CSS 및 JavaScript 축소

위의 코드 최적화 기술 외에도 사이트의 HTML, CSS 및 JavaScript를 축소하고 싶을 것입니다.

기본적으로 사이트 코드에서 불필요한 문자와 공백을 제거하여 크기를 줄입니다.

Kinsta로 호스팅하는 경우 Kinsta는 Cloudflare 통합을 통해 축소를 자동으로 처리할 수 있습니다. 이 기능을 제어하는 방법은 다음과 같습니다.

MyKinsta에서 사이트의 대시보드를 엽니다.
CDN 탭으로 이동합니다.
이미지 최적화 옆에 있는 설정을 클릭합니다.
CSS 및 JS 상자를 선택하고 설정을 저장합니다.

다른 곳에서 사이트를 호스팅하는 경우 Autooptimize와 같은 무료 플러그인을 사용하여 코드를 축소하거나 Perfmatters, WP Rocket 또는 FlyingPress와 같은 프리미엄 종합 플러그인 중 하나를 사용할 수 있습니다.

또는 자세한 내용은 전체 코드 축소 자습서를 확인하세요. 이 자습서는 JavaScript에 중점을 두지만 동일한 방법과 플러그인을 사용하여 다른 코드도 축소할 수 있습니다.

서버 수준 압축 사용(Gzip 또는 Brotli)

서버 수준 압축을 사용하면 Gzip 또는 Brotli와 같은 기술을 사용하여 사이트 파일의 크기를 줄일 수 있습니다.

예를 들어 Kinsta 웹사이트에 사용하는 압축은 Kinsta 홈페이지의 파일 크기를 85.82% 줄였습니다.

Kinsta로 WordPress 웹사이트를 호스팅하는 경우 Kinsta가 모든 사이트에 대해 Brotli 압축을 자동으로 활성화하기 때문에 이에 대해 걱정할 필요가 없습니다.

사이트를 다른 곳에서 호스팅하는 경우 GiftOfSpeed의 이 무료 도구를 사용하여 사이트에 Gzip 또는 Brotli가 활성화되어 있는지 확인할 수 있습니다.

사이트에서 압축을 사용하지 않는 경우 Gzip 압축을 활성화하여 설정하는 방법에 대한 가이드를 따를 수 있습니다.

Cloudflare를 사용하여 사이트 콘텐츠를 제공하는 경우 Cloudflare에는 Brotli 압축을 활성화하는 내장 설정도 있습니다.

Cloudflare 대시보드에서 사이트를 엽니다.
사이드바 메뉴에서 속도 → 최적화 로 이동합니다.
Brotli 토글을 활성화합니다.

이미지 압축 및 크기 조정

LCP 요소가 이미지인 경우 해당 이미지 파일의 크기를 줄이는 방법을 찾으면 사용자 브라우저에서 이미지를 다운로드하는 데 걸리는 시간이 줄어들어 LCP 시간이 단축됩니다.

이미지 크기를 줄이려면 이미지를 실제로 사용하는 크기로 조정하고 손실 압축 또는 무손실 압축을 사용하여 압축하고 WebP와 같은 최적화된 형식으로 제공해야 합니다.

이 접근 방식은 일반적으로 성능 최적화 모범 사례 일 뿐이며 Largest Contentful Paint에만 국한되지 않습니다.

보다 포괄적인 내용을 보려면 웹사이트용 이미지 최적화에 대한 자세한 가이드를 확인하세요.

그리고 오 예 – Kinsta로 WordPress 사이트를 호스팅하는 경우 Kinsta는 타사 도구 없이도 사이트의 이미지를 자동으로 최적화하는 내장 기능을 제공하므로 이에 대해 걱정할 필요가 없습니다.

이 기능을 활성화하는 방법은 다음과 같습니다.

MyKinsta에서 사이트의 대시보드를 엽니다.
CDN 탭으로 이동합니다.
이미지 최적화 옆에 있는 설정을 클릭합니다.
선호하는 이미지 최적화 수준을 선택하고 설정을 저장합니다. Lossy를 사용하면 이미지 품질에 약간의 영향을 미칠 수 있지만 가장 큰 속도 향상을 제공합니다.

가장 큰 콘텐츠가 포함된 페인트 이미지 미리 로드

LCP 요소가 이미지인 경우 LCP를 개선하기 위한 또 다른 전략은 가장 큰 콘텐츠가 포함된 페인트 이미지를 미리 로드하는 것입니다. 따라서 PageSpeed Insights에서 '가장 큰 콘텐츠가 포함된 페인트 이미지 미리 로드'와 같은 추천이 표시될 수 있습니다.

사전 로드를 사용하면 사이트의 LCP 요소인 특정 이미지와 같은 특정 리소스를 다운로드하는 우선 순위를 지정하도록 사용자의 브라우저에 알릴 수 있습니다.

LCP 이미지를 미리 로드하는 가장 비기술적인 방법은 전용 Preload Critical Images 기능을 제공하는 Perfmatters와 같은 플러그인을 사용하는 것입니다. 미리 로드할 이미지 수를 지정하기만 하면 됩니다. 자산을 너무 많이 미리 로드하면 부정적인 영향을 미칠 수 있으므로 하나부터 시작하는 것이 좋습니다.

WordPress.org에는 WPZOOM의 Preload Featured Images 플러그인과 같은 일부 무료 플러그인과 FlyingPress와 같은 다른 프리미엄 플러그인도 있습니다.

지연 로딩 문제 확인

PageSpeed Insights에서 "가장 큰 콘텐츠가 포함된 페인트 이미지 미리 로드" 메시지를 트리거할 수 있는 또 다른 문제는 WordPress 사이트에서 이미지를 지연 로드하는 방식과 관련된 문제입니다.

또는 PageSpeed Insights에서 "가장 큰 콘텐츠가 포함된 페인트 이미지가 느리게 로드되었습니다." 경고를 트리거할 수도 있습니다.

지연 로드를 사용하면 사용자가 사이트와 상호작용을 시작할 때까지 특정 리소스(예: 이미지)를 로드하기 위해 대기하여 사이트의 초기 로드 시간을 단축할 수 있습니다.

이는 일반적으로 좋은 일이지만 사이트에서 LCP 요소인 이미지를 지연 로드하려고 하면 LCP 시간이 느려질 수 있습니다. 이러한 이유로 사이트가 초기 표시 영역에 표시되는 이미지를 지연 로드하지 않도록 해야 합니다.

WordPress가 WordPress 5.5에서 도입한 기본 브라우저 지연 로딩 기능을 사용하는 경우 WordPress는 이미 WordPress 5.9부터 첫 번째 콘텐츠 내 이미지를 자동으로 제외하므로 이 문제가 발생하지 않아야 합니다.

첫 번째 이미지보다 더 많이 제외하려면 wp_omit_loading_attr_threshold 함수를 사용할 수 있습니다 (그러나 대부분의 사람들은 여기에서 아무것도 할 필요가 없습니다).

그러나 JavaScript 기반 지연 로드 플러그인을 사용하는 경우 플러그인 설정에서 이 제외를 수동으로 설정해야 할 수 있습니다. 예를 들어 Perfmatters 플러그인에는 지연 로딩에서 첫 번째 "X" 이미지를 제외할 수 있는 옵션이 포함되어 있습니다.

지연 로드 플러그인에서 이러한 유형의 제외를 설정할 수 없는 경우 다른 플러그인으로 전환할 수 있습니다.

글꼴 표시로 글꼴 로드 최적화: 선택 사항

LCP 요소가 텍스트인 경우 사이트의 글꼴 로드 프로세스로 인해 텍스트 표시가 지연되어 LCP 시간이 느려질 수 있습니다.

일반적으로 이것은 사용자 지정 글꼴을 사용할 때 발생합니다. 사이트가 사용자 지정 글꼴이 로드될 때까지 텍스트를 렌더링하기 위해 대기하도록 구성된 경우 사용자 지정 글꼴 파일을 로드하는 데 시간이 오래 걸리면 속도가 느려집니다.

이 문제를 해결하려면 Font-Display: 선택적 CSS 설명자를 사용할 수 있습니다.

이렇게 하면 사용자 지정 글꼴이 작은 창(보통 약 100ms 이하) 내에서 로드되지 않는 경우 대체 글꼴을 사용하도록 브라우저에 알립니다.

일반 언어에서 이것은 기본적으로 브라우저가 사용자 지정 글꼴을 로드할 기회를 제공해야 함을 의미합니다. 그러나 맞춤 글꼴이 충분히 빨리 로드되지 않으면 브라우저는 콘텐츠가 더 이상 지연되지 않도록 대체 시스템 글꼴을 사용해야 합니다.

또는 Font-Display: Swap을 사용할 수도 있습니다. 대체 글꼴을 즉시 로드한 다음 사용자 정의 글꼴이 로드되면 사용자 정의 글꼴에서 "스왑"합니다. 그러나 이 접근 방식은 글꼴 크기가 다른 경우 누적 레이아웃 이동에 문제를 일으킬 수 있으므로 주의해야 합니다.

사용자 지정 글꼴이 웹사이트 디자인에 절대적으로 필요한 경우가 아니면 글꼴 표시: 옵션을 사용하는 것이 일반적으로 Core Web Vitals 관점에서 가장 좋은 옵션입니다.

CSS를 직접 사용하는 것이 편하다면 하위 테마의 스타일시트에서 글꼴 표시 속성을 수동으로 편집할 수 있습니다.

CSS를 사용하고 싶지 않다면 이를 지원하는 플러그인을 찾을 수도 있습니다. 하지만 대부분은 Google 글꼴 최적화에 중점을 둡니다.

Asset CleanUp – 무료로 Google Fonts를 지원하고 Pro 버전에서는 맞춤형 로컬 글꼴을 지원합니다.
Perfmatters – Google 글꼴용 기능을 제공합니다.

Elementor를 사용하여 사이트를 디자인하는 경우 Elementor에는 Elementor로 만드는 페이지에 사용할 수 있는 내장 옵션도 포함되어 있습니다.

Elementor → 설정 으로 이동합니다.
고급 탭을 엽니다.
Google 글꼴 로드 드롭다운을 선택 사항으로 설정합니다.

LCP가 무엇이며 LCP를 개선하는 것이 왜 중요한지 잘 모르시겠습니까? 이 가이드가 도움이 될 수 있습니다! 여기에서 LCP의 의미, 중요성, 개선 방법에 대해 알아보세요 ️ Click to Tweet

요약

Largest Contentful Paint를 개선하는 방법을 배우는 것은 사이트의 사용자 경험을 개선하고 검색 엔진 순위를 최대화하는 데 중요합니다.

Largest Contentful Paint를 개선하는 데는 일반적으로 두 부분이 있습니다. 서버 응답 시간을 단축한 다음 LCP 요소를 최대한 빨리 렌더링하도록 사이트 코드를 최적화하는 것입니다.

느린 서버 응답 시간에 대해 걱정하고 싶지 않다면 WordPress 사이트를 Kinsta로 옮길 수 있습니다. Kinsta의 성능 최적화 아키텍처는 가능한 한 빨리 사이트를 제공하도록 특별히 설계되었습니다.

또한 Kinsta의 Edge Caching 기능을 사용하면 사이트 페이지를 Cloudflare의 글로벌 네트워크에 캐시할 수 있으므로 전 세계의 방문자가 번개처럼 빠른 서버 응답 시간(결과적으로 번개처럼 빠른 LCP 시간)을 즐길 수 있습니다.

자세한 내용을 보려면 이 페이지에서 Kinsta의 관리형 WordPress 호스팅 또는 Kinsta의 관리형 WooCommerce 호스팅에 대한 자세한 정보를 확인할 수 있습니다.

일부 맞춤형 LCP 성능 최적화를 도와줄 전문가가 필요한 경우 Kinsta Agency Directory에서 공급자를 찾을 수도 있습니다.