실제 사용자 메트릭으로 Web Vital을 벤치마킹하고 개선하는 방법

이 기사는 개발자가 고객이 영향을 받기 전에 문제를 식별할 수 있도록 도와주는 Raygun의 친애하는 친구의 지원을 받아 사용자가 기대하고 받을 자격이 있는 경험의 표준을 제공합니다. 감사합니다!

성능을 어떻게 측정하시겠습니까? 때로는 애플리케이션이 초기 요청에서 완전히 렌더링되는 데 걸리는 시간입니다. 다른 때는 작업이 얼마나 빨리 수행되는지에 관한 것입니다. 사용자가 작업에 대한 피드백을 받는 데 걸리는 시간일 수도 있습니다. 올바른 컨텍스트가 제공된다면 이러한 모든 정의(및 기타 정의)가 정확할 것입니다.

불행히도 성능 측정을 위한 은총알은 없습니다. 제품마다 벤치마크가 다르고 두 앱이 동일한 메트릭에 대해 다르게 작동할 수 있지만 여전히 주관적인 "좋음" 및 "나쁨" 판정과 상당히 유사합니다.

언어를 능률화하고 협업과 표준화를 촉진하기 위해 우리 업계는 광범위한 개념을 제시했습니다. 이러한 방식으로 개발자는 솔루션을 공유하고 우선 순위를 정의하며 작업을 효과적으로 완료하는 데 집중할 수 있습니다.

성능 대 인식 성능

이 스니펫을 예로 들어 보겠습니다.

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

이것의 목적은 중요하지 않으며 콘솔에 숫자를 출력하는 데 상당한 시간이 걸리는 것을 제외하고는 실제로 아무 것도 하지 않습니다. 이 코드를 보면 (정확하게) 제대로 수행되지 않는다고 말할 것입니다. 이것은 실행하기에 빠른 코드가 아니며 다양한 종류의 루프로 최적화하거나 단일 루프에서 이러한 작업을 수행할 수 있습니다.

또 다른 중요한 점은 웹 페이지의 렌더링을 차단할 가능성이 있다는 것입니다. 브라우저 탭을 정지(또는 충돌)합니다. 따라서 이 경우 사용자가 인지하는 성능은 작업 자체의 성능과 밀접한 관련이 있습니다.

그러나 웹 작업자에서 이 작업을 실행할 수 있습니다. 렌더 블록을 방지하면 작업이 더 빨리 수행되지 않으므로 성능은 여전히 ​​동일하다고 말할 수 있지만 사용자는 여전히 앱과 상호 작용할 수 있으며 적절한 피드백을 제공받을 수 있습니다. 이는 최종 사용자가 애플리케이션을 인식 하는 속도에 영향을 미칩니다. 더 빠르지는 않지만 더 나은 Perceived Performance 가 있습니다.

참고 : Web-Workers 및 React에 대해 더 알고 싶다면 GitHub에서 내 react-web-workers 개념 증명을 자유롭게 탐색하세요.

웹 바이탈

웹 성능은 잠재적으로 모니터링하고 개선할 수 있는 수천 개의 메트릭이 있는 광범위한 주제입니다. Web Vitals는 웹 성능 표준화에 대한 Google의 답변입니다. 이 표준화를 통해 개발자는 최종 사용자 경험에 가장 큰 영향을 미치는 지표에 집중할 수 있습니다.

• 첫 번째 콘텐츠가 포함된 페인트(FCP)
  로딩이 시작될 때부터 콘텐츠가 화면에 렌더링될 때까지의 시간입니다.
• 최대 함량 페인트(LCP)
  가장 큰 이미지 또는 텍스트 블록의 렌더링 시간은 뷰포트 내에서 볼 수 있습니다. 좋은 점수는 페이지 로드의 75%에 대해 2.5초 미만입니다.
• 첫 번째 입력 지연(FID)
  사용자가 페이지와 상호 작용할 때부터 브라우저가 요청을 처리할 수 있을 때까지의 시간입니다.
  좋은 점수는 페이지 로드의 75%에 대해 100ms 미만입니다.
• 누적 레이아웃 시프트(CLS)
  페이지 수명 동안 발생하는 모든 예상치 못한 이동에 대한 모든 개별 레이아웃 이동의 총합입니다. 좋은 점수는 페이지 로드의 75%에서 0.1입니다.
• 인터랙티브 시간(TTI)
  페이지 로드가 시작된 시점부터 기본 하위 리소스가 로드된 시점까지의 시간입니다.
• 총 차단 시간(TBT)
  기본 스레드가 차단된 First Contentful Paint와 Time to Interactive 사이의 시간입니다(사용자 입력에 대한 응답 없음).

이 중 어느 것이 가장 중요합니까?

핵심 Web Vital은 Google에서 최종 사용자 경험에 가장 큰 영향을 미치는 것으로 식별한 Web Vital의 하위 집합입니다. 2022년 기준으로 가장 큰 콘텐츠가 포함된 페인트(속도), 누적 레이아웃 이동(안정성) 및 첫 번째 입력 지연(상호작용)의 세 가지 핵심 웹 바이탈이 있습니다.

