WordPress에서 FCP(First Contentful Paint)를 개선하는 방법(서버 측 및 프런트 엔드 최적화)

WordPress 사이트를 로드하는 데 시간이 오래 걸린다고 느낀 적이 있나요? 그렇다면 당신은 혼자가 아닙니다. 느린 웹사이트는 사용자를 좌절시키고 검색 순위를 떨어뜨립니다. 하지만 걱정하지 마세요, WordPress 개발자 여러분! 이 문서에서는 FCP(First Contentful Paint)라는 주요 지표 개선을 단순화합니다.

FCP를 사용자가 텍스트나 이미지와 같은 실제 콘텐츠의 첫 번째 비트를 보는 순간으로 생각하십시오. 빨리 나타날수록 더 행복해집니다. 느린 FCP? 유용한 콘텐츠를 보기 전에 클릭하여 나갈 수도 있습니다.

이 기사에서는 FCP 개선 사항을 훈련 중인 코딩 전문가도 이해할 수 있는 쉬운 단계로 분류하겠습니다. 특별한 스타일("중요한 CSS")을 사용하고 장애물("렌더링 차단 리소스")을 제거하는 방법에 대해 이야기하겠습니다.

FCP란 무엇이며 왜 중요한가요?

FCP는 브라우저가 페이지에서 의미 있는 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정하는 중요한 지표입니다. 이는 텍스트, 이미지, 아이콘 또는 로딩 스피너나 배경색 이외의 모든 요소일 수 있습니다.

본질적으로 방문자가 마침내 눈에 띄는 것을 보는 순간, 즉 웹사이트가 살아 있고 활발하게 활동하고 있다는 신호입니다. 빠른 FCP는 방문자에게 "저희가 왔습니다. 여러분에게 멋진 것을 보여줄 준비가 되어 있습니다!"라고 말합니다.

반면, 느린 FCP는 느린 이미지와 잠재적인 기술적 문제를 전달합니다. 이로 인해 실망한 방문자가 콘텐츠를 경험하기도 전에 이탈하여 참여 및 전환율에 영향을 줄 수 있습니다.

FCP를 개선하는 것은 귀하의 웹사이트가 최초의 "와우" 순간을 즉시 전달하도록 보장하는 것입니다. 페이지 렌더링 방식을 제어함으로써 사용자 경험을 개선하고 SEO 순위를 높이며 진정으로 빛나는 웹사이트를 만들 수 있습니다.

좋은 FCP 점수란 무엇입니까?

1.8초 이하의 FCP를 목표로 하세요. 이 기간을 통해 대부분의 사용자는 귀하의 사이트가 빠르고 반응이 빠르다고 인식하게 됩니다. Google은 이를 좋은 사용자 경험으로 간주합니다.

1.8초가 목표이지만 더 빠른 속도를 위해 노력하세요. 모바일 및 데스크톱 장치에 걸쳐 분류된 페이지 로드의 75번째 백분위수는 이상적으로 이 범위에 속해야 합니다. 이는 일관성을 보장하고 다양한 장치 유형과 네트워크 속도를 충족시킵니다.

분석은 다음과 같습니다.

0~1.8 초: 좋아요! 사용자는 귀하의 사이트가 매우 빠른 것으로 인식합니다.
1.8~3 초: 여전히 좋지만 잠재적인 사용자 불만을 피하기 위해 개선을 목표로 합니다.
3 초 이상: 나쁨! 방문자는 속도가 느려서 이탈할 수 있습니다.

– 출처 : web.dev

FCP 문제 진단

Lighthouse, Google PageSpeed ​​Insights 및 GTmetrix와 같은 도구는 웹사이트를 분석하고 FCP를 지연시키는 특정 요소를 찾아낼 수 있습니다. 다음과 같은 범인을 찾으십시오.

• 크거나 최적화되지 않은 이미지
• 렌더링 차단 리소스
• 중량급 글꼴
• 지나치게 복잡한 JS 및 CSS

용의자를 식별한 후에는 더 깊이 조사하여 그 영향을 이해하십시오. Google PageSpeed ​​Insights와 같은 도구는 자세한 성능 분석을 제공하여 FCP에 영향을 미치는 특정 스크립트, 스타일 및 네트워크 요청을 정확히 찾아내는 데 도움이 됩니다.

