WordPress에서 가장 큰 콘텐츠가 포함된 페인트(LCP)를 개선하는 방법
게시 됨: 2022-06-24웹사이트의 사용자 경험(UX)을 측정하는 것은 어려운 과제가 될 수 있습니다. 그러나 이것이 바로 Google이 핵심 성능 평가 지표로 하려고 하는 것입니다. 그리고 구글은 검색 엔진 순위를 결정할 때 사용자 경험을 평가하기 때문에 이들에 대한 좋은 점수는 중요합니다.
Core Web Vitals의 일부인 몇 가지 메트릭이 있으며 약간 위협적으로 들릴 수 있습니다. 좋은 소식은 점수와 향상 방법을 더 쉽게 이해할 수 있는 여러 도구가 있다는 것입니다.
이 기사에서는 하나의 특정 측정항목인 LCP(최대 콘텐츠가 포함된 페인트)를 살펴보겠습니다. 이것은 웹사이트가 화면에 표시되는 가장 큰 요소를 로드하는 데 걸리는 시간을 측정합니다.
이것이 사용자 경험에 어떤 영향을 미치고 LCP 점수가 떨어지는 원인에 대해 논의할 것입니다. 그럼 개선 방법을 알려드리겠습니다.
최대 함량 페인트(LCP)란 무엇입니까?
LCP는 페이지에서 가장 큰 요소가 로드되는 데 걸리는 시간을 측정하는 메트릭입니다. 대부분의 페이지에서 가장 큰 요소는 큰 이미지 또는 화면 상단의 영웅 섹션입니다.
그 자체로 LCP 점수는 사이트에서 시각적 요소를 로드하는 속도를 이해하는 데 도움이 됩니다. 페이지는 이 측정항목에 영향을 주지 않고 백그라운드에서 스크립트를 계속 로드할 수 있습니다. 간단히 말해서 LCP 점수는 주어진 페이지의 미디어 및 텍스트에만 관련됩니다.
LCP는 Google이 페이지의 UX를 측정하는 데 사용하는 3가지 핵심 Web Vital 중 하나입니다. 다른 두 가지는 다음과 같습니다.
- FID(First Input Delay): FID는 방문자가 첫 번째 작업(예: 링크 클릭)을 수행한 시간과 사이트가 응답한 시간을 측정합니다.
- CLS(누적 레이아웃 이동): 이 측정항목은 로드할 때 사이트가 이동하는 정도를 효과적으로 측정합니다. 텍스트가 먼저 표시되지만 이미지가 로드될 때 화면 아래로 점프하여 방문자가 제자리를 잃을 수 있습니다.
경험에 비추어 볼 때 세 가지 핵심 성능 평가 점수가 모두 가능한 한 낮아야 합니다. 점수가 낮으면 페이지가 빠르고 원활하게 로드됩니다.
숫자 측면에서 Google에서 Core Web Vital 점수가 양호하고 수용 가능하며 불량하다고 생각하는 항목은 다음과 같습니다.
페이지 로딩 시간을 측정하는 것은 웹사이트의 핵심 Web Vitals를 확인하는 것과는 다릅니다. 사이트가 비교적 빠르게 로드될 수 있지만 CLS 또는 FID 점수가 낮을 수 있습니다. 이상적으로는 전체 로딩 시간과 핵심 웹 바이탈을 모두 측정하여 사이트 성능을 정확하게 평가하는 것이 좋습니다.
LCP는 WordPress 사이트의 사용자 경험에 어떤 영향을 줍니까?
콘텐츠가 포함된 가장 큰 페인트 점수가 낮다는 것은 페이지를 로드하는 데 너무 오래 걸릴 수 있음을 의미합니다. 페이지 단위로 핵심 핵심 성과를 측정해야 한다는 점을 염두에 두십시오. 한 페이지의 LCP 점수가 낮을 수 있지만 다른 페이지는 괜찮을 수 있습니다.
그러나 일반적으로 결과는 사이트 전체에서 구현되는 최적화 관행과 관련이 있기 때문에 일반적으로 사이트는 LCP 점수에 대한 추세를 보게 됩니다. 모범 사례를 고려하지 않고 사이트를 만든 경우 모든 페이지의 점수가 낮을 수 있습니다. 사이트가 신중하게 최적화된 경우 대부분의 페이지는 일반적으로 꽤 좋은 점수를 받습니다. 사려 깊은 개발자는 평균보다 낮은 점수를 받은 페이지를 식별하고 해당 페이지의 성능을 개선하기 위해 구체적인 조정을 수행합니다.
전반적으로 낮은 LCP 점수는 방문자가 페이지가 시각적으로 완전히 로드될 때까지 너무 오래 기다려야 할 수 있으며 방문자는 기다리는 것을 좋아하지 않는다는 의미입니다. 페이지를 로드하는 데 2~3초 이상이 걸리면 많은 방문자를 돌릴 수 있습니다.
Core Web Vitals가 Google의 순위 요소라는 점도 주목할 가치가 있습니다. LCP 점수가 낮으면 검색 엔진 결과 페이지(SERP)의 순위가 낮아질 수 있습니다. 즉, 유기적 트래픽이 줄어듭니다.
LCP 점수 측정 방법
LCP 점수를 측정하는 데 사용할 수 있는 몇 가지 도구가 있습니다. 가장 간단한 것은 PageSpeed Insights입니다. 이 서비스를 사용하면 모든 페이지의 URL을 입력하고 몇 초 만에 전체 성능에 대한 전체 보고서를 얻을 수 있습니다.
URL을 입력하고 분석 을 클릭하면 PageSpeed Insights가 해당 페이지에 대한 두 개의 보고서를 생성합니다. 하나는 모바일용이고 다른 하나는 데스크톱 성능용입니다. 보고서 상단에서 LCP를 포함한 Core Web Vitals 점수를 확인할 수 있습니다.
아래로 스크롤하면 보고서에 웹 사이트에 대해 수행할 수 있는 잠재적인 성능 개선 사항도 표시됩니다. 제안된 각 개선 사항에 대해 PageSpeed Insights는 절약할 수 있는 로드 시간의 추정치를 제공합니다.
Google Search Console을 사용하면 플랫폼을 벗어나지 않고도 PageSpeed Insights 보고서에 액세스할 수 있습니다. Site Kit와 같은 일부 WordPress 플러그인을 사용하면 대시보드 내에서 Core Web Vitals 점수를 바로 표시할 수 있습니다.
낮은 LCP 점수의 원인은 무엇입니까?
낮은 LCP 점수와 긴 로딩 시간에 대한 잠재적인 원인은 많습니다. 일반적으로 서버 문제 또는 웹 사이트 최적화 부족으로 이어집니다. 각각의 잠재적인 원인을 살펴보겠습니다.
- 느린 서버 응답 시간. 웹 호스트가 서버 수준에서 좋은 성능을 제공하지 않으면 LCP 점수를 줄이기 위해 할 수 있는 일이 거의 없습니다. 느린 서버 응답 시간은 사이트가 적절하게 최적화된 경우에도 방문자를 오래 기다려야 함을 의미합니다. 이 경우 다른 WordPress 호스팅 제공업체로 전환하는 것을 고려할 수 있습니다.
- 렌더링 차단 JavaScript 및 CSS. 경우에 따라 JavaScript 및 CSS 스크립트는 로드가 완료될 때까지 페이지의 다른 자산이 렌더링되지 않도록 할 수 있습니다. 이것을 "렌더링 차단"이라고 하며 전체 로딩 시간을 늘릴 수 있습니다.
- 무거운 파일 및 이미지. 파일 크기가 큰 이미지를 사용하는 경우 로드하는 데 시간이 걸릴 수 있습니다. 이상적으로는 사이트에 업로드하는 이미지를 압축하고 최적화해야 합니다.
- 브라우저 캐싱을 활용하지 않습니다. 브라우저 캐싱은 방문자의 브라우저에 사이트의 정적 콘텐츠 사본을 저장하여 향후 방문을 위한 로드 시간을 단축합니다. 브라우저 캐싱을 활용하지 않는 경우 사용자는 방문할 때마다 페이지를 완전히 새로고침해야 합니다.
- GZIP 압축을 사용하지 않습니다. 이것은 서버 수준에서 HTTP 요청 및 파일을 압축하는 소프트웨어 응용 프로그램입니다. 평판이 좋은 대부분의 웹 호스트는 기본적으로 GZIP 압축을 제공해야 합니다.
WordPress에서 가장 큰 콘텐츠가 포함된 페인트를 개선하는 방법
WordPress 웹 사이트의 LCP 점수를 줄이고 전반적인 성능을 향상시키는 방법에는 여러 가지가 있습니다. 가장 효과적인 방법을 살펴보겠습니다.
1. WordPress의 핵심 성능 향상에 도움이 되도록 설계된 플러그인 사용
Core Web Vitals 점수를 향상시키는 데 도움이 되도록 설계된 몇 가지 플러그인이 있습니다. 가장 강력한 솔루션 중 하나는 Jetpack Boost입니다.
Jetpack Boost는 단순히 해당 설정을 전환하여 여러 성능 최적화를 구현하는 데 도움이 될 수 있습니다. 렌더링 차단 JavaScript를 연기하고, 지연 로딩을 활성화하고, 웹사이트 내에서 CSS 코드를 최적화할 수 있습니다.
Jetpack Boost를 사용하면 LCP 점수를 높이는 데 도움이 되지만 다른 성능 최적화를 소홀히 해야 한다는 의미는 아닙니다. 플러그인을 활성화한 후 Core Web Vitals를 더욱 개선하기 위해 다른 전략도 구현하는 것이 좋습니다.
2. 웹사이트의 CSS 축소
코드로 작업할 때 다른 사람들이 이해하기 쉬운 방식으로 형식을 지정하는 것이 좋습니다. 이것은 공백을 사용하고, 코드를 여러 줄에 분산시키고, 읽기 쉽게 구조화하는 것을 의미합니다.
이 접근 방식의 문제는 모든 공간과 문자가 추가 디스크 공간을 차지한다는 것입니다. 몇 줄의 코드에 대해서만 이야기한다면 큰 영향을 미치지 않습니다. 그러나 각각 수백 줄의 코드가 포함된 수십 또는 수백 개의 CSS 파일을 처리할 때 이러한 스크립트는 웹사이트의 로딩 시간과 LCP 점수에 영향을 미칠 수 있습니다.
CSS의 영향을 최소화하는 한 가지 방법은 코드를 "축소"하는 것입니다. 여기에는 파일 크기를 줄이기 위해 불필요한 문자와 공백을 제거하는 작업이 포함됩니다. 작동 방식을 확인하기 위해 다음은 여러 div 요소의 스타일을 지정하는 CSS 코드의 예입니다.
div{ border: 3px solid currentColor; } #div1{ color: green; } #div2{ color: blue; }
이제 코드를 축소한 후의 코드가 다음과 같이 표시됩니다.
div{border:3px solid currentColor}#div1{color:green}#div2{color:#00f}
사용하는 축소 도구에 따라 값을 최적화된 대안으로 바꿀 수도 있습니다. 손으로 코드를 형식화하는 것은 시간이 너무 오래 걸리고 오류가 발생할 수 있기 때문에 축소 도구를 언급합니다.
Toptal의 CSS 축소기와 같은 옵션을 포함하여 웹에서 사용할 수 있는 무료 축소 도구가 많이 있습니다.
웹사이트의 코드를 최적화하는 데 사용할 수 있는 WordPress 축소 플러그인도 있습니다. 이러한 플러그인의 대부분은 CSS를 축소할 뿐만 아니라 렌더링 차단 JavaScript 및 CSS를 연기하는 것과 같은 다른 기능도 포함합니다. 이것이 무엇을 의미하는지 다음 섹션에서 이야기하겠습니다.
3. 렌더링 차단 JavaScript 및 CSS 연기
웹 사이트를 방문하면 로드 시간을 최대한 줄이는 방식으로 리소스를 로드하지 않을 수 있습니다. 경우에 따라 JavaScript 파일로 인해 다른 요소를 계속 렌더링하기 전에 해당 스크립트의 로드가 완료될 때까지 브라우저가 기다릴 수 있습니다.
해당 렌더링 차단 코드는 페이지의 LCP 점수를 높입니다. 이 문제를 처리하는 두 가지 방법이 있습니다.
- 렌더링 차단 스크립트를 제거합니다.
- 다른 요소의 로드가 완료될 때까지 렌더링 차단 스크립트를 연기합니다.
두 번째 옵션은 웹사이트에서 중요한 기능에 필요한 코드를 처리하는 경우에 이상적입니다. 필요한 스크립트를 연기하면 페이지가 시각적으로 렌더링된 다음 코드가 백그라운드에서 로드됩니다. 사용자에 관한 한 모든 것이 더 빨리 로드됩니다.
어떤 스크립트가 렌더링을 차단하는지 알아내는 가장 쉬운 방법은 PageSpeed Insights를 사용하는 것입니다. 모든 PageSpeed Insights 보고서에는 권장 성능 조정을 다루는 섹션이 포함되어 있습니다.
테스트를 실행한 후, Remove render-blocking resources 탭 아래를 살펴보십시오. 내부에는 렌더링을 차단하는 JavaScript 및 CSS 스크립트 목록이 표시됩니다. 이 섹션에서는 각각을 연기함으로써 얼마나 많은 로딩 시간을 줄일 수 있는지에 대한 추정도 제공합니다.
코드 편집에 신경 쓰지 않는다면 web.dev 도구를 사용할 수 있습니다. 또는 Jetpack Boost로 다시 전환하여 렌더링 차단 스크립트를 연기할 수 있습니다. 핵심 웹 바이탈을 개선하는 여러 요소를 한 번에 처리합니다.
또한 렌더링 차단 스크립트를 지연하고 축소하는 몇 가지 독립 실행형 플러그인이 있습니다. 여기에는 다음이 포함됩니다.
- Autooptimize : 렌더링 차단 JavaScript 및 CSS를 연기하고 웹사이트에 이미지 지연 로드를 활성화할 수 있습니다.
- Fast Velocity Minify : 이 플러그인은 웹사이트에서 JavaScript 및 CSS 파일을 지연, 축소 및 결합할 수 있습니다.
- Hummingbird : 이 WPMU DEV 플러그인을 사용하면 브라우저 캐싱을 활용하고 렌더링 차단 스크립트를 지연하며 JavaScript 및 CSS를 축소할 수 있습니다.
웹사이트의 코드를 축소할 수 있는 플러그인을 다룰 때는 활성화하기 전에 WordPress 사이트를 완전히 백업하는 것이 좋습니다. 이렇게 하면 축소 프로세스로 인해 웹 사이트의 핵심 기능이 중단되는 경우 데이터 손실 없이 이전 버전으로 되돌릴 수 있습니다.
4. 사이트 이미지 최적화
WordPress의 낮은 LCP 점수의 주요 원인 중 하나는 큰 이미지 파일입니다. 고해상도 이미지는 멋지게 보이지만 많은 저장 공간도 차지합니다. 압축되지 않은 파일을 처리하고 단일 페이지에 여러 이미지가 있는 경우 로드 시간이 빠르게 제어할 수 없게 될 수 있습니다.
이 문제를 해결하는 가장 좋은 방법은 이미지를 최적화하는 것입니다. WordPress에 업로드하기 전이나 후에 이 작업을 수행할 수 있습니다.
이미지를 최적화한다는 것은 이미지를 압축하는 것을 의미합니다. 사용하는 압축 도구에 따라 이 프로세스는 이미지 품질에 미치는 영향을 최소화해야 하지만 파일 크기와 전체 로드 시간을 크게 줄일 수 있습니다.
이미지를 WordPress에 업로드하기 전에 최적화하려면 TinyPNG와 같은 무료 온라인 도구를 사용할 수 있습니다.
TinyPNG를 사용하면 JPG 및 PNG 파일을 수동으로 업로드하고 최적화할 수 있습니다. 이 서비스는 이미지를 압축한 다음 컴퓨터에 다운로드할 수 있도록 합니다. 그런 다음 압축된 이미지를 WordPress에 업로드할 수 있습니다.
Jetpack CDN은 WordPress에서 직접 이미지를 최적화할 수 있는 훌륭한 옵션입니다. 또한 모바일 장치에 맞게 이미지 크기를 자동으로 조정하여 사이트 전체에서 속도를 높입니다. CDN의 이점에 대해 말하자면…
5. CDN(콘텐츠 전송 네트워크) 사용
CDN은 전략적 지역에 분산된 데이터 센터에 대한 액세스를 제공하는 서비스입니다. 이러한 데이터 센터는 웹사이트의 캐시된 사본을 저장하고 방문하려는 사람들의 연결을 차단합니다.
CDN은 이러한 연결을 각 방문자에게 가장 가까운 데이터 센터로 자동 라우팅합니다. 사이트 콘텐츠가 이동할 거리가 적기 때문에 페이지가 더 빨리 로드됩니다.
또한 CDN은 가능한 한 빨리 요청을 처리하도록 설계되었습니다. 즉, 일반적으로 호스팅 공급자가 실행하는 서버보다 훨씬 빠르게 콘텐츠를 로드합니다.
Cloudflare와 같은 서비스는 사이트 페이지 중 일부를 캐시할 수 있는 제한된 무료 CDN 계획을 제공합니다. 일부 관리형 WordPress 웹 호스트는 내장형 CDN 통합을 제공하므로 별도의 서비스 비용을 지불할 필요가 없습니다. 그러나 Jetpack을 사용하는 경우 이미지와 웹 사이트 파일의 속도를 높이는 데 사용할 수 있는 무료 WordPress 전용 CDN에 액세스할 수도 있습니다.
WordPress의 가장 큰 콘텐츠가 포함된 페인트에 대해 자주 묻는 질문
LCP 점수를 측정하고 최적화하는 방법에 대해 여전히 질문이 있는 경우 이 섹션에서 답변을 드릴 것입니다.
내 WordPress 사이트의 LCP 점수를 어떻게 측정합니까?
LCP 점수는 핵심 성능 평가 지표의 일부이므로 Google 도구를 사용하여 측정해야 합니다. Google은 LCP 점수를 측정하는 세 가지 방법을 제공합니다.
- PageSpeed Insights : 이 온라인 서비스를 사용하여 온디맨드로 모든 페이지의 핵심 웹 바이탈을 측정할 수 있습니다. 페이지를 분석할 때 PageSpeed Insights는 성능 및 전반적인 UX 개선을 위한 제안도 반환합니다.
- Google Search Console : 이 서비스를 사용하면 웹사이트의 검색 엔진 최적화(SEO) 및 전반적인 상태를 모니터링할 수 있습니다. Google Search Console에는 PageSpeed Insights의 기본 제공 권장 사항 및 점수도 포함되어 있습니다.
- Lighthouse : 이 Chrome 확장 프로그램을 사용하여 브라우저의 개발 도구를 사용할 때 고급 기능에 액세스할 수 있습니다.
Google은 또한 WordPress 내에서 여러 서비스에 액세스하는 데 사용할 수 있는 Site Kit라는 공식 플러그인을 제공합니다. Site Kit를 사용하면 대시보드를 벗어나지 않고도 LCP 점수를 포함한 PageSpeed Insights 보고서에 액세스할 수 있습니다.
좋은 LCP 점수는 무엇입니까?
Google에 따르면 2.5초 미만이면 좋은 LCP 점수입니다. 웹사이트가 해당 기준을 충족한다고 해서 더 이상 최적화하지 않아도 되는 것은 아닙니다.
이상적으로는 웹사이트 로딩 시간을 최대한 줄이는 것이 좋습니다. 1~2초 미만의 전체 로딩 시간을 목표로 한다면 훨씬 더 나은 사용자 경험을 제공할 수 있습니다.
WordPress에서 LCP 점수를 어떻게 쉽게 최적화할 수 있습니까?
WordPress에서 LCP 점수를 최적화하는 가장 쉽고 빠른 방법은 Jetpack Boost를 설치하는 것입니다. 이 플러그인은 또한 첫 번째 입력 지연 및 누적 레이아웃 이동을 포함하여 다른 핵심 성능 향상 점수를 개선하는 데 도움이 됩니다.
사이트에 Jetpack Boost를 설치하고 활성화하여 시작하십시오.
그런 다음 대시보드에서 Jetpack → Boost 로 이동합니다. 여기에서 CSS 로딩을 최적화하고, 불필요한 JavaScript를 연기하고, 지연 이미지 로딩을 활성화하기 위한 옵션을 볼 수 있습니다. 세 가지 옵션을 모두 활성화하는 것이 좋습니다.
지연 로딩을 활성화하면 웹사이트의 LCP 점수를 높일 수 있습니다. WordPress에는 버전 5.5부터 내장 기능으로 지연 로딩이 포함되어 있지만 최적화하려는 이미지에 대해 수동으로 설정을 활성화해야 합니다.
Jetpack Boost를 사용하면 웹사이트의 모든 이미지에 대해 한 번에 지연 로드를 활성화할 수 있습니다. 모든 페이지에서 가장 큰 요소를 연기하면 LCP 점수가 즉시 향상됩니다.
웹사이트의 핵심 Web Vitals 개선
웹사이트의 Core Web Vitals를 개선하면 더 나은 사용자 경험을 제공하는 데 도움이 될 수 있습니다. 특히 LCP 점수는 방문자가 사이트 성능에 만족하는 정도에 큰 영향을 미칩니다. 점수가 낮다는 것은 웹사이트가 빠르게 로드된다는 것을 의미하고 웹사이트가 빨리 로드된다는 것은 실망한 방문자가 적다는 것을 의미합니다.
WordPress에서 LCP 점수를 높이는 데 사용할 수 있는 가장 효과적인 방법을 요약해 보겠습니다.
- Core Web Vitals를 개선하는 데 도움이 되도록 설계된 플러그인을 사용하십시오.
- CSS를 축소하십시오.
- 렌더링 차단 JavaScript 및 CSS를 연기합니다.
- 웹사이트의 이미지를 최적화하십시오.
- 콘텐츠 전송 네트워크를 사용합니다.
Jetpack Boost를 사용하면 LCP 점수를 포함하여 웹사이트의 Core Web Vitals를 빠르게 최적화할 수 있습니다. Jetpack Boost를 사용하면 해당 설정을 전환하는 것만으로 여러 성능 최적화를 구현할 수 있습니다. 또한 무료이며 나머지 Jetpack 도구 제품군과 원활하게 작동합니다.