웹 바이탈의 핵심

소개

2020년 5월 구글의 CWV(Core Web Vitals) 제품군은 웹사이트 성능 측정을 위한 중요한 지표가 되었습니다. Google은 이러한 값을 페이지 순위 알고리즘의 일부로 간주하므로 CWV 측면에서 웹 사이트의 성능을 극대화하면 사용자의 경험을 향상시킬 뿐만 아니라 검색 엔진 순위를 향상시킵니다. 이 기사에서는 페이지 점수를 개선하고 사용자 만족도를 높이며 수익을 높이는 데 도움이되는 팁과 기술을 탐구합니다.

핵심 웹 바이탈이란 무엇입니까?

기술의 다른 많은 것들과 마찬가지로 Google의 Web Vitals는 웹 사이트 성능의 측정 가능한 측면을 나타내는 세 글자로 된 약어입니다. 단계를 설정하기 위해 핵심 웹 바이탈을 정의하는 세 가지 핵심 메트릭을 정의하겠습니다.

가장 큰 내용 페인트

최대 LCP(Contentful Paint): 접힌 부분 위에 보이는 내용이 로드되는 데 걸리는 시간에 초점을 맞춰 감지된 부하 속도를 측정합니다. 이상적인 사용자 환경을 제공하려면 페이지 로드 타임라인에서 2.5초 이내에 LCP가 트리거되어야 합니다.

첫 번째 입력 지연

첫 번째 입력 지연(FID): 사용자 작업과 페이지 응답 사이의 지연을 측정하여 페이지 응답성을 측정합니다. 이상적인 사용자 환경을 제공하려면 페이지의 FID가 100밀리초 이하여야 합니다.

누적 레이아웃 이동

CLS(Cumulative Layout Shift): 렌더링할 때 페이지에서 레이아웃 이동의 합성 측정을 사용하여 시각적 안정성을 측정합니다. 이상적인 사용자 경험을 제공하기 위해 페이지는 0.1 이하의 CLS를 유지해야 합니다. 0.1에서 0.25 사이의 모든 값은 보통 수준으로 간주되고 0.25 이상은 불량입니다.

그리고 그들은 왜 중요한가?

많은 기업에서 웹 사이트 성능은 비즈니스 성공과 직접적인 상관 관계가 있습니다. 연구에 따르면 CWV 점수가 통과한 웹 사이트는 그렇지 않은 페이지 (Beus)에 비해 검색 결과에서 최대 37% 더 많은 가시성을 누릴 수 있으며 CWV 점수가 향상되면 방문자 당 수익과 전환율 (Duong et al.) 모두 증가할 수 있습니다.

로 작업하는 동안 아키라여성 패션 부티크 인 Edgio는 웹 사이트의 CWV를 개선하여 첫 페이지 로딩 시간을 5초에서 1초로 단축하고 CWV 측정을 개선하여 유기적 트래픽 +30% 증가, 체크아웃 시작 시 +61% 증가, 전환율 37% 증가를 달성했습니다.

간단히 말해서, 빠른 웹 사이트는 더 나은 SEO 순위와 더 행복한 사용자를 만듭니다 – 특히 전자 상거래 웹 사이트의 맥락에서; 이들은 반송률을 줄이고 전환율을 증가시키기 위해 결합됩니다.

그렇다면 어떻게 개선할 수 있을까요?

첫 번째 입력 지연

먼저 낮은 과일인 첫 번째 입력 지연을 살펴보겠습니다. 좋은 소식은 웹 사이트가 FID 점수를 더 자주 통과한다는 것입니다.이 점수는 볼 수 있습니다! 그러나 그렇지 않다면, 종종 웹 사이트의 수명 주기 초기에 로드된 타사 스크립트가 원인이며, 이로 인해 사용자 입력을 받는 데 필요한 주 스레드 실행이 차단될 수 있습니다. 오류를 캡처하고 화면 녹화를 수행하는 도구는 추가 조사의 주요 대상입니다.

실제로 주 실행 스레드를 차단하는 모든 요소가 FID 성능을 저하시킬 수 있습니다. 리소스 집약적이거나 오래 실행되는 JavaScript 작업을 주의 깊게 관찰하고, UI와 관련이 없는 코드를 웹 작업자에게 리팩토링하는 것은 물론, 필요한 JavaScript만 로드되고 필요할 때만 로드되도록 하기 위해 Lazy-loading 및 code-splitting 기술을 사용하는 것을 고려하십시오.