Google PageSpeed ​​Insights를 열고 검색창에 웹사이트 URL을 입력한 후분석 을 클릭하세요.

• 이를 통해 FCP 및 전반적인 성능을 개선하기 위해 개선할 수 있는 영역을 강조하는 자세한 보고서가 생성됩니다.

• FCP 지표를 주시하십시오. 실제 콘텐츠의 첫 번째 부분이 방문자의 화면에 표시되는 데 걸리는 시간을 알려줍니다.

• 다음으로 PageSpeed ​​Insights의진단 섹션을 확인하세요.귀하의 사이트에서 FCP를 개선할 수 있는 구체적인 방법이 나열되어 있습니다.

FCP 개선 전략

진정으로 매력적인 경험을 만들려면 서버 측 최적화와 프런트 엔드 최적화라는 두 가지 측면에서 FCP를 다루어야 합니다. 각각에 대해 실행 가능한 전략을 살펴보겠습니다.

서버 측 최적화

웹페이지 표시에 필요한 데이터를 빠르게 전송하기 위해 서버를 변경하는 작업입니다. 이는 좋은 캐싱 방법을 사용하고, 보내기 전에 파일을 압축하고, 서버가 더 빠르게 응답하도록 함으로써 수행될 수 있습니다.

1. 서버 응답 시간(TTFB) 단축

TTFB(Time to First Byte)는 웹 서버나 기타 네트워크 리소스의 응답성을 나타내는 데 사용되는 측정값입니다.

서버의 소프트웨어 구성을 최적화하고 효율적인 데이터베이스 쿼리를 보장하며 HTTP 요청을 최소화하면 TTFB를 줄일 수 있습니다.

1.1. 더 나은 호스팅 제공업체를 선택하세요

호스팅 제공업체의 선택은 사이트 성능에 큰 영향을 미칠 수 있습니다. 탁월한 가동 시간, 강력한 보안 조치 및 고속 하드웨어를 제공하는 공급자를 찾으십시오.

Cloudways는 성능과 최적화를 우선시하므로 좋은 선택이 될 수 있습니다. 또한 안정적인 가동 시간을 제공하므로 사용자가 항상 귀하의 웹사이트에 액세스할 수 있습니다. 웹 사이트 성능을 향상시키기 위해 Cloudways가 무엇을 제공하는지 살펴보겠습니다. 여기에서 자세한 내용을 읽을 수도 있습니다.

1.2. 서버 소프트웨어 최적화

여기에는 최적의 성능을 보장하기 위해 웹 서버 소프트웨어 구성을 미세 조정하는 작업이 포함됩니다. 여기에는 압축 활성화, 속도와 보안을 위한 SSL/TLS 구성 최적화, 정적 파일을 효율적으로 제공하도록 서버 구성 등이 포함될 수 있습니다.

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

CDN은 전 세계 다양한 위치에 분산된 서버 네트워크입니다.

사용자가 사이트에서 파일을 요청하면 CDN에서 가장 가까운 서버에서 파일이 전달되므로 로드 시간이 더 빨라집니다. CDN은 트래픽 급증과 DDoS 공격으로부터 사이트를 보호하는 데도 도움이 됩니다.

Cloudways 사용자의 경우 Cloudflare CDN을 통합하면 단순한 지리적 배포 이상의 추가 이점을 얻을 수 있습니다. Cloudways 계정과 원활하게 통합되어 설정 및 관리가 단순화됩니다. 또한 Cloudflare CDN에는 다음과 같은 기능이 포함되어 있습니다.

2. 서버 수준 캐싱 활용

서버 수준 캐싱은 사이트 페이지의 복사본을 임시 저장 위치에 저장하여 웹 사이트 속도를 크게 향상시킬 수 있습니다. 이렇게 하면 페이지 보기를 생성하는 데 필요한 작업량이 줄어들어 사용자의 로드 시간이 더 빨라집니다.

2.1. 서버 수준 캐싱을 위한 WP 플러그인

서버 수준 캐싱을 구현하는 데 도움이 되는 여러 가지 WordPress 플러그인이 있습니다. 여기에는 다음이 포함됩니다.

