플러그인을 사용하여 WordPress에서 첫 번째 콘텐츠가 포함된 페인트를 개선하는 방법

WordPress 성능 과 관련하여 주요 지표 중 하나는 FCP(First Contentful Paint)입니다. 이는 페이지의 첫 번째 콘텐츠가 렌더링되는 데 걸리는 시간을 측정하며 페이지가 로드되는 속도를 나타내는 좋은 지표입니다. FCP를 개선하는 방법은 여러 가지가 있지만 가장 쉬운 방법 중 하나는 플러그인을 사용하는 것입니다. 이 기사에서는 플러그인을 사용하여 WordPress의 First Contentful Paint를 개선하는 방법을 보여줍니다. W3 Total Cache 플러그인을 사용하는 것이 좋습니다. 이 플러그인에는 콘텐츠 전송 네트워크(CDN) 통합 및 축소를 포함하여 FCP를 개선하는 데 도움이 되는 여러 기능이 있습니다. 플러그인을 설치하고 활성화했으면 구성해야 합니다. 다음 설정을 사용하는 것이 좋습니다. 캐싱 활성화: 페이지와 게시물을 캐시하여 더 빨리 제공할 수 있습니다. CDN 활성화: CDN을 사이트와 통합하여 FCP를 개선할 수 있습니다. 축소 활성화: HTML, CSS 및 JavaScript 파일을 축소하여 페이지 크기를 줄이고 FCP를 개선할 수 있습니다. 변경 사항을 저장하고 나면 FCP가 크게 개선된 것을 볼 수 있습니다.

로딩 시간과 클릭 시간이라는 두 가지 지표로 웹사이트의 성능을 측정하는 것은 불가능합니다. 사용자가 웹사이트를 방문할 때 FCP(First Contentful Paint)는 이미지나 텍스트를 기반으로 한 첫 번째 요소가 표시되는 데 걸리는 시간을 보여줍니다. 평균적으로 각 요소가 단일 페이지에 로드되는 데 걸리는 시간은 LCP로 측정됩니다. 이 기사에서는 FCP가 무엇이며 두 가지를 모두 측정하는 방법을 살펴보겠습니다. PageSpeed ​​Insights는 웹사이트의 성능을 테스트하고 개선 방법에 대한 권장 사항을 얻을 수 있는 환상적인 도구입니다. 사이트 캐싱을 활성화하면 방문자가 방문할 때마다 사이트의 모든 요소를 ​​다시 로드할 필요가 없습니다. 미디어 파일은 웹사이트에서 가장 큰 요소 중 하나이기 때문에 압축은 로딩 시간을 줄이는 데 유용할 수 있습니다.

TinyPNG와 같은 온라인 도구를 사용하여 사이트에 업로드하기 전이나 도중에 이미지를 압축할 수 있습니다. 또한 Fast Velocity Minify 및 Autooptimize와 같이 도움이 될 수 있는 우수한 WordPress 플러그인이 있습니다. 현대 웹사이트의 대부분은 디자인과 기능을 위해 JavaScript와 CSS로 구축됩니다. 이미지가 렌더링되는 시점과 사용자가 아래로 스크롤하는 시점 사이에 지연 시간이 있기 때문에 일부 이미지를 볼 수 없습니다. 올바른 요소만 로드하는 경우 FCP 시간을 줄일 수 없습니다. 사실 배경 이미지로 사용하고 싶지 않다면 대용량 파일용으로 저장할 수 있습니다.

등대의 첫 번째 만족스러운 페인트를 어떻게 개선합니까?

등대의 첫 번째 만족스러운 페인트를 개선하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 이미지를 최적화하는 것입니다. 또 다른 방법은 스타일 시트가 축소되고 JavaScript 파일이 압축되었는지 확인하는 것입니다. CDN을 사용하여 콘텐츠를 전달할 수도 있습니다.

