lightHouse
LightHouse는 Google에서 개발한 오픈 소스 자동화 도구로, 웹 페이지의 품질을 개선하기 위해 사용된다.
성능 , 접근성, SEO(검색 엔진 최적화),PWA(Progressive Web App) 적합성 평가 및 점수 측정
LightHouse는 Chrome DevTools, Node, CLI을 통해 실행할 수 있다.
Lighthouse의 주요 기능
성능 (Performance)
페이지 로딩 시간, 응답 시간, 인터랙티브 시점(Time to Interative)등 다양한 성능 지표를 분석한다.
중요한 메트릭스에는 FCP, LCP, TTI, TBT 그리고 CLS가 있다.
접근성 (Accessibility)
웹 페이지가 다양한 사용자, 특히 장애가 있는 사용자에게 얼마나 접근 가능한지를 평가한다.
색 대비, 이미지 대체 텍스트, 폼 레이블 등의 요소를 검토한다.
베스트 (Best Practices)
웹 페이지가 최신의 웹 개발 관행을 따르고 있는지 평가한다.
보안, 성능 최적화, 최신 기술 사용 등을 검토한다.
SEO (Search Engine Optimization)
웹 페이지가 검색 엔진에서 잘 노출될 수 있도록 최적화되어 있는지 평가한다.
메타 태그, 구조화된 데이터, 페이지 제목 등의 요소를 검토한다.
PWA (Progressive Web App)
웹 페이지가 PWA 기준을 얼마나 잘 따르고 있는지 평가한다.
오프라인 기능, 서비스 워커, 웹 앱 매니페스트 등의 요소를 검토한다.
주요 메트릭스
FCP(First Contentful Paint)
FCP는 페이지의 첫 번째 콘텐츠가 화면에 렌더링되는 시간을 측정한다. 콘텐츠 : 텍스트, 이미지, SVG, 또는 canvas요소를 의미한다.
사용자에게 페이지가 로드되고 있음을 인식시키는 첫 번째 시각적 피드백이다.
서버 응답 시간을 줄인다.
CSS를 최소화하고 중요한 CSS는 인라인으로 넣는다.
렌더링 차단 리소스를 최소화한다.
LCP(Largest Contentful Paint)
LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 완전히 렌더링되는 시간을 측정한다. 일반적으로 이미지, 비디오 포스터, 블록 수준 텍스트 요소가 포함된다.
사용자가 주요 콘텐츠를 볼 수 있는 시점을 나타내므로, 페이지 로딩 경험의 중요한 부분이다.
중요한 자원은 우선 로드한다.
이미지와 비디오의 로딩을 최적화한다.
CSS와 자바스크립트의 불필요한 지연을 줄인다.
TTI(Time to interactive)
TTI는 페이지가 완전히 상호작용 가능해지는 데 걸리는 시간을 측정한다. 페이지의 모든 주요 스크립트가 로드되고 실행되어 사용자가 클릭, 스크롤 등의 인터렉션을 원활히 할 수 있는 시점
사용자가 페이지와 상호작용할 수 있는 시간을 나타내므로, 사용자경험에 큰 영향을 미친다.
긴 자바스크립트 작업을 분할한다.
중요한 작업을 우선 처리하고, 덜 중요한 작업은 나중에 처리한다.
스크립트 로딩을 최적화하고, 비동기적으로 로드한다.
TBT(Total Blocking Time)
TBT는 FCP부터 TTI 사이의 기간 동안 메인 스레드가 블록된 총 시간을 측정한다. 메인 스레드가 긴 작업으로 인해 사용자의 입력을 처리할 수 없었던 시간을 포함한다.
페이지 응답성을 유지하는 데 중요한 지표이다. 높은 TBT는 사용자 경험을 저하시킬 수 있다.
자바스크립트 실행 시간을 줄인다
긴 작업을 더 작은 청크로 분할한다.
웹 워커를 사용하여 메인 스레드의 부하를 줄인다.
CLS(Cumulative Layout Shift)
CLS는 페이지의 시각적 안정성을 측정하는 지표로, 레이아웃 이동의 합계를 나타낸다. 페이지 로드 중 예상치 못한 레이아웃 변경으로 인해 사용자가 콘텐츠를 읽거나 상호작용하는 데 방해받는 정도를 나타낸다.
예상치 못한 레이아웃 이동은 사용자의 불편을 초래하고, 특히 사용자가 특정 위치의 콘텐츠를 클릭할 때 문제가 된다.
이미지와 비디오 요소에 크기 속성을 명시하여 공간을 예약한다.
동적 콘텐츠 추가 시 레이아웃 이동을 최소화한다.
애니메이션과 전환 효과를 신중하게 사용한다.
최적화 팁
성능 : 불필요한 자바스크립트와 CSS를 제거하고, 이미지를 최적화하며, 캐싱을 적절히 설정한다.
접근성 : 시맨틱한 HTML 태그를 사용하고, 적절한 ARIA속성을 추가하며, 사용자 인터페이스 요소를 접근 가능하게 만든다.
SEO : 적절한 메타 태그를 사용하고, 구조화된 데이터를 추가하며, 페이지 제목과 설명을 최적화한다.
PWA : 서비스 워커를 설정하고, 웹 앱 매니페스트를 추가하며, 오프라인 기능을 구현한다.
Last updated