1. W3 Total Cache: 이 플러그인은 페이지 캐싱, 객체 캐싱, 브라우저 캐싱을 포함한 포괄적인 캐싱 옵션 제품군을 제공합니다.
2. WP Super Cache: 이 사용자 친화적인 플러그인은 동적 WordPress 사이트에서 정적 HTML 파일을 생성합니다. 웹 서버는 더 무거운 PHP 스크립트를 처리하는 대신 이러한 HTML 파일을 사용합니다.

2.2. 서버 측 캐싱 규칙 구성

서버 측 캐싱을 구성하려면 서버가 콘텐츠를 캐시하는 방법과 시기에 대한 규칙을 설정해야 합니다. 다음은 몇 가지 일반적인 단계입니다.

• 캐싱 활성화: 이는 일반적으로 서버의 구성 파일(예: Apache 서버의 경우 .htaccess)을 통해 수행됩니다.
• 캐시 제어 헤더 설정: 이 헤더는 캐시할 파일 유형과 해당 파일을 저장할 기간을 정의합니다.
• ETag 구성: ETag는 캐시된 콘텐츠가 마지막으로 캐시된 이후 변경되었는지 브라우저가 확인하는 데 도움이 됩니다.
• 만료 헤더 사용: 이 헤더는 브라우저에 콘텐츠를 캐시할 기간을 알려줍니다.

프런트엔드 최적화

이는 웹페이지를 더 빠르게 표시하기 위해 사용자 기기를 변경하는 것입니다. 이는 페이지 속도를 늦추는 리소스 사용을 줄이고, CSS 및 JavaScript 파일을 개선하고, 필요할 때만 이미지를 로드함으로써 가능합니다.

3. 렌더링을 방해하는 리소스 제거

CSS, JavaScript 등의 렌더링 차단 리소스로 인해 웹사이트 로드 시간이 느려질 수 있습니다. 이 문제를 해결하는 방법은 다음과 같습니다.

3.1. 중요한 CSS를 식별하고 먼저 로드하세요.

중요 CSS는 웹페이지의 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 최소한의 차단 CSS 세트입니다. HTML 문서에서 중요한 CSS를 식별하고 인라인하고 다른 모든 CSS 스타일의 로드를 연기합니다.

3.2. 중요하지 않은 JavaScript 지연 또는 비동기 로딩

중요하지 않은 JavaScript는 페이지 렌더링 속도를 높이기 위해 비동기적으로 지연되거나 로드될 수 있습니다. 이를 달성하려면 스크립트 태그에 defer 또는 async 속성을 사용하세요.

HTML 문서가 완전히 구문 분석될 때까지 중요하지 않은 JavaScript의 로드를 연기하려면 스크립트 태그에 defer 속성을 사용하십시오.

 <script src="non-critic.js" defer></script>

또는 async 속성을 사용하여 스크립트를 비동기적으로 로드합니다.

 <script src="non-tical.js" 비동기></script>

3.3 사용하지 않는 스크립트 및 스타일 제거

사용하지 않는 스크립트와 스타일을 제거하여 불필요한 바이트를 제거합니다. 다음 도구는 사용되지 않는 CSS를 식별하고 제거하는 데 도움이 될 수 있습니다.

1. PurifyCSS: 이 도구는 사용하지 않는 CSS를 제거하는 데 사용할 수 있습니다. 소스 파일을 확인하고 CSS에서 사용하지 않는 선택기를 제거합니다.
2. UnCSS: PurifyCSS와 유사하게 UnCSS는 스타일시트에서 사용하지 않는 스타일도 제거합니다.
3. Chrome DevTools: Chrome DevTools의 Coverage 탭은 사용되지 않는 JavaScript 및 CSS 코드를 식별하는 데 도움이 될 수 있습니다.

4. CSS 구조 최적화

CSS를 최적화하면 렌더링 시간이 빨라지고 사용자 경험이 향상될 수 있습니다. 방법은 다음과 같습니다.

4.1. CSS 파일 축소 및 줄이기

축소는 코드에서 불필요한 문자를 제거하여 크기를 줄여 로드 시간을 향상시킵니다. 압축은 CSS 파일의 크기를 줄여 브라우저에 대한 전달을 최적화합니다. Breeze는 내장된 CSS 축소 기능을 통해 모든 CSS 파일을 자동으로 최소화하여 로딩 시간을 단축합니다. 또한 중요한 CSS를 인라인하기 위한 별도의 옵션을 제공하여 FCP를 더욱 향상시킵니다.

4.2. 주요 CSS 요청 미리 로드

