lighthouse에 대해
lighthouse란?
구글에서 개발한 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 툴입니다.
lighthouse 보고서는 다음과 같이 5개의 정보를 제공합니다.
performance(성능)
💡 웹 페이지가 로딩될 때의 로드 속도 등 성능 관련 문제를 분석/평가합니다. 이 과정에서 FP, FCP, LCP, FID, CLS, 등과 같은 메트릭을 이용합니다.
※ "메트릭(metric)"은 어떤 사항을 정량적으로 측정하는 방법이나 기준을 의미합니다. 메트릭은 특정 목표나 성과를 평가하기 위해 사용되는 지표나 수치입니다.
FP (First Paint)
FP는 사용자가 페이지를 요청한 후 첫 번째 픽셀이 화면에 나타나기까지 걸리는 시간을 나타냅니다.
FCP (First Contentful Paint)
FCP는 페이지에서 첫 번째 텍스트 또는 이미지 컨텐츠가 렌더링될 때까지의 시간을 측정합니다. FCP는 FP보다 사용자에게 더 의미있는 콘텐츠가 로드된 것을 나타내므로, 사용자 경험 측면에서 더 중요한 지표로 여겨집니다.
LCP (Largest Contentful Paint)
LCP는 페이지 로드 중 가장 큰 컨텐츠 요소(이미지 또는 텍스트 블록)가 화면에 표시되는 데 걸리는 시간을 측정합니다. 이 메트릭은 사용자가 페이지의 주요 컨텐츠를 볼 수 있게 되는 시점을 나타냅니다.
FID (First Input Delay)
FID는 사용자가 페이지와 상호 작용을 시작할 때부터 브라우저가 이벤트를 처리하기 시작할 때까지의 지연 시간을 측정합니다. 예를 들어, 버튼 클릭이나 링크 클릭 후 반응하는 데 걸리는 시간을 측정합니다.
CLS (Cumulative Layout Shift)
CLS는 페이지 로드 중 발생하는 예상치 못한 레이아웃 변화의 총합을 측정합니다. 예상치 못한 레이아웃 변화란 서버에서 이미지를 fetch해서 렌더할때, 이미지의 크기가 커서 렌더링이 늦는 경우, 이미지들이 밀리면서 렌더링 되는 경우 등을 말합니다. 즉, 이 메트릭은 페이지 요소가 얼마나 안정적으로 표시되는지를 나타냅니다.
Accessibility(접근성)
폰트 사이즈, 메뉴간 간격 등을 측정하여, 웹사이트가 다양한 사용자, 특히 장애가 있는 사용자들에게 얼마나 접근 가능한지를 평가합니다.
Best Practices
보안, 이미지 최적화, HTTPS 사용과 같은 현대적인 웹 개발의 Best practices를 준수하는지 검토합니다.
SEO
Search Engine Optimization의 약자로, 페이지가 검색 엔진에서 잘 발견될 수 있도록 최적화되어 있는지 평가합니다.
PWA
Progressive Web App의 약자로, PWA (Progressive Web App)는 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다.
사용방법
사용방법은 간단합니다.
측정하고 싶은 페이지에 접속한 후, 개발자 도구의 Lighthouse 탭으로 들어가 줍니다. (별도의 프로그램 설치 없이 사용 가능 합니다.)
모드, 디바이스, 카테고리 등을 선택한 뒤 분석 버튼을 누르면,
수초 ~ 수십초 간 위와 같은 측정화면이 나오고
결과가 나오게 됩니다.
Performance에 대해 조금 더 자세한 결과를 보면,
각 메트릭에서 어떤 결과가 나왔는지 카테고리별로 확인할 수 있습니다.
SEO를 최적화 하는 방법
검색엔진이 내 콘텐츠를 이해하도록 돕기
검색엔진의 크롤링 및 색인 생성 지원
모바일 친화적인 변경사항
등이 있다고 합니다. 각각에 해당하는 내용들을 공식문서를 통해서 확인하실 수 있습니다.
참고
