WordPress에서 FCP를 개선하는 8가지 실행 가능한 방법

이 기사는 WordPress에서 FCP 또는 First Contentful Paint를 개선할 수 있는 몇 가지 쉬운 방법을 다룰 것입니다. 이 성능 지표를 개선하면 WordPress 웹사이트가 더 나은 사용자 경험을 제공하고 Google에서 더 높은 순위에 오르며 눈에 띄게 빠르게 로드됩니다. 먼저 FCP가 무엇인지 매우 빠르게 살펴보고 WordPress 웹사이트에서 해당 지표를 개선하는 몇 가지 쉬운 방법에 대해 논의해 보겠습니다.

FCP란?

First Contentful Paint라고도 알려진 FCP는 Chrome 사용자 경험 보고서를 통해 실제 사용자로부터 수집한 통계입니다. 이것은 실제 사용자 경험에 대한 보다 현실적인 측정 중 하나입니다. 개별 방문자와 사용자가 웹사이트의 성능을 인식하는 방법을 측정하도록 설계되었습니다. 이는 또한 Google이 모든 웹사이트에서 소비자에게 더 나은 사용자 경험을 제공하는 것을 목표로 웹사이트 유쾌함 캠페인에 사용하기 시작할 많은 속도 통계 중 하나입니다.

First Contentful Paint는 최종 사용자를 위한 시각적 콘텐츠 렌더링의 첫 번째 인스턴스입니다. 이 예에서 FCP는 두 번째 프레임에서 발생하며 사용자를 위해 렌더링된 첫 번째 콘텐츠 요소입니다. 더 빠른 FCP를 사용하면 모든 콘텐츠가 로드될 때까지 사용자가 웹사이트에 남아 있을 수 있습니다.

FCP와 LCP가 무엇인지에 대한 철저한 작성에서 언급했듯이 웹 사이트 및 특정 페이지에 따라 변경됨을 이해해야 합니다. 따라서 FCP는 한 페이지에 있는 항목과 다른 페이지에 있는 항목이 될 수 있습니다. 이것은 최적화 프로세스에 약간의 복잡성을 추가하지만 FCP가 무엇인지 이해하고 이 기사에서 논의된 방법을 따르는 한 계속 진행하는 것이 좋습니다.

Google은 2021년 3월에 이러한 측정항목을 심각한 순위 지표로 사용하기 시작하므로 그 시점 이전에 첫 번째 Contentful Paint를 파악하는 것이 가장 좋습니다.

첫 번째 콘텐츠가 포함된 페인트 테스트 및 이해

First Contentful Paint 메트릭을 이해하고 테스트하는 것은 매우 쉽습니다. Google 페이지 속도 도구만 사용하면 됩니다. URL을 입력하기만 하면 첫 번째 측정항목 중 하나가 웹사이트 로드 속도를 몇 초 만에 알려줍니다.

FCP와 관련하여 로드 시간이 1초 미만인 웹사이트는 빠름, FCP 로드 시간이 3초 미만인 웹사이트는 보통, First Contentful Paint가 3초 이상인 웹사이트는 느린 웹사이트로 분류됩니다. 보시다시피 여기에는 여유가 많지 않으며 Google에서 좋은 순위를 얻으려면 3초보다 훨씬 빠른 FCP가 필요합니다.

좋은 소식은 WordPress에서 First Contentful Paint를 개선하면 즉각적이고 지속적인 개선을 할 수 있는 몇 가지 실행 가능한 방법이 있다는 것입니다. 이러한 솔루션의 대부분에는 최적화 프로세스를 자동화하는 플러그인이 포함되어 있어 WordPress에서 FCP 최적화가 훨씬 쉬워집니다.

따라서 FCP 도입은 생략하고 이 메트릭을 개선할 수 있는 방법을 이해해 보겠습니다. 좋은 FCP가 있더라도 밀리초 단위로 개선하면 사용자 경험이 향상되고 WordPress 웹사이트에서 직접적으로 전환율이 증가하고 이탈률이 낮아질 수 있습니다.