<link> 태그의 preload속성을 사용하면 브라우저가 주요 CSS 파일을 가능한 한 빨리 다운로드할 수 있으므로 페이지를 렌더링하는 데 걸리는 시간을 줄일 수 있습니다. 다음은 preload 속성을 사용하여 CSS 파일을미리 로드하는 방법의 예입니다.

 <link rel="preload" href="styles.css" as="style">

이는 곧 필요할 가능성이 있는 styles.css 파일 다운로드를 즉시 시작하도록 브라우저에 지시합니다.as="style" 속성은 브라우저가 리소스 다운로드에 대한 올바른 우선순위를 설정하는 데 도움이 되므로 중요합니다.

참고: 너무 많은 리소스를 미리 로드하면 필요한 대역폭을 사용하여 성능이 저하될 수 있으므로 주의하세요.초기 페이지 로드 시 중요한 CSS 파일만 미리 로드하는 것이 좋습니다.

5. 스크롤 없이 볼 수 있는 부분 위에 JavaScript 의존 요소를 피하세요

JavaScript 종속 요소로 인해 웹사이트 로드 시간이 느려질 수 있습니다. 이 문제를 해결하는 방법은 다음과 같습니다.

5.1. 애니메이션 및 슬라이더에 대체 솔루션 사용

JavaScript 기반 애니메이션 및 슬라이더 대신 CSS 애니메이션이나 HTML5 비디오를 사용해 보세요. 이러한 대안은 페이지 로드 시간에 미치는 영향을 줄이면서 유사한 기능을 제공할 수 있습니다.

CSS 애니메이션은 JavaScript 애니메이션을 대체할 수 있는 강력한 기능입니다. 이는 더 나은 성능을 위해 하드웨어 가속을 사용할 수 있는 브라우저의 렌더링 엔진에 의해 수행됩니다.

다음은 간단한 CSS 애니메이션의 예입니다.

 @keyframes 슬라이드 {
  { 변환: 번역X(0); }
  { 변환: 번역X(100px); }
}

.myElement {
  애니메이션: 슬라이드 2초 무한;
}

HTML5 비디오를 사용하면 JavaScript에 의존하지 않고도 풍부하고 동적인 콘텐츠를 만들 수 있습니다. 이는 모든 최신 브라우저에서 지원되며 표준 HTML5 비디오 API를 사용하여 제어할 수 있습니다.

 <video width="1080" height="720" 컨트롤>
  <source src="movie.mp4" type="video/mp4">
  귀하의 브라우저는 video 태그를 지원하지 않습니다.
</video>

5.2. 필수적이지 않은 JavaScript 실행 지연

필수적이지 않은 JavaScript는 페이지가 로드될 때까지 연기될 수 있습니다. 이를 통해 브라우저는 페이지를 더 빠르게 렌더링하고 사용자 경험을 향상시킬 수 있습니다.

<script> 태그의 defer속성을 사용하면 HTML 문서가 완전히 구문 분석된 후 브라우저가 스크립트를 실행할 수 있습니다.

 <script src="script.js" 연기></script>

async 속성을 사용하면 페이지 렌더링을 차단하지 않고 스크립트를 다른 리소스와 병렬로 가져와 사용 가능한 즉시 실행할 수 있습니다.

 <script src="script.js" 비동기></script>

JavaScript는 페이지가 로드될 때까지 필수적이지 않은 JavaScript의 실행을 지연하는 데 사용할 수 있는 DOMContentLoaded 및 load와 같은 이벤트를 제공합니다.

 window.addEventListener('load', function() {
  // 여기에 코드가 있습니다
});

6. 스크롤 없이 볼 수 있는 부분에 이미지를 지연 로딩하는 것을 피하세요

지연 로딩은 필요할 때만 이미지를 로드하여 성능을 향상시킬 수 있습니다. 그러나 스크롤 없이 볼 수 있는 부분 위에 나타나는 지연 로딩 이미지를 피하는 것이 중요합니다. 방법은 다음과 같습니다.

6.1. 중요한 이미지 미리 로드

미리 로드하면 브라우저가 중요한 이미지를 최대한 빨리 다운로드할 수 있습니다. 이렇게 하면 페이지를 렌더링하는 데 걸리는 시간이 줄어들고 사용자 경험이 향상됩니다. 방법은 다음과 같습니다.