또한 기술적으로 CWV의 핵심 요소는 아니지만 다른 관련 지표 인 다음 페인트와의 상호 작용 (INP)을 언급 할 가치가 있습니다. INP는 페이지와의 상호 작용과 해당 상호 작용을 반영하는 후속 페이지 업데이트 사이의 시간을 측정합니다. INP와 FID는 모두 전반적인 페이지 응답성을 측정하지만, INP는 첫 번째 상호 작용이 아닌 모든 페이지 상호 작용에 관심이 있으며, 초기 상호 작용뿐만 아니라 전체 세션 동안 페이지가 응답성을 유지하도록 하는 것을 목표로합니다. INP는 사용자 경험에서 최악의 상호 작용 성능을 추적하고 이를 보고합니다. 곧 INP가 페이지 응답성의 척도로 FID를 대체할 가능성이 매우 높기 때문에 주목할 가치가 있습니다.

가장 큰 내용 페인트

페이지 성능에 있어 가장 중요하고 영향력 있는 지표는 LCP입니다. 다소 예측할 수 있듯이, 가장 큰 내용 페인트의 가장 일반적인 예는 “영웅”이미지 – 일반적으로 “접기”위의 뷰포트의 전체 너비를 차지하는 큰 이미지 또는 비디오입니다. 이 요소를 최적화하는 기술은 다른 페이지 리소스와 동일하지만, 사용자가 경험하게 될 첫 번째 주요 요소이기 때문에 리소스가 렌더링되는 데 걸리는 시간은 매우 중요합니다.

대기열에서 대기 중
LCP 요소의 요청 타이밍을 세분화하는 것은 성능을 최적화하는 데 매우 유용합니다. 브라우저에 의한 모든 요청은 대기열로 시작됩니다. 대기열에서 LCP 요청이 소비되는 모든 밀리초는 LCP 점수에 영향을 주는 밀리초입니다. 따라서 이러한 요소가 브라우저 대기열에서 과도하게 많은 시간을 소비하고 있는 것을 발견하면 미리 요청된 사항과 그 이유를 조사하고 LCP 리소스의 우선 순위를 지정하는 단계를 수행합니다. 리소스가 폴드 아래에 있거나 게으르게 로드되거나 지연될 수 있는 다른 스크립트가 있을 수 있습니다. 작업의 순서가 중요합니다.

서버 대기 중
네트워크 요청을 시작한 후 브라우저 클라이언트는 서버가 해당 요청을 수신, 처리 및 응답할 때까지 기다려야 합니다. 이 메트릭을 TTFB(Time-to-First-Byte)라고 합니다. 서버가 요청에 응답하는 속도가 느리면 LCP 점수가 낮아집니다. CDN이 최종 사용자와 지리적으로 가까운 위치에 캐시된 리소스 복사본을 보관하고 단일 애플리케이션 서버보다 해당 리소스에 더 빠르게 응답할 수 있기 때문에 CDN을 보유하면 속도 향상에 큰 영향을 미칠 수 있는 영역 중 하나입니다. CDN 사용의 다른 장점으로는 내장 보안 WAF와 대규모 트래픽 급증에 대처할 수 있는 기능이 있습니다. 속도를 원한다면 CDN을 사용해야 합니다.

와이드에 와이드
이 시점에서 바라건대, 브라우저는 페이지 수명 주기 초기에 LCP 리소스를 요청할 것이며, 서버는 이에 신속하게 응답해야 합니다. 다음으로 고려해야 할 요소는 요청된 리소스의 전체 크기입니다. 브라우저로 “유선”을 통해 이동해야 하는 모든 바이트는 시간이 걸릴 것이며, 바이트가 많을수록 요청이 완료되는 데 더 오래 걸릴 것입니다. 따라서 리소스를 전송하는 데 소요되는 시간을 최소화하기 위해 가능한 한 리소스가 작도록 주의를 기울여야 합니다. 여기에는 타사 이미지 최적화 및 Kraken.io 또는 imgix.com 같은 호스팅 서비스를 사용하는 것이 포함될 수 있습니다.이 서비스는 WebP와 같은 “NextGen”형식으로 미디어 파일을 최적화하고 서비스를 제공하여 크기를 더욱 줄일 수 있습니다.