First Contentful Paint 메트릭은 Lighthouse의 핵심 메트릭 중 하나입니다. 사람이 인지하는 DOM 요소를 렌더링하는 데 걸리는 시간이 이 데모에 나와 있습니다. 페이지에서 이것은 이미지, 텍스트 블록 또는 흰색이 아닌 캔버스 요소일 수 있습니다. 메트릭은 구현 전에 모든 단계를 최적화하여 개선할 수 있습니다. 페이지 로드 중 이벤트를 차단하면 첫 번째 콘텐츠가 포함된 페인트 프로세스를 제시간에 완료하지 못할 수 있습니다. TTFB(Time To First Byte)는 웹 사이트에서 생성된 첫 번째 데이터를 서버가 수신하는 데 걸리는 시간입니다. TTFB의 html 코드가 부정적인 영향을 미치기 전에 발생해야 하는 모든 작업입니다.

예를 들어 코드 실행 속도를 1,500밀리초 늦추려고 했습니다. 가장 최근의 Lighthouse 감사에서는 8.6 FCP와 함께 35점의 전체 점수를 얻었습니다. 원래 요청은 이제 완료하는 데 0.6초가 걸리고 FCP는 4831ms에서 3492ms 타임스탬프로 이동했습니다. 렌더링 차단 리소스는 페이지가 로드될 때까지 페이지가 렌더링되지 않도록 하는 파일입니다. 가장 간단한 해결책은 그 아래에 닫는 태그를 사용하는 것입니다. 이 예에서는 Critical CSS NPM을 사용하여 중요한 CSS를 구축했습니다. 이제 >style> 태그를 사용하여 이 CSS를 복사하여 >head> 섹션에 붙여넣습니다.

특정 상황에 따라 기술을 약간 조정해야 할 것이 거의 확실합니다. 로드 지연(페이지가 완전히 로드되었는지 확인하기 위해) 및 표시 영역 크기 조정과 같은 더 많은 패키지 옵션을 Critical CSS 패키지에 추가하면 더 정확할 것입니다. Uploadcare의 PageDetox 이미지 성능 분석 도구 는 무료이며 이미지를 분석하는 데 사용할 수 있습니다. 전체 프로세스에서 우수한 실험실 데이터와 우수한 사용자 경험(UX) 사이에서 최적의 지점을 선택하는 것이 중요합니다.

첫 번째 의미 있는 페인트 시간을 개선하기 위한 Google 팁

Google의 학습 리소스는 첫 번째 의미 있는 페인트 작업을 개선하기 위한 몇 가지 유용한 팁을 제공했습니다. 렌더링 차단 리소스의 양을 줄임으로써 웹사이트의 효율성에 상당한 차이를 만들 수 있습니다. 또한 텍스트 기반 자산을 병합 및 압축하여 페이지 로드 프로세스 의 속도를 높일 수 있습니다. 중요한 렌더링 경로를 최적화하는 것도 가능합니다.

최초의 Contentful Paint Google

FCP(First Contentful Paint)는 Google에서 웹사이트의 성능을 측정하는 데 사용하는 측정항목 중 하나입니다. FCP는 페이지가 처음 로드되기 시작한 때부터 첫 번째 콘텐츠가 화면에 표시될 때까지의 시간을 측정합니다. 페이지 로드 속도가 빠를수록 사용자 경험이 향상됩니다.

FFT(빠른 흐름 테스트)는 사용자가 DOM 페이지로 이동한 후 브라우저가 DOM 페이지의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다. HTTP 아카이브의 데이터를 사용하여 페이지의 FCP와 실제 웹사이트의 시간 간의 시간 및 시간 차이를 기반으로 FCP 점수를 계산할 수 있습니다. 예를 들어 사이트가 시장의 상위 90%에서 수행되는 경우 FCP를 1.2초 만에 렌더링합니다.

웹 사이트에 대한 첫 번째 콘텐츠가 포함된 빠른 페인트 점수를 보장하는 방법

콘텐츠가 포함된 첫 번째 페인트 점수 가 높으면 사이트가 빠르게 로드되고 사용자가 가장 중요한 정보를 최대한 빨리 받을 수 있습니다. 단 하나의 최선의 답은 없지만 좋은 페인트 점수는 사이트를 빠르게 로드하고 사용자에게 가장 많은 정보를 제공하는 데 도움이 될 수 있습니다. First Contentful Paint 점수가 1.8초 이하인 경우 점수가 이상적이어야 합니다.