첫 번째 바이트까지의 시간에 초점

FCP 시간을 줄이고 이 점수를 높이기 위해 가장 먼저 할 수 있는 가장 실행 가능한 일은 Time To First Byte에 집중하는 것입니다. 많은 웹사이트는 TTFB가 매우 느립니다. 즉, 브라우저가 웹 페이지 콘텐츠를 처음 수신하는 데 걸리는 시간입니다. TTFB는 HTTP 요청을 가져오고 해당 요청을 처리하는 데 걸리는 시간과 HTTP 요청 자체의 응답 시간을 합한 것입니다.

평신도 용어로 웹 사이트가 서버에 연결하는 데 평균보다 오래 걸리면 최종 사용자가 콘텐츠를 렌더링하고 다운로드하는 속도가 느려져 FCP가 느려집니다.

FCP는 가장 먼저 표시되는 메트릭이므로 TTFB와 거의 직접 관련이 있습니다. WordPress 웹사이트에서 Time To First Byte를 개선하고 First Contentful Paint 점수를 직접 높일 수 있는 두 가지 주요 방법은 빠른 WordPress 호스트를 선택하고 고품질 CDN을 사용하는 것입니다.

빠른 WordPress 호스트가 있는 경우 데이터가 평소보다 훨씬 빠르게 방문자 브라우저로 전송되어 TTFB가 증가합니다. 서버 위치와 관련하여 지리적으로 멀리 떨어진 위치에서 웹 사이트를 로드하는 사용자가 있는 경우 최종 사용자에게 물리적으로 더 가까운 개별 노드가 있는 CDN을 활용하면 TFB가 심각하게 증가하고 훨씬 더 나은 First 만족스러운 페인트 점수.

좋은 워드프레스 호스트와 CDN을 추천할 때 우리는 항상 이것이 통합 솔루션이어야 한다고 말합니다. 개별 CDN과 개별 WordPress 호스트를 찾는 것이 아니라 서비스에 CDN을 통합하는 매우 빠른 WordPress 호스트를 찾아야 합니다. 이렇게 하면 비용이 절약될 뿐만 아니라 훨씬 덜 복잡하고 통합으로 인해 더 빨라질 것입니다.

따라서 FCP를 개선하기 위해 가장 먼저 할 수 있는 일은 좋은 호스트를 찾는 것입니다. 통합 CDN(자동 플랫폼 최적화를 포함하는 Cloudflare 엔터프라이즈)이 있는 최고의 호스트는 Rocket.net입니다.

이것은 한 달에 거의 100,000명의 방문자에게 블로그를 제공하는 데 사용한 WordPress 호스트입니다. 프리미엄 CDN 및 번개처럼 빠른 하드웨어와 전체 페이지 캐시와의 통합으로 인해 TTFB는 엄청나게 낮습니다. 이는 FCP가 제한되지 않음을 의미합니다.

렌더링 차단 리소스 제거

FCP 시간을 최소화하기 위해 할 수 있는 다음 조치는 렌더링 차단 리소스를 제거하는 것입니다. 렌더링 차단 리소스는 웹 페이지의 렌더링 프로세스 중에 호출되는 웹 사이트 요소(일반적으로 CSS 및 JavaScript)입니다.

이들은 렌더링 프로세스를 차단하기 때문에 브라우저는 방문자에게 실제로 DOM 요소를 표시하고, 렌더링 차단 리소스를 다운로드하고, 구문 분석한 다음, 전체 페이지를 계속 렌더링할 때까지 기다려야 합니다.

이 렌더링 차단이 First Contentful 요소도 차단한다고 가정하면 이것이 맞습니다. 그리고 이러한 리소스가 렌더링 프로세스를 오래 차단할수록 First Contentful 요소를 렌더링하는 데 더 오래 걸리므로 FCP 시간 점수가 높아집니다.

