WordPress에서 FCP(First Contentful Paint)를 개선하는 방법

First Contentful Paint 소개

First Contentful Paint는 페이지 로딩 속도를 모니터링하는 유용한 지표입니다. 사이트의 성능을 측정하는 다양한 유사한 메트릭이 있습니다. FCP는 특히 콘텐츠의 첫 번째 부분이 페이지에 나타나는 데 걸리는 시간에 중점을 둡니다. FCP가 생성되면 사용자는 나머지가 진행 중임을 알게 됩니다.

이는 Google Core Web Vitals의 LCP(Largest Contentful Paint) 측정항목과 유사합니다. 그러나 LCP는 사이트의 "메인" 콘텐츠를 로드하는 데 걸리는 시간을 측정하는 반면 FCP는 메인 콘텐츠일 수도 있고 아닐 수도 있는 첫 번째 콘텐츠에만 집중합니다.

FCP 점수에 기여하는 많은 요소가 있습니다. JavaScript 파일과 제대로 최적화되지 않은 HTML은 이를 처리하는 데 많은 리소스가 필요하기 때문에 성능 저하의 일반적인 원인입니다. 또한 렌더링 차단 스크립트는 다른 작업을 수행하기 전에 처리해야 하므로 FCP 점수에 영향을 줄 수 있습니다.

FCP 점수는 전체 웹사이트 속도를 나타내는 지표이기 때문에 중요합니다. 성능은 UX에 매우 중요할 뿐만 아니라 Google과 같은 검색 엔진이 페이지 순위 지정 방법을 결정할 때 고려하는 요소이기도 합니다. 성능이 좋지 않으면 검색 순위가 낮아질 수 있습니다. 즉, First Contentful Paint를 개선하는 방법을 모르면 웹 사이트의 가시성에 영향을 미칠 수 있습니다.

첫 번째 만족스러운 페인트 측정 방법

FCP는 사용자 인식에 대한 창을 제공하지만 여전히 실험실 테스트 및 현장 데이터를 통해 객관적으로 측정할 수 있는 메트릭입니다. 예를 들어 PageSpeed ​​Insights는 실제 사용자가 경험하는 것을 볼 수 있게 해주는 도구입니다( 사이트에 Chrome 사용자 경험 보고서에 포함될 만큼 충분한 트래픽이 있는 경우 ).

사이트에 실제 사용자 경험을 확인하기에 충분한 데이터가 없는 경우에도 PageSpeed ​​Insights는 모의 실험실 테스트에서 FCP 데이터를 수집하는 데 도움을 줄 수 있습니다.

사용하려면 URL을 입력하고 즉시 결과를 얻으십시오.

또한 모바일 보기와 데스크탑 보기 사이를 전환하여 다양한 장치에서 웹사이트가 얼마나 반응하는지 확인할 수 있습니다.

FCP 측정을 위한 또 다른 유용한 도구는 WebPageTest로, 시간이 조금 더 걸리지만 보다 심층적인 분석을 제공할 수 있습니다.

좋은 FCP 시간은 무엇입니까?

Chrome에 따르면 사이트의 FCP 점수는 1.8초 미만이면 좋은 것입니다. FCP 점수가 3초를 초과하면 걱정할 필요가 있습니다.

그러나 현재 사이트의 FCP 점수가 높더라도 항상 개선의 여지가 있습니다.

WordPress에서 First Contentful Paint를 개선하는 방법(6가지 기술)

이제 FCP에 대해 조금 더 알게 되었으므로 6가지 효과적인 방법을 통해 사이트에서 First Contentful Paint를 개선하는 방법을 살펴보겠습니다.

1. 콘텐츠 전송 네트워크(CDN) 사용
2. 이미지 최적화 및 압축
3. 렌더링 차단 리소스 제거
4. DOM 크기 줄이기
5. 서버 응답 시간 개선
6. 너무 많은 페이지 리디렉션 방지

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

콘텐츠 전송 네트워크(CDN)는 전체 로딩 시간을 단축할 수 있는 손쉬운 방법입니다. 하나가 없으면 사용자가 웹사이트를 방문할 때 사이트의 기본 서버와 해당 위치 간에 필요한 데이터가 전송되는 동안 기다려야 합니다. 이로 인해 호스팅 제공업체의 서버에서 지리적으로 멀리 떨어져 있는 사용자의 대기 시간이 길어질 수 있습니다.

반면 CDN은 전 세계에 분산된 서버 네트워크를 제공합니다. 따라서 각 방문자에게 물리적으로 가장 가까운 서버에서 콘텐츠를 전달할 수 있습니다.