첫 번째 콘텐츠가 포함된 페인트 수정

콘텐츠가 포함된 첫 번째 페인트는 사용자가 페이지의 콘텐츠를 처음 보는 것입니다. 이 측정항목은 페이지가 로드되는 데 걸리는 시간을 측정하고 사이트가 얼마나 사용자 친화적인지를 나타내는 좋은 지표가 될 수 있기 때문에 중요합니다. 콘텐츠가 포함된 첫 번째 페인트 시간이 빨라 지면 검색 엔진에서 더 높은 순위를 얻을 가능성이 높아지고 전환율도 향상될 수 있습니다.

FCP(First Contentful Paint)를 사용하여 페이지 로드 속도를 모니터링하면 페이지 로드 속도를 알 수 있습니다. Google과 방문자는 Final Cut Pro(FCP)의 품질에 만족해야 합니다. 방문자가 화면에서 페이지를 본 후 다른 페이지를 클릭하지 않으면 페이지가 표시되는 데 시간이 더 오래 걸립니다. HTML 페이지는 FCP(First Contentful Paint)를 사용하여 1초 이내에 렌더링할 수 있습니다. 바이트를 시작할 때 600밀리초 미만의 속도로 시작하는 것이 가장 좋습니다. 아래 나열된 솔루션은 내가 자주 FCP를 개선하는 몇 가지 방법입니다. 웹사이트를 변경하기 전에 PageSpeed ​​전문가와 상의하세요.

강력한 네트워크 연결이 있으면 페이지 속도 성능이 저하되는 경우가 많습니다. 압축 방법은 서버에서 전송되는 데이터의 양을 줄여 네트워크 리소스가 로드될 때까지 기다리는 시간을 줄여줍니다. Brotli 및 Gzip은 널리 사용되는 두 가지 압축 기술입니다. 스크립트는 레이아웃에 사용되기 때문에 FCP(First Contentful Paint)에 영향을 줍니다. 리소스 힌트가 다운로드 또는 연결을 시작하면 브라우저가 자체적으로 프로세스를 완료해야 합니다. 페이지 속도 무기고 에는 로딩, 프리페칭, 프리커넥트와 같은 강력한 도구가 많이 포함되어 있습니다. 리소스 힌트는 페이지 속도를 저하시킬 수 있으므로 주의하는 것이 중요합니다.

JavaScript로 제대로 렌더링되지 않는 페이지는 충돌할 수 있습니다. 외부 CSS 파일이 렌더링될 때 렌더링 차단이 발생합니다. 정확히는 스타일시트를 가능한 작게 유지하십시오. 단축 코드를 사용하여 선택기의 가장 중요한 속성을 한 줄에 기록할 수 있습니다. 선택기를 쉼표로 병합하고 Enter 및 공백을 제거하고 더 짧은 색상 코드를 작성하여 CSS 크기를 더 줄일 수도 있습니다. 스크립트 태그에 스크립트가 추가되면 동시에 다운로드하여 페이지를 빌드할 수 있습니다. 스크립트를 다운로드하면 HTML 코드에서 원래 순서대로 실행됩니다.

이것이 페이지 표시를 차단할 가능성도 있지만 일반적으로 이미 화면에 표시됩니다. CSS font-face 선언에서 웹 글꼴의 기본 순서를 지정할 수 있습니다. 이 유형의 글꼴은 일반적으로 글꼴이 로드될 때까지 텍스트를 표시하지 않습니다. 브라우저의 기본 글꼴로 텍스트를 표시하는 대신 font-display:swap 도구를 사용하여 다른 글꼴로 바꿀 수 있습니다.

가장 큰 콘텐츠가 포함된 페인트 개선 방법

