아주 조금만 더 알아보기🔎
라이트하우스에 대해 들어보셨나요? 라이트하우스는 구글에서 제공하는 오픈소스로 웹 사이트의 품질을 측정하는 자동화 도구입니다. 웹 페이지의 성능, 접근성, SEO, PWA , Best Practices 항목으로 수를 매겨주며 개선 사항을 안내합니다.
라이트하우스를 이미 사용해 본 사람들은 알겠지만 Lighthouse의 Performance audits에서 소개하는 내용들은 뭔가 와 닿지 않는 모호함들이 존재합니다. (저만 그럴수도 있습니다.) 또한, 라이트하우스의 친절함(?) 덕분에 각 지표들의 측정 방법을 구체적으로 알지 않아도 개선점을 파악할 수 있고 좋은 점수를 받을 수 있습니다. 이 글은 그런 저의 개인적인 모호함을 해결하기 위해 찾았던 내용을 정리했습니다.
라이트하우스 5? 6? 7?
라이트 하우스는 대부분의 소프트웨어가 그렇듯 시간이 지남에 따라 계속해서 발전하고 변화합니다. 작성일 기준(21.5.11) Lighthouse는 7.4버전이 최신 버전인데요. 라이트하우스의 버전에 따라 살펴보는 지표와 기준, 가중 또한 달라집니다. 저희가 살펴볼 성능 지표는 5에서 6으로 변화할 때 지표의 내용이 변경했고, 7에서는 크게 변화가 없었습니다.
변경되는 기준은 지표가 갖는 모호함을 없애는데에 중점이 있을 수도 있고, 라이트 하우스 팀에서 더 나은 사용성을 위해 새롭게 지표를 추가할 수도 있습니다. 또한, 이미 추가된 지표들 또한 각각 가중치가 다르게되며 주기적으로 피드백을 수집해 변경된다고 합니다.
아무튼, 결론은 현재 Lighthouse는 총 6개의 지표를 갖고 성능을 파악하고 있습니다. 각각 줄여서 FCP, SI, LCP, TTI, TBT, CLS 6가지가 존재하는데요. 좋은 점수를 받기 위해서는 LCP랑 TBT가 가장 중요해 보이는데요. 이제 각각의 지표들이 어떤 것을 의미하는지, 어떻게 측정되는지 살펴보겠습니다.
First Contentful Paint
FCP는 페이지 로드가 시작된 후 뷰포트내의 의미있는 콘텐츠 일부가 처음 화면에 렌더링 될 때까지의 시간을 측정합니다. 단어 그대로 해석하면 의미가 됩니다.