권장 읽을 거리: 핵심 Web Vitals에 대한 개발자 안내서

Chrome 사용자 경험 보고서와 실제 사용자 측정항목

애플리케이션에서 Web Vital을 테스트하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 Chrome Devtools를 열고 Lighthouse 탭으로 이동하여 기본 설정을 확인하고 보고서를 생성하는 것입니다. 이를 Chrome 사용자 경험 보고서(CrUX) 라고 하며 특정 요구 사항을 충족하는 Chrome 사용자의 28일 평균 샘플을 기반으로 합니다.

• 인터넷 사용 기록 동기화;
• 동기화 암호 설정이 없습니다.
• 사용 통계 보고가 활성화되었습니다.

그러나 Chrome UX 보고서가 자신의 사용자를 얼마나 대표하는지 정의하기는 매우 어렵습니다. 보고서는 야구장 역할을 하며 임시로 개선해야 할 사항에 대한 좋은 지표를 제공할 수 있습니다. 이것이 Raygun과 같은 RUM(실제 사용자 모니터링) 도구를 사용하는 것이 매우 좋은 이유입니다. 할당된 시간 내에 모든 브라우저에서 앱과 실제로 상호작용하는 사람들에 대해 보고합니다.

실제 사용자 메트릭을 직접 모니터링하는 것은 간단한 작업이 아닙니다. 알아야 할 장애물이 너무 많습니다. 그러나 복잡할 필요는 없습니다. 성능 모니터링 도구를 사용하여 RUM 메트릭을 가져오는 것은 쉽게 설정할 수 있습니다. 고려할 가치가 있는 옵션 중 하나는 Raygun입니다. 몇 가지 빠른 단계로 설정할 수 있으며 GDPR 친화적입니다. 또한 많은 오류 보고 기능도 사용할 수 있습니다.

애플리케이션 모니터링

개발자는 종종 관찰 가능성 및 성능 모니터링을 사후 고려 사항으로 취급합니다. 그러나 모니터링은 소프트웨어 팀이 더 빠르게 움직이고, 노력의 우선 순위를 지정하며, 향후 심각한 문제를 방지하는 데 도움이 되는 개발 수명 주기의 중요한 측면입니다.

모니터링 설정은 간단할 수 있으며 관찰 가능성을 고려한 기능을 구축하면 팀이 기본적인 유지 관리 및 코드 위생을 수행하여 끔찍한 리팩토링 스프린트를 피할 수 있습니다. 애플리케이션 모니터링은 밤에 평화롭게 잠을 잘 수 있도록 돕고 팀이 더 나은 사용자 경험을 만들도록 안내합니다.

추세 모니터링 및 회귀 방지

같은 방식으로 기능 회귀 및 버그를 피하기 위해 (이상적으로는) 지속적인 통합 파이프라인에서 테스트를 실행하고 있으므로 새 배포 직후 사용자의 성능 회귀를 식별할 수 있는 방법이 있어야 합니다. Raygun은 개발자가 배포 추적 기능을 사용하여 이 작업을 자동화하도록 도울 수 있습니다.

성능 예산을 준수하는 것이 더 지속 가능합니다. 이 정보를 사용하여 팀은 모든 Web Vital에서 성능 회귀(또는 개선)를 신속하게 찾아내고 문제가 있는 배포를 식별하며 영향을 받는 사용자에 집중할 수 있습니다.

드릴 인 및 조치

RUM을 사용할 때 사용자별로 결과를 좁힐 수 있습니다. 예를 들어, Raygun에서 히스토그램의 점수 또는 막대를 클릭하여 영향을 받는 사용자 목록을 볼 수 있습니다. 이렇게 하면 인스턴스 수준 정보를 사용하여 개별적으로 세션에 대한 드릴링을 시작할 수 있습니다. 이는 단순히 일반적인 모범 사례를 신뢰하는 대신 문제를 직접 대상으로 하는 조치를 취하는 데 도움이 됩니다. 그리고 나중에 변경의 영향을 진단합니다.

특이한 이벤트 강조

물론 이러한 기능은 훌륭하며 책임감 있는 개발자는 애플리케이션 모니터링 대시보드를 주시해야 합니다. 그러나 앱이 확장되고 팀이 성장하고 책임이 분산됨에 따라 주요 성능 문제를 신속하게 알려주는 자동화된 프로세스를 설정하는 것이 그 어느 때보다 중요합니다. 따라서 애플리케이션에 대한 경고 트리거를 설정하는 것이 권장되는 모범 사례입니다.

마무리

요약하자면, Web Vital은 사용자 경험과 직접적인 상관 관계가 있기 때문에 성능의 새로운 표준입니다. 실제 사용자 통찰력을 기반으로 Web Vital을 적극적으로 모니터링하고 최적화하는 개발 팀은 더 빠르고 탄력적인 디지털 경험을 제공할 것입니다.

모니터링이 수행할 수 있는 작업과 앱을 확장하는 동안 성능 유지 관리를 유지하기 위한 솔루션의 표면만 긁었습니다. 편안한 밤을 보내기 위해 Performance Budget, 더 나은 관찰 가능성 또는 기타 솔루션을 사용하는 방법을 댓글로 알려주세요!