가장 큰 콘텐츠가 포함된 페인트(LCP)는 뷰포트에서 가장 큰 콘텐츠 요소가 로드되는 데 걸리는 시간을 측정합니다. LCP를 개선하려면 이미지와 비디오를 최적화하여 빠르게 로드하고 서버가 요청에 빠르게 응답하도록 합니다. 사전 로드 또는 사전 가져오기 리소스 힌트를 사용하여 필요하기 전에 리소스를 로드하도록 브라우저에 지시할 수도 있습니다.

Google의 가장 큰 콘텐츠 풀(LCP)에서 가장 큰 콘텐츠는 2021년에 도입된 새로운 측정항목입니다. 스크롤 없이 볼 수 있는 부분의 가장 큰 요소가 페이지에 로드되는 데 걸리는 시간이 가장 큰 요소에 걸리는 시간을 결정합니다. 스크롤해야 볼 수 있습니다. 웹사이트의 LCP를 낮추면 웹사이트의 필수 콘텐츠 보기 속도를 높일 수 있습니다. 잠재적인 LCP 문제를 해결하려면 먼저 가장 큰 요소가 로드되는 속도를 결정해야 합니다. 좋은 경험 법칙은 모바일 및 데스크톱 페이지 로드의 75번째 백분위수를 측정하는 것입니다. 로드 메트릭을 개선하는 것 외에도 이미지 최적화는 레이아웃 이동을 줄이고 사용자 경험을 개선할 수 있습니다. 브라우저가 장치에 따라 표시할 이미지를 결정할 수 있도록 합니다.

이미지를 600×600으로 하려면 먼저 600w를 써야 합니다. 브라우저는 이미지 크기를 선택하지 않고 이 방법으로 이미지 크기를 선택해야 합니다. 영웅 이미지는 일반적으로 접힌 요소 위에 가장 중요하므로 빠르게 로드해야 합니다. JavaScript가 활성화된 영웅 이미지가 있는 페이지를 로드하여 LCP를 크게 개선할 수 있습니다. 파일의 데이터 양을 줄이기 위해 다양한 알고리즘을 사용하여 파일을 최소화하거나 압축합니다. 이러한 기술은 몇몇 호스팅 회사와 CDN 제공업체에서 정기적으로 사용합니다. 사이트의 파일이 축소되거나 압축되지 않은 경우 즉시 작업하는 것이 좋습니다.

웹사이트가 최상의 성능을 발휘하도록 하려면 JavaScript를 최적화해야 합니다. 이 기술을 활용하기 위해서는 기기 종류에 따라 다양한 Critical CSS를 사용해야 합니다. Web.dev에는 코드 분할에 대한 훌륭한 기사가 있습니다. 캐싱은 차례로 웹 성능에 기여합니다. 서비스 워커는 공통 요소의 반복을 방지하여 HTML 페이로드의 크기를 줄이는 책임이 있습니다. 정적 HTML을 캐시할 수 있으므로 TTFB를 크게 줄일 수 있습니다. HTTP/2 서버 푸시 및 링크 rel=preload를 사용하면 중요한 리소스의 전달을 가속화할 수 있습니다.

다음 단계는 브라우저가 도메인에 대한 연결 설정 프로세스를 즉시 시작하도록 지정하는 것입니다. 이렇게 하면 중요한 도메인으로의 왕복에 소요되는 시간이 줄어듭니다. 연결할 때 매우 주의하십시오. 테마가 부풀려지면 로드 시간이 크게 증가하고 핵심 성능 평가에 문제가 생길 수 있습니다. 플러그인을 선택한 후에는 신중하게 조사하고 성능을 주시하십시오. LC 프로세스에 대한 우려가 없다면 정기적으로 해당 분야의 문제를 찾는 것이 좋습니다. Google은 28일 동안 받은 핵심 웹 바이탈을 기반으로 중요한 페이지를 최소 한 달에 한 번으로 간주합니다.

첫 번째 콘텐츠가 포함된 페인트와 가장 큰 콘텐츠가 포함된 페인트

