1. Lighthouse이란
Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴입니다. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있습니다.
2. Lighthouse 사용하기
2-1. Chrome 개발자 도구에서 실행하기
2-2. Node CLI에서 실행하기
1. Lighthouse를 설치합니다. 이때-g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋습니다
`npm install -g lighthouse`
2. 다음의 명령어로 검사를 실행할 수 있습니다.
`lighthouse <url>`
3. 다음의 명령어로 모든 옵션을 볼 수 있습니다.
`lighthouse --help`
3. Lighthouse 분석 결과 항목
3-1. Performance
Performance 항목에서는 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.
3-2. Accessibility
Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.
3-3. Best Practices
Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.
3-4. SEO
SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.
3-5. PWA (Progressive Web App)
PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.
4. Lighthouse의 Performance 측정 메트릭
4-1. First Contentful Paint (FCP)
FCP는 성능을 추적하는 지표입니다.
FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다. 즉 사용자가 감지하는 페이지의 로딩속도를 측정할 수 있습니다. 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 합니다.
4-2. Largest Contentful Paint (LCP)
LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정합니다. 이를 이용해 주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있습니다.
4-3. Time to interactive (TTI)
TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정합니다.
4-4. Speed Index
Speed Index는 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 채워지는지를 측정합니다.
Lighthouse는 먼저 브라우저의 페이지 로딩과정을 각 프레임마다 캡쳐합니다. 그리고 프레임 간 화면에 보이는 요소들을 계산합니다. 그 후 Speedline Node.js module을 이용하여 Speed Index 점수를 그래프의 형태로 나타냅니다.
페이지 로딩이 완료되는 시간은 같지만 A가 B보다 페이지가 빨리 채워진다고 느낄 수 있다. 그러므로 A가 B보다 스피드 인덱스에서 좋은 점수를 받을 수 있다.
4-5. Total Blocking Time (TBT)
TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정합니다. Lighthouse에서는 FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정합니다.
4-6. Cumulative Layout Shift (CLS)
CLS는 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표입니다. 이 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는 지를 측정할 수 있습니다.
5. 네이버에 사용해보기
차세대 형식 사용해 이미지 제공하기
➡️WebP 및 AVIF와 같은 이미지 형식사용하기
WebP 및 AVIF은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다.
하지만 WebP와 AVIF 모두 비교적 최근에 등장한 이미지 포맷이기 때문에 JPEG 포맷처럼 모든 브라우저에서 호환되지 않습니다. 그러므로 `<picture>` 태그를 이용해 각 브라우저의 호환에 맞도록 분기해 사용하도록 합니다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>`<source>`태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 `<source>` 태그는 무시됩니다.
효율적으로 이미지 인코딩하기
➡️ 이미지 CDN을 사용하여 이미지 최적화
이미지 CDN은 이미지를 최적화해서 클라이언트에 전달해주는 것입니다.
예를 들어 아래 강아지 사진은 URL에 따라서 이미지를 수정해서 보내줍니다.
➡️ 이미지 압축하기
➡️ 애니메이션 GIF를 비디오로 대체하기
➡️ 반응형 이미지 제공
사용하지 않는 자바스크립트 줄이기
➡️ 코드 분할
➡️ 죽은 코드 제거
➡️ 크롬 개발자 도구의 Coverage탭에서 사용하지 않는 자바스크립트 및 CSS 코드 찾
렌더링 차단 리소스 제거
➡️ 렌더링 차단하는 스크립트, 스타일시트 제거
렌더링 차단 리소스의 영향을 줄이기 위한 첫 번째 단계는 무엇이 중요하고 무엇이 중요하지 않은지 식별하는 것입니다. 크롬 개발자 도구의 Coverage탭을 사용하여 중요하지 않은 CSS 및 JS를 식별합니다.
빨간색은 중요하지 않고 주 기능에 사용되는 않는 코드, 푸른색은 중요하고 영향을 주는 코드 비중을 말합니다.
중요한 코드를 식별됐으면 해당 스크립트 태그에서 async 또는 defer 속성을 추가해 줍니다.
중요한 CSS와 중요하지 않은 CSS를 분리한 후 크리티컬CSS 방식을 사용합니다.
참고)
코드스테이츠 유어클래스