Lighthouse가 도입된 이후 페이지 속도와 관련된 새로운 매개변수가 등장했습니다. 이러한 매개변수 중 가장 중요한 것 중 하나는 FCP(First Contentful Paint)입니다. 10년 2024월부터 발효되는 Lighthouse 버전 10에서 FCP가 전체 점수에 미치는 영향은 XNUMX%입니다..
FCP를 측정 기준으로 채택하고 이해하려면 먼저 FCP의 이면에 있는 심리학을 조사하는 것이 중요합니다. 컨셉은 와 비슷하네요 엘리베이터에 설치된 거울:
간략하게 요약하자면, 1900년대 전반에 고층 건물에 엘리베이터의 사용이 크게 늘었지만, 오늘날에 비하면 엘리베이터 시스템은 원시적이었습니다. 그래서 엘리베이터에서 보내는 시간을 더 짧게 느껴지게 하기 위해 엘리베이터에 거울을 설치하자는 아이디어가 떠올랐습니다.
주제로 돌아가서: 페이지에 액세스하려고 할 때 로딩 시간 동안 지각적으로 기다리게 만드는 지점이 FCP입니다. 콘텐츠가 포함된 첫 번째 페인트의 정의는 첫 번째 텍스트, 이미지, 흰색이 아닌 캔버스 등이 사용자에게 표시되는 데 걸리는 시간입니다.. FCP의 단위는 초입니다.
Lighthouse에서 FCP의 색상 스케일은 다음과 같이 결정됩니다.
- 0~2초: 녹색 => 빠름
- 2~4초: 주황색 => 개선 필요
- 4초 이상: 빨간색 => 느림
HTTP Archive 데이터에 따르면 고려할 수 있는 사이트 수 빠른은 25%, 기존 사이트의 50%가 느린 사이트로 분류됩니다.
FCP를 개선하기 위해 무엇을 할 수 있습니까?
서버 응답 시간 단축
일반적으로 이는 서버 및 소프트웨어 측면에서 개선이 필요한 것으로 해석될 수 있습니다. 서버 응답 시간에 부정적인 영향을 미치는 문제를 나열하려면 다음을 수행하십시오.
- 서버의 공유, 구성(예: 서버 설정) 및 서버 리소스가 문제일 수 있습니다.. 트래픽에 따라 서버 용량을 늘려야 합니다. 어떤 경우에는 잘못 작성된 데이터베이스 쿼리와 매우 복잡한 소프트웨어 구성 요소로 인해 서버 응답 시간에 심각한 영향을 미칠 수 있습니다.
- CDN(Content Delivery Network)을 사용하지 않으면 콘텐츠 액세스가 지연되어 FCP에 영향을 줄 수 있습니다.. 예를 들어, 콘텐츠 크기가 증가함에 따라 큰 애니메이션 GIF 또는 비디오를 CDN 없이 호출하려고 하고 메인 서버가 다른 대륙에 있는 경우 FCP 문제를 해결하기 위해 CDN 솔루션을 고려해야 할 수도 있습니다.
- 적절하고 일관된 캐시 정책으로 정적 콘텐츠를 제공하지 않으면 과부하가 발생할 수 있습니다. 방문자 수가 늘어나면 서버가 불필요하게. 예를 들어 로고를 모든 페이지에 로드하는 동안 장기 캐시에 로고를 보관하지 않으면 서버의 응답 시간이 불필요하게 손상됩니다.
- 불필요한 페이지 리디렉션 페이지에 액세스하는 동안 FCP에 불필요하게 영향을 줄 수 있습니다.
예를 들어 과거에는 다음과 같은 설정이 있었습니다. 사용자가 사이트에 들어가려고 하면 HTTP에서 HTTPS로 리디렉션되고, 모바일인 경우 HTTPS에서 모바일로 리디렉션됩니다(예: https:// www에서 https://m), 페이지가 제거되고 301과 함께 다른 곳으로 리디렉션되면 사용자가 세무서의 책상에서 책상으로 이동하는 것처럼 느껴졌습니다. 이는 더 나은 이해를 위한 극단적인 예이지만, 301 리디렉션을 사용하여 페이지를 다른 URL로 리디렉션한 다음 301을 사용하여 해당 페이지를 다른 URL로 리디렉션하는 경우 동일한 비논리적 설정을 수행할 수 있습니다.
- 만약 너라면 사전 연결 또는 DNS 프리패치를 사용하지 마세요. 타사 서비스에 연결하고 많은 타사 서비스에 연결할 때 접두사를 사용하면 FCP에 유익한 작업을 수행하지 않습니다.
렌더링 차단 리소스 줄이기
항목으로 작성된 이 단일 사항을 해결하는 데 몇 달이 걸릴 수 있다는 점을 인정해야 합니다.
이를 달성하기 위해 모든 솔루션을 갖춘 솔루션 방법이 있습니다. 페이지 렌더링을 차단하는 JS, CSS 및 유사한 리소스는 페이지 생성 시간 이후에 로드되지만 사이트가 로드되는 동안 사이트의 처음에 표시되는 부분이 먼저 로드됩니다.. 그러나 이를 위해서는 JS, CSS 및 유사한 리소스를 모두 검사해야 하며, 가장 시간이 많이 걸리는 프로세스를 분리해야 합니다. 또한 가능한 한 적은 수의 타사 서비스를 사용하면 FCP를 최적화하는 데 도움이 됩니다.