First Contentful Paint는 LCP가 웹사이트의 큰 요소가 표시되는 데 걸리는 시간을 고려하기 때문에 Core Web Vitals LCP(Large Contentful Paint)와 다릅니다. FCP의 경우 첫 번째 요소가 먼저 로드되어야 합니다. 그러나 첫 번째 요소가 반드시 가장 큰 요소일 필요는 없습니다.

Fcp와 Lcp가 웹사이트에 중요한 이유

사용자가 화면에서 무엇이든 볼 수 있는 페이지 로드 타임라인의 첫 번째 지점은 사용자가 장면을 더 쉽게 해석할 수 있도록 하는 고속 FPP라고도 합니다. 가장 큰 요소가 화면 중앙에 나타나는 데 걸리는 시간에 따라 소요 시간이 결정됩니다. 이전 기사에서 우리는 웹사이트가 즉시 로드되지 않는다고 말했습니다.

첫 번째 콘텐츠가 포함된 페인트 Wp 로켓

FCP(First Contentful Paint)는 페이지 로드가 시작될 때부터 브라우저가 해당 페이지의 첫 번째 콘텐츠 비트를 렌더링할 때까지의 시간을 측정합니다. 이는 사용자가 페이지의 콘텐츠를 볼 수 있기 전에 기다려야 하는 시간을 나타내므로 웹사이트의 사용자 경험을 측정하기 위한 중요한 측정항목입니다. WP Rocket은 HTML, CSS 및 JavaScript 파일을 최적화하여 웹사이트 속도를 높인다고 주장하는 WordPress 플러그인입니다. 또한 캐시 사전 로드 , 지연 로드 및 축소와 같은 기능이 함께 제공됩니다.

FCP(First Contentful Paint)는 콘텐츠가 웹사이트에 표시되는 데 걸리는 시간을 결정합니다. 밀리초 측정을 사용하여 사이트의 로딩 속도를 계산하는 데 사용할 수 있습니다. 웹사이트에는 최대 1.8초의 애니메이션 클립 형식(ACF)이 있어야 합니다. 느린 진행의 가장 일반적인 원인은 렌더링 차단 스크립트와 스타일시트입니다. FCP(First Contentful Paint)와 함께 웹 글꼴을 사용하는 경우 웹 글꼴을 전혀 사용하지 않는 것보다 나쁩니다. 웹사이트에 스크립트를 로드하는 경우 스크립트가 다운로드뿐만 아니라 구문 분석, 컴파일 및 실행되는지 확인하십시오. 시스템의 파일 수를 줄이려면 서버의 응답 시간을 600밀리초 미만으로 유지하십시오.

서버는 콘텐츠를 더 빠르게 렌더링하고 불필요한 네트워크 트립을 방지하여 더 나은 성능 을 제공합니다. Lighthouse 9.1에서 10%의 점수를 얻으면 최대값에 도달하기 위해 완벽한 경험이 필요한 지점에 도달한 것입니다. 서버가 ISP에서 데이터 센터로 데이터를 처리하는 데 걸리는 시간은 이 그림에 포함되지 않습니다. DevTools는 Paint Timing API를 사용하여 FCP에 대한 성능을 기록하는 데 사용할 수 있습니다.

사이트의 첫 번째 콘텐츠가 포함된 페인트 점수를 향상시키는 방법.

웹사이트의 탐색 경험을 향상시키려면 1.8초 이하에서 First Contentful Paint를 채점하는 것이 좋습니다. 사용자가 링크를 클릭한 후 페이지가 표시되는 데 걸리는 시간을 측정합니다. 결과적으로 사이트의 로드 프로세스 속도를 높이고 사용자의 참여를 유지하는 동시에 사이트의 로드 시간 을 줄일 수 있습니다. 렌더링 차단 스크립트와 스타일시트는 First Contentful Paint가 느려지는 가장 일반적인 두 가지 원인입니다. 사용하는 리소스의 수를 줄이면 점수를 크게 높일 수 있습니다. 캐싱 및 기타 성능 향상 기술 외에도 캐싱 및 기타 성능 향상 기술을 사용하여 사용자 경험을 개선할 수 있습니다.