Lighthouse와 최적화

📍LightHouse란?

---

LightHouse는 웹페이지의 성능을 측정해주고 개선책을 제공해주는 자동화 도구입니다. 개발자는 Lighthouse의 검사 결과를 기반으로 웹페이지의 품질을 개선 할 수 있습니다.

Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있습니다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행합니다.

 

📍Lighthouse 사용

---

2020년 5월 19일 Lighthouse 버전 6.0 배포 이후 Chrome 개발자 도구에서 Lighthouse가 들어왔습니다.

1. 검사하고 싶은 페이지에서 개발자 도구를 엽니다.
2. Lighthouse 탭으로 들어옵니다.
3. Analyze page load 를 클릭해서 검사를 실행합니다.

4. 검사가 완료되면 아래와 같은 리포트가 생성됩니다.

 

📍Lighthouse 분석 결과 항목

---

1. Performance

화면에 콘텐츠가 얼마나 빨리 표시되고 사용자는 얼마나 빠르게 유저와 상호작용하는지에 초점을 맞추고 있습니다. 또한 세부 항복마다 가중치가 존재합니다.

Lighthouse 8 감사 가중치

최초 콘텐츠가 포함된 페인트	10%
속도 지수	10%
가장 큰 콘텐츠가 포함된 페인트	25%
상호 작용까지의 시간	10%
총 차단 시간	30%
누적 레이아웃 이동	15%

2. Accessibility

Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. <img> 태그에 alt 대체 텍스트 속성이 있는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

3. Best Practices

Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. 더는 사용하지 않는 API를 호출하고 있지 않은지, HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.

4. SEO (Search Engine Optimization)

SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

5. PWA (Progressive Web App)

Progressive Web App을 정의하는 일련의 기준에 따라 웹 페이지를 확인합니다. 이 검사는 해당 웹 페이지가 항목을 따르고 있는지 측정하여 점수를 부여하는 것이 아니라 웹이 HTTP를 HTTPS로 리다이렉션하는지, 응답 코드는 명확한지, 3G 네트워크에서도 로딩이 빠르게 이루어지는 지와 같은 여부를 검사하여 합격 또는 실패를 판별합니다.

 

📍Opportunities

---

Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해줍니다. Opportunities(추천) 항목을 확인하면 각 메트릭별 문제를 확인할 수 있습니다.

일반적으로, 기회 또는 진단 결과가 아닌 메트릭만 Lighthouse 성능 점수에 영향을 미칩니다. 다만, 기회와 진단을 개선하면 메트릭 값이 개선될 가능성이 높으므로 간접적인 관계가 있습니다. 추천 항목들의 오른쪽 화살표를 클릭해 열어보면 각 항목에 대한 설명과 함께 개선해야 할 세부 내용들과 전송 크기, 절감 가능한 효과까지 확인해 볼 수 있습니다.

Opportunities 항목

차세대 형식을 사용해 이미지 제공하기

WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다.

애니메이션 콘텐츠에 동영상 형식 사용하기

대용량의 GIF는 애니메이션 콘텐츠를 전달하는 데 비효율적입니다. 애니메이션에는 MPEG4/WebM 동영상을, 정적인 이미지에는 GIF 대신 PNG/WebP를 사용하여 네트워크 바이트를 절약할 수 있습니다.

효율적으로 이미지 인코딩하기

Lighthouse 보고서의 기회 섹션에는 kibibytes(KiB)로 잠재적 절감 효과를 제공하는 최적화되지 않은 모든 이미지가 나열되어 있습니다. 페이지가 더 빨리 로드되고 더 적은 데이터를 소비하도록 이러한 이미지를 최적화합니다. 잠재적인 절감 효과가 4KiB 이상인 경우 Lighthouse는 이미지를 최적화 가능한 것으로 플래그 지정합니다.

렌더링 차단 리소스 제거하기

페이지의 첫 번째 페인트를 차단하는 모든 URL이 나열됩니다. 중요한 리소스를 인라인하고, 중요하지 않은 리소스를 연기하고, 사용하지 않는 것은 제거해서 이러한 렌더링 차단 URL의 영향을 줄이는게 좋습니다.

사용하지 않는 자바스크립트 줄이기

JavaScript 파일을 축소하면 페이로드 크기와 페이지를 로드하는 시간을 줄일 수 있습니다.

Lighthouse는 축소되지 않은 모든 JavaScript 파일을 보여주고 파일을 축소할 때 잠재적으로 절감할 수 있는 키비바이트( KIB )를 알려줍니다.

위에 항목들 외에도 통과한 감사를 보면 Lighthouse가 검사하는 많은 항복들이 있습니다.

 

📍Counclusion

Chrome 개발자 도구 구석에 숨어있어서 들어가본적도 없었는데 굉장히 유용한 도구였다. 분석 항목이 세세하고 원인과 수정 방안까지 제시해줘서 꽤 친절하게 느껴졌다.

프로젝트에 들어가면 결과는 처참하더라도 자주 검사하면서 친해져보고싶다.