렌더링 차단 리소스를 제거하는 가장 좋은 방법은 Asset Cleanup이라는 타사 플러그인을 사용하여 JavaScript 및 CSS를 지연하고 비동기식으로 로드하는 것입니다. 웹 페이지에서 사용되지 않는 다양한 스크립트를 비활성화하여 사용하지 않는 CSS를 최소화할 수도 있습니다. 이는 이 기사의 뒷부분에서 설명합니다.

인라인 중요 CSS

또한 중요한 CSS를 인라인하면 렌더링 프로세스가 끝날 때까지 기본 CSS 스타일시트의 로드를 연기할 수 있습니다. 이것은 자산 정리로 수행할 수 있지만 캐싱 및 최적화 플러그인인 WP Rocket을 결합하는 것도 권장합니다. 이것은 자동 중요한 CSS 생성기를 가지고 있으며 렌더링 차단 리소스를 제거하는 것과 관련하여 매우 잘 작동합니다.

사용하지 않는 CSS 제거

다음으로, 우리가 언급했듯이 사용하지 않는 CSS를 제거할 것입니다. 웹 페이지에서 사용하지 않는 스타일을 로드하는 경우 렌더링 차단이 될 수 있지만 단순히 페이지를 무거워지게 하여 더 많은 데이터를 전송하게 되어 FCP가 느려집니다.

이러한 사용되지 않는 CSS 스타일시트를 제거하는 것은 전송되는 데이터의 양을 최소화하는 좋은 방법이며 중요한 First Contentful 요소가 사이트에 그려질 수 있는 방법을 제거합니다. 이것은 유익한 방식으로 FC 점수에 직접적인 영향을 미칩니다.

이를 위해 자동화된 소프트웨어는 없지만 개별 페이지 및 페이지 범위에서 CSS를 제거하는 데 도움이 되는 플러그인이 있습니다. 위에서 언급했듯이 자산 정리이며 스타일과 스크립트를 켜고 끌 수 있습니다.

그런 다음 웹 사이트의 프론트 엔드를 테스트하여 문제가 있는지 확인할 수 있습니다. 문제가 없으면 사용하지 않는 CSS를 제거하여 웹 사이트를 더 빠르게 로드하고 FCP 점수를 높일 수 있습니다.

스크롤 없이 볼 수 있는 부분 위의 스크립트 요소 제거(예: JS 광고)

웹사이트의 실제 구성 측면에서 볼 때 스크롤 없이 볼 수 있는 부분에 있는 스크립트 기반 요소를 제거하는 것은 WordPress 웹사이트의 First Contentful Paint를 향상시키는 확실한 방법입니다. JavaScript는 최대한 최적화할 수 있지만 구성으로 인해 HTML 및 인라인 중요 CSS보다 렌더링 속도가 항상 느립니다.

따라서 웹 페이지의 첫 번째 콘텐츠가 포함된 페인트로 간주되는 JavaScript(기본적으로 스크롤 없이 볼 수 있는 부분 또는 방문자에게 로드되는 초기 표시 영역에 있는 모든 항목)가 있는 경우 해당 JavaScript를 제거하고 교체해야 합니다. 순수한 HTML로.

이는 일반적으로 스크롤 없이 볼 수 있는 부분에 로드되는 JavaScript 기반 광고를 활용한 콘텐츠 웹사이트의 문제입니다. 이러한 스크립트는 또한 누적 레이아웃 변경에 중대한 부정적인 영향을 미칠 수 있습니다.

더 빠른 로딩 HTML로 교체하면 HTML 및 CSS 기술의 특성으로 인해 First Contentful Paint를 심각하게 개선할 수 있습니다.

폴드 위의 Lazy Load 비활성화 (미쳤습니다. 알아요)

JavaScript 기반 요소를 계속 제거하면서 스크롤 없이 볼 수 있는 부분에 표시되는 이미지를 지연 로드하는 경우 실제로 이 기능을 비활성화할 수 있습니다.

