lighthouse 측정에 관해 질문드려요
퍼포먼스 관련 작업 하던중에 잘 모르는게 생겨 질문드립니다
강의 완강하고나서 알려주신것들로 여러가지 해보니 실제로 lighthouse쪽은 굉장히 점수가 향상됐는데요.
이 작업이 이루어진 프로젝트는 next를 이용하고있어서 배포를 vercel를 통해 했습니다.
근데 vercel쪽에서 집계된 Analytics기능에서 측정된 지표는 lighthouse와 차이가 좀 많이 나네요.
개발모드까지 같이 측정했나 확인해보니 그건 아닌것같습니다.
페이지마다 살펴보니 vercel쪽의 데이터들은 FCP와 LCP지표가 상당히 높게 나타나는데 혹시 vercel쪽에서 측정되는 analytics 서버의 네트워크 환경에 따라 이렇게 될수도 있는걸까요?
vercel의 서비스중에 https://vercel.com/docs/concepts/functions/serverless-functions/regions
이 있는데 한국대상 서비스이기 때문에 이 설정을 한국으로 설정했거든요.
질문을 좀 정리해보자면
개발하고나서 배포를했을때 light house측정을 이전 내역들을 날리고 "clean"한 상태에서 측정 하는 다른 방법이 있을까요? 현재는 시크릿탭에서 network탭의 "disabled cache"만 체크해두고 측정마다 캐시 강력 새로고침으로 하고 있습니다.
퍼포먼스 탭에서도 위 질문같은 방법이 있는지 궁금합니다.
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 등을 알 수 있는거죠.
그럼 답변이 되셨길 바라면서, 강의에 관심을 가져주셔서 감사합니다. :)
예제 프로젝트 관련 질문입니다.
0
73
1
개발환경에 대한 안내
1
162
2
layout shift가 아주 약간 일어나는 부분에 대해
0
312
2
3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제
0
299
2
Material--icons_4.0.0.woff2
0
211
1
코드 실행 시 에러 관련 질문드립니다!!
1
581
1
npm run serve가 동작하지 않아요
0
705
1
webp 확장자질문
1
424
1
이미지 지연 로딩 질문 있습니다!
2
448
1
폰트 포멧에 대한 질문입니다.
1
390
2
궁금한 점이 있어요
1
350
1
css font-face unicode-range
1
361
1
woff2 포멧 IE에서 사용가능 여부
1
422
2
3-3 이미지 지연 로딩 코드 어디서 보나요?
1
328
1
img 태그가 작동이 되지 않습니다.
1
407
1
질문있습니다~
2
223
1
이미지 오류 요청 오류
1
399
1
안녕하세요~ 질문드립니다
1
305
1
궁금한점이 있습니다.
1
228
1
강의자료
1
207
2
안녕하세요 리액트 최적화 관련하여 질문드립니다.
2
1462
1
선생님 질문이 하나 있는데요~~
1
378
2
정말유익해요
2
217
1
궁금한 점이 있습니다.
1
263
1

