인프런 커뮤니티 질문&답변

redgee49@gmail.com님의 프로필 이미지
redgee49@gmail.com

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

4-3) Layout Shift 피하기

lighthouse 측정에 관해 질문드려요

해결된 질문

작성

·

833

2

퍼포먼스 관련 작업 하던중에 잘 모르는게 생겨 질문드립니다

강의 완강하고나서 알려주신것들로 여러가지 해보니 실제로 lighthouse쪽은 굉장히 점수가 향상됐는데요.

이 작업이 이루어진 프로젝트는 next를 이용하고있어서 배포를 vercel를 통해 했습니다.

근데 vercel쪽에서 집계된 Analytics기능에서 측정된 지표는 lighthouse와 차이가 좀 많이 나네요.

개발모드까지 같이 측정했나 확인해보니 그건 아닌것같습니다.

페이지마다 살펴보니 vercel쪽의 데이터들은 FCP와 LCP지표가 상당히 높게 나타나는데 혹시 vercel쪽에서 측정되는 analytics 서버의 네트워크 환경에 따라 이렇게 될수도 있는걸까요?

vercel의 서비스중에 https://vercel.com/docs/concepts/functions/serverless-functions/regions
이 있는데 한국대상 서비스이기 때문에 이 설정을 한국으로 설정했거든요.

질문을 좀 정리해보자면

  1. 개발하고나서 배포를했을때 light house측정을 이전 내역들을 날리고 "clean"한 상태에서 측정 하는 다른 방법이 있을까요? 현재는 시크릿탭에서 network탭의 "disabled cache"만 체크해두고 측정마다 캐시 강력 새로고침으로 하고 있습니다.

  2. 퍼포먼스 탭에서도 위 질문같은 방법이 있는지 궁금합니다.

  3. lighthouse말고 혹시 신뢰성있는 다른 방법도 있을까요?

답변 1

1

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요 redgee49 님.

1. 라이트하우스는 기본적으로 이전 내역과 관계없이(캐시없이) 실행됩니다. 예전에는 다른 패널에서 설정한 옵션(throttle, disable cahce 등)이 반영된 상태로 실행됐는데, 최근 업데이트된 라이트하우스는 다른 패널들의 옵션과 관계없이 기본값으로 설정된 옵션으로 실행됩니다.

따라서, 따로 캐시를 비워주실 필요는 없습니다.

2. performance 패널에서는 각 패널에서 설정한 옵션들이 적용됩니다. 즉, 네트워크 패널에서 disable cache를 적용한 뒤 performance 검사를 하면 캐시가 없는 상태로 실행이 됩니다.

3. 성능 점수는 측정 환경과 방법에 따라 많이 차이가 생깁니다. 때문에 지속적인 서비스 성능 측정을 위해서는 그 기준을 동일하게 맞춰두는 것이 좋습니다.

제가 vercel의 Analytics 기능을 써보지 않아서 정확히 알긴 어렵지만, 찾아보니 RUM(Real User Monitoring) 방식으로 보입니다. 즉, 서비스가 제공되는 중에 실제 유저의 활동기록을 기반으로 성능 측정을 한 것입니다.

그에 반해 라이트하우스를 이용한 측정 방식은 Synthetic Monitoring 이라고 해서, 제한된(simulated) 환경에서 성능을 측정하는 방식입니다. 그렇기에 당연히 다를 수 밖에 없습니다. 특히 라이트하우스로 검사하는 경우 설정한 옵션(throttle 등)에 따라서도 달라질 수 있으므로 고정된 환경에서 측정 및 비교해야합니다. 이 설정은 RUM에서 측정된 통계를 기반으로 적정선을 찾아서 적용하는 것이 좋습니다. RUM 관련해서 P75, P90 개념을 찾아보시면 도움이 되실겁니다.

(가장 이상적인 방법은 두가지를 모두 적용해서 실제 유저의 통계와 랩 환경의 점수를 함께 보는 것입니다.)

결론적으로 질문에 답을 다시 하면, 라이트하우스는 제한된 환경(네트워크 느리게하고 CPU 느리게하고, 캐시 날리고)에서 검사를 하기 때문에 점수가 낮을 수도 있습니다. 그에 반해 Vercel Analytics(RUM)의 경우 실제 유저를 기반으로 하기 때문에 빠른 환경의 유저에게는 높은 점수가 찍힐거고, 느린 환경의 유저에게는 낮은 점수가 찍힐 겁니다. 결국 이 데이터가 쌓이면 유저의 평균 LCP 등을 알 수 있는거죠.

 

그럼 답변이 되셨길 바라면서, 강의에 관심을 가져주셔서 감사합니다. :)

자세한 답변 감사합니다 😃

redgee49@gmail.com님의 프로필 이미지
redgee49@gmail.com

작성한 질문수

질문하기