CDN의 한 가지 인기 있는 예는 전 세계에 275개 이상의 데이터 센터를 보유한 Cloudflare입니다.

Cloudflare를 사용하면 무손실 이미지 최적화와 같은 다른 최적화 기술을 활용할 수 있습니다.

일반적으로 CDN은 캐싱 및 기타 전략을 사용하여 FCP를 개선합니다. 예를 들어 CDN 공급자는 축소 및 파일 압축을 제공하여 웹 사이트를 가볍게 할 수 있습니다. 이를 통해 대기 시간을 줄이고 UX를 개선하며 기본 서버의 부하를 완화할 수 있습니다.

2. 이미지 최적화 및 압축

이미지가 웹사이트에 로드되는 첫 번째 요소인 경우는 드뭅니다. 그러나 포트폴리오나 사진 쇼케이스와 같이 미디어가 많은 사이트를 운영하는 경우 FCP 점수(및 전반적인 성능)를 향상시키기 위해 이미지를 최적화하고 압축하는 것이 중요합니다.

이미지를 최적화하는 한 가지 방법은 다른 파일 형식으로 전환하는 것입니다. 예를 들어 현재 JPG/JPEG 또는 PNG에 의존하는 경우 SVG 또는 WebP와 같이 더 나은 압축 형식으로 이동할 수 있습니다.

또한 필요에 맞는 가장 작은 크기로 이미지 크기를 조정하고 압축하여 크기를 더 줄여야 합니다.

온라인 도구를 사용하여 이 모든 작업을 수동으로 수행할 수 있지만 WordPress 사용자를 위한 훨씬 간단한 방법은 이미지 최적화 플러그인을 사용하는 것입니다.

예를 들어 무료 Optimole 플러그인은 이미지 크기를 자동으로 조정, 압축 및 변환할 수 있습니다. 또한 일석이조로 두 마리의 새를 죽이는 내장 CDN에서 서비스를 제공할 수도 있습니다.

또한 이 도구를 사용하면 방문자가 사이트에 액세스하는 데 사용하는 장치에 관계없이 빠른 속도로 고품질 이미지를 제공할 수 있습니다. 지연 로딩 및 이미지 크기 조정과 같은 기능을 사용하여 이미지를 더욱 완벽하게 만들 수 있습니다.

3. 렌더링 차단 리소스 제거

렌더링 차단 리소스는 사이트의 초기 콘텐츠를 로드하는 데 중요하지 않더라도 브라우저에서 먼저 처리해야 하므로 콘텐츠가 빠르게 로드되지 않을 수 있습니다. 결과적으로 FCP 점수가 느려질 수 있습니다. 여기에는 HTML 코드, CSS 스타일 시트 및 JavaScript 파일이 포함될 수 있습니다.

First Contentful Paint를 개선하는 방법이 궁금하다면 렌더링 차단 리소스를 제거하는 몇 가지 방법이 있습니다. 개발에 익숙하고 페이지에서 사용되지 않는 코드를 발견하면 계속해서 삭제할 수 있습니다. 또한 중요한 리소스를 식별하고 <script> 및 <style> 태그를 사용하여 페이지 내에서 "인라인"할 수 있습니다.

또한 JavaScript를 연기할 수 있으므로 브라우저가 이러한 파일을 처리할 때까지 기다리는 동안 콘텐츠가 지연되지 않습니다. 또한 Critical CSS를 생성하여 “접힌 부분 위에”(사용자가 즉시 보는 부분) 콘텐츠를 표시할 수 있습니다. 개발자가 아닌 경우 Jetpack과 같은 도구를 사용하여 이러한 변경을 수행할 수 있습니다.

4. DOM 크기 줄이기

웹 페이지가 로드되면 브라우저는 DOM(문서 객체 모델)을 생성합니다. 이것은 페이지를 구성하는 모든 개체를 나타냅니다.

페이지에 DOM 노드(HTML 태그)가 너무 많거나 너무 깊게 중첩되어 있으면 브라우저가 페이지를 처리하는 데 시간이 더 오래 걸립니다. 이로 인해 로딩 속도가 느려지고 FCP 점수가 낮아질 수 있습니다.

따라서 DOM 크기를 줄임으로써 FCP를 개선할 수 있습니다. 불필요한 <div> 태그를 삭제하고, 긴 페이지를 더 작은 페이지로 분할하고, 아카이브 또는 홈페이지의 게시물 수를 제한하여 이 작업을 수동으로 수행할 수 있습니다.