• HTML의링크 요소에 rel속성의preload값을 사용하세요. 이는 브라우저에 가능한 한 빨리 지정된 리소스 다운로드를 시작하도록 지시합니다.
• 서버가 HTTP/2를 지원하는 경우 서버 푸시를 사용하여 리소스가 요청되기 전에 클라이언트에 보낼 수 있습니다. 이는 중요한 이미지를 미리 로드하는 데 특히 효과적일 수 있습니다.

6.2. 스크롤 없이 볼 수 있는 이미지 최적화 기술 사용

스크롤 없이 볼 수 있는 부분 위에 표시되는 이미지를 압축하고 크기를 적절하게 조정하며 WebP와 같은 최신 이미지 형식을 사용하여 최적화하세요.

7. 이미지 최적화 및 압축

이미지 최적화는 페이지 로드 시간을 크게 줄이고 대역폭 사용량을 줄이며 사용자 경험을 향상시킬 수 있습니다. 방법은 다음과 같습니다.

7.1. 올바른 이미지 형식과 압축 수준을 선택하세요

이미지 내용에 따라 다양한 이미지 형식과 압축 수준을 사용할 수 있습니다. 예를 들어, 사진에는 JPEG를 사용하고, 색상이 거의 없는 그래픽에는 PNG를, 벡터 이미지에는 SVG를 사용합니다.

Imagify를 사용하면 한 번의 클릭으로 쉽게 이미지 크기를 조정하고 압축할 수 있으며 최고의 WordPress 이미지 최적화 플러그인 중 하나로 간주됩니다. 지침은 다음과 같습니다.

• 먼저 WordPress 사이트에 Imagify 플러그인을 설치하고 활성화하세요.
• 이메일 주소를 사용하여 API 키를 생성하세요. 생성되면 이 키를 복사하여WordPress Dashboard > Settings > Imagify 경로에 붙여넣습니다.
• WordPress 대시보드 → 설정 → Imagify → 최적화 섹션 으로 이동합니다.

최적화 섹션에서 사이트에 WebP 형식으로 이미지 표시 옵션과 <picture> 태그 사용 옵션을선택하세요.

7.2. 반응형 이미지 기술 사용

HTML의srcset 속성과 같은 반응형 이미지 기술을 사용하면 브라우저는 기기의 화면 크기와 해상도에 따라 가장 적절한 이미지 소스를 선택할 수 있습니다.이를 통해 대역폭 사용량을 줄이고 모바일 장치의 로드 시간을 개선할 수 있습니다.

8. DOM 크기 줄이기

DOM(문서 개체 모델)의 크기를 줄이면 성능이 향상될 수 있습니다. 다음은 몇 가지 전략입니다.

8.1. HTML 마크업 최소화

HTML을 깔끔하고 간결하게 유지하세요. 불필요한 태그를 제거하고, 의미 있는 HTML 요소를 사용하고, 가능한 경우 인라인 스타일을 피하세요.

HTML을 깔끔하고 간결하게 유지하려면 다음을 수행할 수 있습니다.

• W3C Markup Validation Service와 같은 HTML 유효성 검사기를 사용하여 불필요한 태그를 식별하고 제거합니다.
• 콘텐츠에 대한 추가 정보를 제공하려면 <article>, <section> 및 <nav>와 같은 의미 있는 HTML 요소를 사용하세요.
• 인라인 스타일 대신 <head> 섹션에 외부 CSS 스타일시트나 내부 CSS를 사용하세요.

 <!-- 좋아요 -->
<머리>
    <스타일>
        .내 수업 {
            파란색;
        }
    </style>
</head>
<본문>
    <div class="myClass">안녕하세요, 세계!</div>
</body>

<!-- 나쁨 -->
<본문>
    <div>안녕, 세계!</div>
</body>

8.2. 불필요하게 중첩된 요소 피하기

깊게 중첩된 요소는 DOM을 더 크고 복잡하게 만들어 페이지 렌더링 속도를 저하시킬 수 있습니다. HTML 구조를 가능한 한 단순하게 유지하십시오.

DOM을 더 크고 복잡하게 만드는 것을 방지하려면 다음을 수행할 수 있습니다.

• 중첩된 테이블이나 div 대신 레이아웃 목적으로 CSS Flexbox 또는 Grid를 사용하세요.
• CSS 결합자를 사용하면 HTML 복잡성을 증가시키지 않고 요소의 스타일을 지정할 수 있습니다.