이미지를 지연 로드하는 것은 WordPress 웹사이트의 성능을 향상시키는 좋은 방법이지만 실제로 첫 번째 Contentful Paint에 부정적인 영향을 미칩니다. 그 기능을 활성화하기 위해 JavaScript 라이브러리를 활용하기 때문입니다.

따라서 스크롤 없이 볼 수 있는 부분에 로드되는 이미지의 지연 로드를 비활성화하되 제대로 최적화되었는지 확인하세요. 여기에는 WebP 형식으로 변환(ShortPixel 사용)하고 명확성을 유지하면서 가능한 한 작게 완전히 압축하는 것이 포함됩니다.

인라인 이미지(SVG 또는 Base64)

이미지 최적화로 더 열광하고 싶다면 주요 해상도 요구 사항이 없는 작은 이미지에 대해 인라인할 수 있습니다. 특정 로고나 스크롤 없이 볼 수 있는 부분에 로드되는 작은 이미지가 있는 경우에 유용합니다. SVG 또는 기본 64 형식으로 변환하여 이미지를 인라인하여 다운로드를 위한 추가 HTTP 요청을 줄이고 FCP를 개선합니다.

이 조언은 특정 사용 사례에만 도움이 될 수 있으며 HTTP2 기반 서버가 있거나 줄을 서려고 하는 엄청나게 무거운 이미지가 있는 경우 그대로 유지하는 것이 가장 좋습니다.

그러나 SVG 및 기본 64 로고, 검색 아이콘, 소셜 미디어 아이콘 및 배경을 활용하면 First Contentful Paint에 도움이 될 수 있으며 Google에서 WordPress 웹사이트 점수를 높이고 순위 및 사용자 경험에 도움이 될 수 있습니다.

DOM 크기에 초점

마지막으로 할 수 있는 중요한 일은 DOM 크기에 집중하는 것입니다. DOM 또는 문서 객체 모델은 본질적으로 페이지의 모든 요소를 ​​참조하는 트리와 같은 구조입니다.

따라서 본문 내의 모든 div, 스팬 래퍼, 단락, 헤더, 메탈링크 등은 DOM 요소로 간주됩니다. 페이지에 요소가 많을수록 렌더링 시간이 길어지고 First Contentful Paint는 느려집니다.

따라서 DOM 요소의 수를 줄이면 웹 사이트를 더 빨리 로드할 수 있습니다. 이것은 내부에 배치된 모든 요소로 가능한 한 간결한 페이지를 완전히 다시 작성하거나 새 테마 또는 페이지 빌더를 활용하여 수행할 수 있습니다.

예를 들어 Elementor는 수십 개의 불필요한 div로 요소를 래핑하므로 코드 팽창이 낮은 페이지 빌더로 전환하면 페이지의 DOM 요소 수를 최소화하여 데이터 전송을 줄이고 렌더링 시간을 단축하고 Google에서 더 나은 First Contentful Paint 점수.

결론

First Contentful Paint는 WordPress 웹 사이트의 실제 사용자 경험에서 파생되기 때문에 성능이 낮은 자산으로 스케이트를 탈 수 없습니다. 대신 첫 번째 문제를 해결하고 페인트 점수를 정면으로 처리하여 이 6가지 방법을 최적화에 통합하여 더 나은 사용자 경험, 더 높은 순위 배치 및 더 낮은 이탈률을 달성해야 합니다.

WordPress 웹사이트의 전체 성능을 높이는 데 사용할 수 있는 다른 많은 방법이 있으며 이는 First Contentful Paint에도 도움이 될 것이지만 이 6가지 방법은 WordPress 웹사이트의 사원 페인트에서 첫 번째를 향상시키는 가장 좋은 방법입니다. 추가 최적화 권장 사항이 있는 경우 아래 의견 섹션에 자유롭게 남겨주세요.