또한 Optimole과 같은 최적화 플러그인을 사용하여 HTML 요소를 지연 로드할 수 있습니다. 지연 로딩은 필요할 때까지 콘텐츠 로딩을 지연시키는 기술입니다. 모든 것을 한 번에 처리하는 대신 브라우저는 즉시 표시되는 요소를 제공하는 데 집중할 수 있습니다.

최적화된 테마를 선택하면 많은 테마(및 페이지 빌더)가 너무 많은 <div> 태그를 사용하므로 DOM 크기를 줄이는 데 도움이 될 수 있습니다. 새로운 테마를 찾고 있다면 빠르고 가벼우며 고품질 코드만 사용하는 Neve를 확인하는 것이 좋습니다.

5. 서버 응답 시간 개선

서버 응답 시간은 TTFB(Time to First Byte)라고도 합니다. 이 메트릭은 사용자가 요청을 하는 시점과 서버가 정보의 첫 번째 바이트를 보내는 시점 사이에 걸리는 시간을 측정합니다.

서버 응답 시간(결과적으로 FCP 점수)을 개선하는 방법에는 여러 가지가 있습니다.

첫째, 양질의 호스팅 제공업체를 선택하는 것이 중요합니다. 특히 WordPress 웹사이트에 적합한 호스트를 찾고 해당 서버의 위치에 주의를 기울이는 것이 가장 좋습니다. 이상적으로는 호스트에 주요 청중과 가까운 서버가 있어야 합니다.

호스트의 성능을 향상시키려면 데이터 기반의 가장 빠른 WordPress 호스팅 컬렉션에서 공급자를 선택할 수 있습니다.

그러나 호스팅 공급자가 편리한 서버를 제공하지 않는 경우 항상 CDN을 선택할 수 있습니다. 앞서 First Contentful Paint를 개선하는 방법을 논의할 때 이야기했습니다.

캐싱은 응답 시간을 줄이는 좋은 방법입니다. 일부 호스트는 내장 캐싱을 제공합니다. 또는 WP Rocket 또는 WP Fastest Cache와 같은 캐싱 플러그인을 설치할 수 있습니다.

6. 너무 많은 페이지 리디렉션 피하기

다른 사이트로 즉시 리디렉션되는 페이지를 방문하면 브라우저는 새 위치에 대한 또 다른 HTTP 요청을 만들어야 합니다. 이로 인해 웹 페이지 로딩이 지연되므로 FCP 점수가 낮아질 수 있습니다.

페이지에 리디렉션이 많을수록 FCP 점수가 더 나빠질 수 있습니다. 또한 너무 많은 페이지 리디렉션은 UX를 심각하게 방해할 수 있습니다.

사이트 전체에서 문제가 발생하는 경우 www에서 www가 아닌 ​​곳(또는 그 반대) 및/또는 HTTP에서 HTTPS로의 리디렉션을 관리하는 방법을 조사할 수 있습니다.

예를 들어 http://www.yoursite.com 에서 http://yoursite.com 으로 리디렉션한 다음 다시 https://yoursite.com 으로 리디렉션하는 경우 한 번에 수행하는 것이 더 효율적입니다.

리디렉션이 단일 페이지의 FCP에만 영향을 미치는 경우 해당 페이지에 대해 만든 모든 리디렉션을 조사할 수 있습니다.

시간이 오래 걸릴 수 있지만 리디렉션을 수동으로 관리할 수 있습니다. 일반적으로 리디렉션과 같은 WordPress 플러그인을 선택하는 것이 좋습니다.

일단 설치되면 이 도구를 사용하여 리디렉션을 쉽고 빠르게 관리할 수 있습니다.

지금 사이트의 FCP 시간을 개선하세요.

복잡하거나 콘텐츠가 많은 웹사이트에서는 빠른 로딩 시간을 유지하기 어려울 수 있습니다. 다행히 FCP(First Contentful Paint)와 같은 주요 메트릭을 대상으로 하여 방문자가 콘텐츠를 보는 데 걸리는 시간을 평가하고 개선할 수 있습니다.

요약하자면 WordPress에서 First Contentful Paint를 개선하는 방법은 다음과 같습니다.

사이트 속도를 높이는 다른 방법에 대해서는 WordPress 속도를 높이는 다양한 방법 모음을 확인하십시오.

WordPress에서 FCP를 개선하는 것에 대해 질문이 있습니까? 아래 댓글 섹션에서 알려주세요!