깊게 중첩된 요소에 직접 액세스하려면Document.querySelector() 또는 Document.querySelectorAll()을사용하십시오.

 <!-- 좋아요 -->
<div 클래스="컨테이너">
    <div class="item">항목 1</div>
    <div class="item">항목 2</div>
</div>

<!-- 나쁨 -->
<div>
    <div>
        <div>항목 1</div>
    </div>
    <div>
        <div>항목 2</div>
    </div>
</div>

9. 웹폰트 로드 중에 텍스트가 계속 표시되는지 확인

웹 글꼴로 인해 사이트 속도가 느려질 수 있지만 웹 글꼴을 로드하는 동안 텍스트가 계속 표시되도록 하면 이를 완화할 수 있습니다.

9.1. "스왑" 또는 "대체"와 같은 글꼴 표시 옵션 사용

CSS글꼴 표시 속성은 글꼴이 다운로드되어 사용할 준비가 되었는지 여부와 시기에 따라 글꼴이 표시되는 방식을 제어합니다.

"스왑" 값은 사용자 정의 글꼴이 로드될 때까지 대체 글꼴을 사용하여 텍스트를 표시하도록 브라우저에 지시하는 반면, "폴백" 값은 글꼴에 짧은 차단 기간과 무한 스왑 기간을 제공합니다.

"swap" 또는 "fallback"과 같은 글꼴 표시 옵션을 사용하려면 CSS의 @font-face 규칙에 글꼴 표시속성을 추가하면 됩니다. 방법은 다음과 같습니다.

 @글꼴-얼굴 {
  글꼴 계열: 'MyFont';
  src: url('/path/to/myfont.woff2') 형식('woff2'),
       url('/path/to/myfont.woff') 형식('woff');
  글꼴 표시: 교환; /* 또는 대체 */
}

이는 사용자 정의 글꼴이 로드될 때까지 브라우저가 대체 글꼴을 사용하여 텍스트를 표시하도록 지시합니다. "대체"를 사용하는 경우 글꼴은 짧은 차단 기간과 무한 스왑 기간을 갖습니다.

9.2. 로컬로 또는 CDN에서 웹폰트 호스팅

웹폰트를 로컬로 호스팅하거나 CDN(Content Delivery Network)에서 호스팅하면 HTTP 요청 수를 줄이고, 브라우저 캐싱을 활용하고, 콘텐츠 전달 속도를 향상시켜 로드 시간을 단축할 수 있습니다.

웹폰트를 로컬로 호스팅하거나 CDN에서 호스팅하려면 다음 단계를 따르세요.

• Google Fonts, Font Squirrel 등과 같은 소스에서 웹폰트 파일을 다운로드할 수 있습니다.
• 웹폰트를 로컬로 호스팅하는 경우 파일을 서버에 업로드하세요. CDN을 사용하는 경우 CDN의 지침에 따라 파일을 업로드하세요.
• CSS에서 @font-face 규칙을 사용하여 글꼴 파일의 위치를 ​​가리킵니다.

 @글꼴-얼굴 {
  글꼴 계열: 'MyFont';
  src: url('/path/to/myfont.woff2') 형식('woff2'),
       url('/path/to/myfont.woff') 형식('woff');
}

이를 통해 HTTP 요청 수를 줄이고 브라우저 캐싱을 활용하며 콘텐츠 전달 속도를 향상시켜 로드 시간을 단축할 수 있습니다.

요약

결론적으로 WordPress 사이트의 FCP(First Contentful Paint)를 개선하는 것은 서버 측 전략과 프런트 엔드 전략을 모두 포함하는 다면적인 프로세스입니다. 서버 응답을 개선하고, 서버 캐싱을 사용하고, 렌더링 블록을 제거하고, CSS를 강화하면 FCP 속도가 향상됩니다.

Lighthouse, Google PageSpeed ​​Insights 및 GTmetrix와 같은 도구는 FCP 문제를 진단하고 최적화 노력을 안내하는 데 도움이 될 수 있습니다. 좋은 FCP 점수는 1.8초 이하이므로 대부분의 사용자가 귀하의 사이트가 빠르고 반응이 빠르다고 인식할 수 있다는 점을 기억하세요.