Lighthouse는 사이트 품질을 개선하기 위한 자동화된 도구입니다. URL을 입력하면 페이지 성능을 개선하고, 페이지의 접근성을 높이고, 권장사항을 준수하는 방법 등에 관한 권장사항 목록을 제공합니다. Chrome DevTools 내에서, Chrome 확장 프로그램 또는 지속적 통합에 유용한 노드 모듈로 실행할 수 있습니다.
Lighthouse는 한동안 텍스트 압축 사용 설정 또는 렌더링 차단 스크립트 줄이기와 같이 페이지 로드 성능을 개선하기 위한 다양한 팁을 제공했습니다. Lighthouse팀은 사이트 속도를 높이는 데 도움이 되는 더욱 유용한 조언을 제공하기 위해 새로운 감사를 계속 제공하고 있습니다. 이 게시물은 여러분이 모를 수 있는 다음과 같은 유용한 성능 감사를 요약한 것입니다.
- 기본 스레드 작업 분류
- 주요 요청 미리 로드
- 자바스크립트 부팅 시간이 김
- 페이지 리디렉션 방지
- 사용되지 않는 자바스크립트
- 정적 애셋에 비효율적인 캐시 정책 사용
- 출발지를 여러 번 왕복하는 데 비용이 많이 드는 상황을 방지하세요
- 애니메이션 콘텐츠에 동영상 형식 사용하기
- 웹폰트가 로드되는 동안 모든 텍스트가 계속 표시됨
- CSS 및 자바스크립트 간소화
- 사용되지 않는 CSS 규칙
기본 스레드 작업 분류
DevTools에서 성능 패널을 사용해 본 적이 있다면, 페이지를 로드하는 데 CPU 시간이 소비된 위치를 분석하는 것이 약간 번거로울 수 있습니다. 이제 새로운 기본 스레드 작업 분류 감사를 통해 이 정보를 쉽고 간편하게 확인할 수 있습니다.
이 새로운 진단에서는 페이지 로드 중에 발생하는 활동의 양과 종류를 평가하여 레이아웃, 스크립트 평가, 파싱 및 기타 활동과 관련된 로드 성능 문제를 처리할 수 있습니다.
주요 요청 미리 로드
브라우저는 리소스를 검색할 때 문서 및 하위 리소스 내에서 리소스에 대한 참조를 찾으면서 리소스를 검색합니다. 일부 중요한 리소스는 페이지 로드 프로세스에서 비교적 늦게 검색되므로 최적화되지 않을 때도 있습니다. 다행히 rel=preload를 사용하면 개발자가 규정을 준수하는 브라우저에 최대한 빨리 가져와야 하는 리소스를 알려줄 수 있습니다. 새로운 키 요청 미리 로드 감사를 통해 개발자는 rel=preload에 의해 더 빨리 로드되면 어떤 리소스가 도움이 될 수 있는지 파악할 수 있습니다.
rel=preload를 사용하거나 사용하지 않고 성능 변경사항을 테스트하고 비교하는 것이 매우 중요합니다. 예상하지 못한 방식으로 로드 성능에 영향을 미칠 수 있기 때문입니다. 예를 들어 큰 이미지를 미리 로드하면 초기 렌더링이 지연될 수 있지만 미리 로드된 이미지가 레이아웃에 더 빨리 표시되는 단점이 있습니다.
항상 결과가 마음에 드는지 확인하세요!
자바스크립트 부팅 시간이 김
너무 많은 자바스크립트가 로드되면 브라우저가 파싱, 컴파일, 실행할 때 페이지가 응답하지 않을 수 있습니다. 서드 파티 스크립트 및 광고는 강력한 기기까지도 멈출 수 있는 과도한 스크립트 활동의 특정 소스입니다. 새로운 JavaScript 부팅 시간 높음 감사에서는 페이지의 각 스크립트가 사용하는 CPU 시간과 해당 URL을 확인할 수 있습니다.
이 감사를 실행할 때 네트워크 패널에서 서드 파티 배지를 사용 설정하고 목록을 필터링하여 서드 파티 스크립트 리소스를 식별할 수도 있습니다. 이 감사에서 얻은 데이터를 통해 페이지가 빠른 페이지에서 느림으로 바뀌는 과도한 자바스크립트 활동의 원인을 더 잘 찾을 수 있습니다. 애플리케이션에 특정한 스크립트의 경우 코드 분할 및 트리 쉐이킹과 같은 기법을 사용하여 사이트의 각 페이지에서 자바스크립트 양을 제한할 수 있습니다.
페이지 리디렉션 방지
브라우저에서 URL을 요청할 때 서버는 300 수준 상태 코드로 응답할 수 있습니다. 이렇게 하면 브라우저가 다른 URL로 리디렉션됩니다. 리디렉션은 검색엔진 최적화와 편의를 위해 필요하지만 요청에 지연 시간을 추가합니다. 다른 출처로 리디렉션하는 경우 특히 DNS 조회 및 연결/TLS 협상 시간이 추가로 발생할 수 있습니다.
사이트의 방문 페이지에는 리디렉션을 사용하지 않는 것이 좋습니다. 지연 시간을 줄이고 로드 성능을 개선하는 데 도움이 되도록 Lighthouse는 이제 페이지 리디렉션 방지 감사를 제공합니다. 이 감사를 통해 탐색으로 인해 리디렉션이 트리거될 때 이를 알 수 있습니다.
이 감사는 Lighthouse의 DevTools 버전에서 트리거하기 어렵습니다. 모든 리디렉션의 해상도를 반영하는 페이지 주소 표시줄에 있는 현재 URL을 분석하기 때문입니다. 이 감사가 Node CLI에 채워질 가능성이 높습니다.
사용되지 않는 자바스크립트
불량 코드는 자바스크립트를 많이 사용하는 애플리케이션에서 심각한 문제가 될 수 있습니다. 이 메서드는 호출되지 않아 실행 비용이 발생하지는 않지만 원치 않는 다른 결과가 발생합니다. 불량 코드는 계속 브라우저에서 다운로드, 파싱, 컴파일됩니다. 이는 로드 성능 및 자바스크립트 부팅 시간에 영향을 미칩니다. DevTools의 적용 범위 패널과 마찬가지로 Unused JavaScript 감사에서는 현재 페이지에서 다운로드되었으나 사용된 적이 없는 JavaScript를 보여줍니다.
이 감사를 통해 애플리케이션에서 불량 코드를 식별하고 삭제하여 로드 성능을 개선하고 시스템 리소스 사용량을 줄일 수 있습니다. 전문가의 팁: Chrome DevTools의 코드 적용 범위 패널에서 이 정보를 찾을 수도 있습니다.
정적 애셋에 비효율적인 캐시 정책 사용
성능 관련 조언이 처음 사용자의 웹사이트 속도를 높이는 데 중점을 두는 경향이 있지만, 재사용자의 로드 성능을 개선하기 위해 캐싱을 사용하는 것도 중요합니다. 정적 애셋에 비효율적인 캐시 정책 사용 감사는 네트워크 리소스의 캐싱 헤더를 검사하고 정적 리소스의 캐시 정책이 표준에 미달하는 경우 알려줍니다.
이 감사를 활용하면 현재 캐시 정책의 문제를 쉽게 찾아서 해결할 수 있습니다. 이렇게 하면 재방문 사용자의 성능이 크게 개선되고 더 빨라진 속도에 만족할 것입니다.
출발지까지의 왕복 비용이 많이 드는 것을 방지하세요
브라우저가 서버에서 리소스를 검색할 때 DNS 조회를 수행하고 서버와 연결을 설정하는 데 상당한 시간이 걸릴 수 있습니다.
rel=preconnect를 사용하면 개발자가 브라우저가 적시에 연결되기 전에 다른 서버에 연결을 설정하여 이러한 지연 시간을 마스킹할 수 있습니다. 모든 출발지로의 비용이 많이 드는 여러 왕복 방지 감사에서는 rel=preconnect를 사용할 기회를 발견할 수 있습니다.
rel=preconnect에 권장되는 출처 목록입니다.교차 출처 애셋의 지연 시간이 줄어들면 사용자는 상황이 좀 더 빠르게 진행되고 있다고 인지할 수 있습니다. 이 새로운 Lighthouse 감사에서는 rel=preconnect를 사용하여 이를 수행할 수 있는 새로운 기회를 알아봅니다.
애니메이션 콘텐츠에 동영상 형식 사용
애니메이션 GIF는 큰 크기이며, 데이터 양은 아니더라도 수백 KB를 소모하는 경우가 많습니다. 로드 성능에 관심이 있다면 GIF를 동영상으로 변환하는 것이 좋습니다. 다행히 애니메이션 콘텐츠에 동영상 형식 사용 감사를 사용해도 됩니다.
사이트에 100KB를 초과하는 GIF가 있으면 이 감사에서 자동으로 이를 신고하고 이를 동영상으로 변환하고 삽입하는 방법에 관한 안내를 안내합니다. Imgur와 같은 사이트는 GIF를 동영상으로 변환하여 로드 성능을 크게 개선했습니다. 또한 데이터 전송량 제한이 있는 대역폭을 사용하는 호스팅 요금제를 사용하고 있다면 잠재적인 비용 절감 효과만으로도 충분히 설득할 수 있습니다.
웹 글꼴을 로드하는 동안 모든 텍스트가 계속 표시됨
페이지의 웹 글꼴을 로드할 때 브라우저는 글꼴이 로드될 때까지 보이지 않는 텍스트를 렌더링하는 경우가 많습니다. FOIT (Flash of Invisible Text)라고 하는 이 현상은 디자인 측면에서는 바람직할 수 있지만 실제로는 문제가 됩니다. 렌더링이 차단된 텍스트는 렌더링되어 표시될 때까지 읽을 수 없습니다. 지연 시간이 길거나 대역폭이 높은 연결에서 이는 사용자 환경의 핵심 부분이 누락되었음을 의미합니다. 또한 페이지가 의미 있는 콘텐츠를 다른 경우만큼 빠르게 렌더링하지 못한다는 점에서 일종의 지각적인 성능 문제일 수도 있습니다. 웹 글꼴 로드 중에 모든 텍스트가 표시됨 감사를 통해 사이트에서 이 문제를 해결할 기회를 찾을 수 있습니다.
Lighthouse가 애플리케이션에서 텍스트 렌더링을 지연시키는 웹 글꼴을 찾으면 몇 가지 가능한 해결 방법이 있습니다. font-display CSS 속성 또는 Font Loading API를 사용하여 텍스트 렌더링을 제어할 수 있습니다.
더 자세히 알아보려면 잭 레더맨의 유용한 가이드인 글꼴 로드 전략 종합 가이드를 참고하세요. 이 가이드는 최적의 글꼴 로드를 위한 훌륭한 리소스입니다.
CSS 및 자바스크립트의 최소화
압축은 웹 성능이 중요한 요소이기 때문에 권장되는 기법으로 사용되었습니다. 텍스트 기반 리소스의 크기를 크게 줄여 로드 성능에 좋습니다. 그러나 특히 빌드 프로세스에서 최적화를 처리하지 않는 경우 이러한 최적화를 간과하기 쉽습니다. CSS 축소 및 JavaScript 축소 감사는 현재 페이지에서 찾은 축소되지 않은 리소스 목록을 컴파일합니다. 그런 다음 이러한 파일을 수동으로 축소하거나 빌드 시스템을 보강하여 조치를 취할 수 있습니다.
사용되지 않은 CSS 규칙
사이트가 좀 길면 리팩토링으로 인해 쌓인 쓸모없는 요소가 쌓이기 시작합니다. 이러한 허술한 요인 중 하나는 사용되지 않는 CSS 규칙의 형태로 발생합니다. CSS 규칙의 형태는 사이트 작동에 더 이상 필요하지 않지만 대역폭을 소비하는 것입니다. 편의를 위해 사용되지 않는 CSS 규칙 감사에서는 사용되지 않는 CSS가 포함된 페이지의 CSS 리소스를 표시합니다.
Lighthouse가 페이지에서 사용되지 않는 CSS를 발견하면 이를 삭제할 수 있는 여러 방법이 있습니다. UnCSS는 이 작업을 자동으로 실행하는 유틸리티 중 하나입니다 (주의해서 사용해야 함). 보다 수동적인 방법은 DevTools의 코드 적용 범위 패널을 사용하는 것입니다. 단, 한 페이지에서 사용되지 않은 CSS가 다른 페이지에 필요할 수 있다는 점을 기억하세요. 또 다른 접근 방식은 CSS를 필요한 경우에만 로드되는 템플릿별 파일로 분할하는 것입니다. 어떤 결정을 내리든 Lighthouse는 쓸모없는 CSS가 너무 많다면 알려줍니다.
Lighthouse를 사용해 보세요.
이러한 새로운 감사에 관심이 있다면 Lighthouse를 업데이트하여 사용해 보세요.
- Lighthouse Chrome 확장 프로그램은 자동으로 업데이트되지만
chrome://extensions를 통해 수동으로 업데이트할 수도 있습니다. - DevTools의 감사 패널에서 Lighthouse를 실행할 수 있습니다. Chrome은 약 6주마다 새 버전으로 업데이트되므로 일부 최신 감사가 제공되지 않을 수 있습니다. 최신 감사 기능을 사용하고 싶다면 Chrome Canary를 다운로드하여 최신 Chrome 코드를 실행하면 됩니다.
- 노드 사용자의 경우:
npm update lighthouse을 실행하거나 Lighthouse를 전역적으로 설치한 경우npm update lighthouse -g를 실행합니다.
소중한 의견을 제공해 주신 케이스 바스크, 패트릭 헐스, 애디 오스마니, 비나무라타 싱갈에게 감사의 말씀을 전해 이 글의 품질을 크게 개선했습니다.