브라우저 도움말
크기 최적화 외에도 <사진> 태그 사용을 고려해 보십시오. 그러면 브라우저에서 장치를 보다 지능적으로 요청할 올바른 리소스를 선택할 수 있습니다. 데스크톱 브라우저에는 고해상도 이미지를 표시할 수 있는 화면 영역이 많을 수 있습니다. 그러나 이러한 리소스는 더 작은 화면으로 모바일 디바이스를 괴롭힐 수 있습니다. 최적화된 리소스와 CSS 미디어 쿼리를 사용하면 브라우저가 해당 장치 유형에 적합한 리소스를 요청하고 서버에서 클라이언트로 바이트를 전송하는 데 소요되는 시간을 줄일 수 있습니다.

또한 LCP 리소스를 미리 로드하도록 요청하고 가져오기 우선 순위를 지정하여 브라우저에 도움을 줄 수 있습니다. 이를 통해 브라우저가 덜 중요한 리소스보다 중요한 리소스의 우선 순위를 지정할 수 있습니다. 브라우저에 빠르게 접근할수록 렌더링이 빨라지고 LCP가 더 빨리 실행될수록 더 좋습니다.

누적 레이아웃 이동

우리는 항상 그것을 봅니다. 웹 사이트를 가져오기 위해 브라우저를 보낸 후 페이지가로드되기 시작합니다. 페이지가 구축되는 동안 갑자기 전체 페이지가 이동하고 클릭하려고 생각한 링크가 갑자기 다른 곳에 있을 때 관심있는 부분을 보고 클릭하기 위해 이동합니다. 이러한 현상을 레이아웃 이동이라고 합니다. 그것은 모두에게 성가신, 보통 자초하고, 우리는 인류의 이익을 위해 그것을 최소화하기 위해 노력해야합니다.

평범한 용의자
높은 CLS 점수의 일반적인 원인은 다음과 같습니다.

• 스티커 헤더
• 클라이언트측에서 로드되고 렌더링되는 프로모션 또는 “Hero” 배너
• 뉴스레터, 쿠폰 및 GPDR 공지
• 페이지에 동적으로 삽입되는 기타 타사 통합

경계 설정
<>LCP에 대해 논의할 때 참조한 그림 요소를 기억하십니까? 거기에 포함 된 다양한 요소에 차원을 추가하는 것을 잊지 마십시오. 이러한 값을 생략하면 브라우저가 이러한 요소를 렌더링하는 방법을 안내할 때 운전석에서 벗어납니다. 차원을 정의함으로써 브라우저는 이미지를 칠할 정확한 공간을 확보하여 이동을 줄일 수 있습니다.

페이지에 동적으로 추가될 수 있는 모든 콘텐츠도 마찬가지입니다. 광고, <iframe> 또는 기타 동적으로 추가된 콘텐츠는 CLS에 기여할 수 있습니다. 이러한 항목에 대한 공간을 미리 예약하면 페이지 콘텐츠가 덜 이동합니다. 또한 기존 페이지 콘텐츠 위에 콘텐츠를 추가하지 마십시오. 이렇게 하면 전체 페이지가 아래로 이동하게 됩니다.

브라우저가 미리 공간을 확보하도록 도와주면 CLS가 줄어들지만, 빈 페이지의 이러한 부분이 유용한 콘텐츠로 채워질 때까지 사용자가 기다리는 동안 전반적인 사용자 환경이 저하될 수 있습니다. 중간계로서, 요소 로딩 골격을 구현하는 것은 사용자에게 더 많은 것이 있다는 것을 알리는 유용한 기술이 될 수 있으며, 브라우저가 추가 페이지 콘텐츠를 조정하기 위해 나머지 무거운 리프팅을 수행하는 동안 빠른 경험의 인상을 줄 수 있습니다. 또한 애니메이션 GIF가 아닌 CSS 애니메이션을 사용하여 구현할 수 있으며 구현해야 한다는 점도 있습니다. 즉, 몇 줄의 CSS만 전체 웹 사이트에 이 기술을 구현하는 데 사용할 수 있습니다.

마무리

표면적으로 Core Web Vitas는 검색 결과 내에서 페이지 순위를 결정하기위한 Google의 전설적이고 어두운 알고리즘의 최신 조각처럼 보일 수 있으며 어느 정도 정확할 수 있습니다. 그러나 그 이상으로, Core Web Vitals는 페이지 성능을 측정하고 사용자 경험의 관점에서 중요한 것을 설명하기 위한 기준을 수립하기 위한 보다 구체적인 프레임워크를 나타냅니다. 철저하지는 않지만, 앞서 언급한 기법을 사용하면 웹 사이트의 성능을 최적화하고 문제를 해결하는 데 도움이 되므로 사용자 경험, 페이지 순위 및 매출이 향상될 수 있습니다.