💡라이트하우스와 함께 웹 성능을 테스트 하고 최적화 해보자
why 왜 공부해야 할까
- 웹사이트 이미지 로딩이 느려서 사용자가 불편함을 겪는다. → 성능 최적화의 필요성을 느낌
- 렌더링이 늦어지고 반응이 느리다는 것은 → 사용자들의 웹사이트 이탈률을 높인다.
- 평균적으로 3초 이상 지연 시 사용자는 해당 페이지를 떠나는 것으로 조사됨
how 그럼 어떻게 측정, 개선할 수 있을까
- 구글 크롬 개발자 도구 내
라이트하우스를 사용해보자!
- 라이트하우스에서 웹사이트를 analyze → 분석 레포트를 받는다.
1. performance
- 페이지 로딩 되는 속도를 측정한다.
- 각 측정값마다 가중치를 부여하고 있다. 아래는 라이트하우스의 성능 측정 시의 점수 계산 방법을 가져온 것.
- 가중치가 높을수록 성능 평가에 영향이 크다. 현재 가중치가 가장 높은 것은
TBT(Total Blocking Time), LCP(Largest Contentful Paint) - TBT는 TTI와는 다르게 페이지가 안정적이게 상호작용 할 수 있는 시점을 알려주는 것이 아닌 안정적이게 되기까지 사용자가 얼마나 상호작용하지 못하는지 시간의 총합을 나타내줍니다.
- https://medium.com/jung-han/라이트하우스-성능-지표-살펴보기-83df3dc96fb9
- 항상 고정적인 건 아니고 사용자가 인식하는 성능에 영향을 주는 것이 무엇인지 연구하면서 가중치를 변경시키고 있다.
측정 지표 몇 가지 소개하자면,
- FCP(First Contentful Paint): 최초 컨텐츠가 렌더링 되는데 걸리는 시간, 제일 먼저 보이기 시작하는데 걸린 시간.
- TTI(Time To Interactive): 반응 속도 지표. 웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간.
- LCP(Largest Contentful Paint): 가장 사이즈가 큰 컨텐츠(이미지 또는 텍스트)가 화면에 렌더링 되는데 걸리는 시간
LCP는 페이지의메인 콘텐츠가 로드되었을 가능성이 있을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한사용자 중심 메트릭입니다. LCP가 빠르면 사용자가 해당 페이지를 유용하다고 인식하게 된다.
- 그럼 어떻게 개선할 수 있을까?
- 라이트하우스 레포트에선 아래처럼 다양한 해결책을 제안해준다.
