lighthouse로 성능 측정 및 개선하기
lighthouse 란 ?
Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구입니다. 이를 통해 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있습니다.
그럼 lighthouse를 통해 웹 페이지에서 최적화해야할 필요성이 있는 요소들이 무엇인지 알아보도록 합시다.
.
LCP
LCP는 페이지에서 핵심 요소의 콘텐츠 로딩 속도를 측정합니다.
일반적으로 페이지에서 가장 큰 영역으로 해당 영역에 있는 이미지, 영상, 텍스트 부분 등 요소의 렌더링 성능을 기반으로 측정 됩니다.
웹 페이지에서 가장 의미 있고 사용자가 접하는 가장 중요한 첫 요소이기 때문에 해당 영역이 늦게 나타나면 페이지 이탈률이 자연스레 늘어날 수 밖에 없고,
그렇기 때문에 Core Web Vital에서도 중요한 지표로 다루고 있습니다.
FID
FID는 콘텐츠의 상호작용 속도를 측정합니다.
사용자가 페이지와 처음 상호 작용(링크 클릭이나 버튼 클릭)할 때, 이에 대한 응답으로 브라우저가 이벤트를 처리하기 까지의 시간을 측정합니다.
Lighthouse에서는 TBT(Total Blocking Time)라는 지표와는 다르지만, Lighthouse에서 성능을 측정할 시 TBT를 개선하는게 FID에도 개선 효과를 줍니다.
CLS
CLS는 페이지 방문자의 시각적인 안정성을 측정합니다.
쉽게 말하면 CLS는 사용자에게 웹 페이지가 표시되고 최종적으로 변화되는 정도를 측정한 수치입니다.
본 지표는 사용자 경험(UX)에 중요한 영향을 끼칩니다.
페이지 렌더링 초기에 화면 전환이 심하면 사용자가 원하는 동작을 할 수 없습니다.
아래의 예시처럼 사용자는 버튼을 클릭하고 싶지만 지속적인 화면의 변화로 사용자가 원하는 동작을 못할 수도 있습니다.
구매하고 싶은 상품 구매를 못하던지, 반대로 취소하고 싶은 상품을 구매한다던지 중요한 UX에 사용자에게 악영향을 줄 수 있습니다.
FCP (First Contentful Paint)
브라우저가 DOM에서 첫 번째 콘텐츠 비트를 렌더링하여, 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 사용자에게 제공하는 경우입니다. FCP 이후에 사용자는 웹 페이지가 로드되어 있다는 것을 느낄 수 있습니다.
최초 콘텐츠풀 페인트 타임스탬프는 브라우저가 텍스트, 이미지(배경 이미지 포함), 비디오, 그려진 캔버스 또는 비어있지 않은 SVG를 처음 렌더링한 시점입니다. 이것은 iframe의 모든 콘텐츠를 제외하지만 보류 중인 웹 글꼴이 있는 텍스트를 포함합니다. 사용자가 페이지 콘텐츠를 소비하기 시작한 것은 이 시점이 처음입니다.
FP (First Paint)
네비게이션과 브라우저가 처음으로 픽셀을 화면에 렌더링한 후 시각적인 모든 항목들을 렌더링하는 사이의 시간입니다. 이는 페이지 로드 시에 첫번째로 중요한 순간이며 "브라우저가 페이지 렌더링을 시작했나요?"에 대한 대답이 됩니다.
그렇다면 이 lighthouse 는 어떻게 이용하는 것일까요 ?
lighthouse 사용법
패키지 매니저로 라이브러리 설치하기
nom Install -g lighthouse
lighthouse https://www.naver.com크롬 익스텐션으로 설치하기
위의 링크를 통해 들어가서, 익스텐션을 설치한 후 사용할 수 있습니다.
Chrome DevTool
2020년 5월 19일 Lighthouse 버전 6.0 배포 이후 Chrome 웹 브라우저 내부의 개발자 도구에서 Lighthouse를 이용할 수 있게 되었다고 합니다.
사진에서 볼 수 있다시피, 크롬 개발자 도구에 들어가서 lighthouse를 클릭 후
Analyze 를 클릭하면 검사가 진행됩니다 !
Analyze 를 통해 검사를 진행한다면, 위에서 설명한 각 항목들에 대한 점수가 부여되며, 전체 성능에 대한 지표도 측정됩니다.
각 항목들의 지표를 확인한 후, 해당 항목을 어떻게 하면 개선할 수 있는지 찾아본 후 개선 방법을 통해 성능 최적화를 조금이라도 적용시켜볼 수 있습니다.
