Sua Blog

go github
Lighthouse로 웹 사이트 성능 검사하기
2022-09-06 — web

Lighthouse

크롬에서 제공하는 웹사이트의 성능을 측정하는 도구

측정항목

  • Performance
  • Accessibility
  • Best Practices
  • SEO
  • PWA

참고사항

컴퓨터마다 같은 사이트도 점수가 다를 수 있다.

  • CPU의 작업량 상태
  • 미국에 있는 서버 홈페이지를 한국의 사용자가 검사할 때
  • 웹서버에 트래픽이 많은 상태에서 검사를 했을 때

Lighthouse는 로컬 PC에서 검사를 진행하기 때문에 PC 환경에 영향을 받을 수 밖에 없다.

Perfomance - Opportunity

Preload Largest Contentful Paint image

Large Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정한다.

페이지의 메인 콘텐츠가 화면에서 렌더링을 완료한 시점을 결정하는 데 사용할 수 있다

LCP가 낮게 나오는 일반적인 이유

  • 느린 서버 응답 시간
  • 렌더링 차단 Javascript 및 CSS
  • 느린 리소스 로드 시간
  • 클라이언트 측 렌더링

해결

  • 서버 최적화: 서버 측 코드의 효율성 분석 및 개선, 쿼리 결과가 보류중이거나 구성 요소가 React에 의해 마크업으로 생성되어야 하기 때문일 수도 있음
  • 사용자를 가까운 CDN으로 라우팅: 콘텐츠 전송 네트워크(CDN)은 여러 위치에 분산된 서버 네트워크이다. 지리적으로 멀리 떨어져 있는 사용자에게 웹사이트가 느리게 표시될 수 있다.
  • assets 캐시: HTML이 고정적이고 모든 요청에 대해 변경할 필요가 없는 경우 캐싱을 통해 HTML이 불필요하게 다시 생성되는 것을 방지할 수 있다. 캐시 서버 역할을 하도록 프록시(ngnix) 구성
  • HTML 페이지 캐시 우선 제공
  • 다른 출처에 대한 연결 요청: rel="preconnect"를 사용해 페이지가 최대한 빨리 연결을 구축할 것임을 브라우저에 알릴 수 있다
<link rel="preconnect" href="https://example.com" />
  • SXG(리소스의 출처를 인증할 수록하는 매커니즘, Signed Exchanges) 사용
  • 렌더링 차단 Javascript 및 CSS: HTML parser는 외부 스타일시트 <link rel="stylesheet"> 또는 동기 JavaScript 태그 <script src="main.js">를 만나면 일시 중지된다. 중요하지 않은 Javascript 및 CSS를 지연시키면 웹 페이지의 메인 콘텐츠 로드 속도를 빠르게 할 수 있다.
  • CSS 축소: 모듈 번들러 또는 빌드 도구를 사용하는 경우 적절한 플러그인을 포함하여 모든 빌드에서 CSS 파일을 축소하는 것이 좋다.
  • 느린 리소스 로드 시간: 이미지 최적화(최신형식 JPEG 2000, JPEG XR 또는 WebP로 변환) 및 압축, 중요한 리소스 미리로드
  • 적응형 asset 사용: 리소스를 로드할 떄 사용자의 기기나 상황에 따라 조건부로 다른 asset을 가져오는게 효과적일 수 있다.
  • 클라이언트 측 렌더링: Javascript 번들을 이용하면 LCP에 영향을 미칠 수 있다. 중요 Javascript를 최소화() 하거나 서버 측 렌더링 또는 사전 렌더링을 사용하면 좋다.

Reduce unused Javascript

사용하지 않는 Javascript는 페이지 로드 속도를 늦출 수 있다.

해결

  • Chrome DevTools 의 Coverage탭에서 사용하지 않는 코드를 분석 할 수 있다.
  • 서버 측 렌더링이 아닌 경우 Javascript 번들을 React.lazy() 등을 사용하여 코드를 분할 한다.
  • Tooling.Report

Property size images

이미지의 크기를 조정하여 데이터를 절약하고 페이지 로드 시간을 개선 할 수 있다.

Lighthouse는 렌더링된 이미지의 크기를 실제 이미지의 크기와 비교한다. 렌더링된 크기가 실제 크기보다 4KiB 이상 작으면 이미지가 감사에 실패합니다.

이상적으로 사용자 화면에 렌더링된 버전보다 큰 이미지가 페이지에 제공되어서는 안된다. 이미지가 크면 바이트가 낭비되고 페이지 로드 시간이 느려진다.

해결

  • 반응형 이미지를 사용하여 이미지의 여러 버전을 생성한 다음 미디어 쿼리, 뷰포트 등을 사용하여 HTML 또는 CSS에서 사용할 버전을 지정한다.
  • 이미지 CDN은 적절한 크기의 이미지를 제공할 수 있다.
  • SVG와 같은 벡터 기반 이미지 형식을 사용하는 것이 좋다. SVG 이미지는 한정된 양의 코드르 사용해 어떤 크기로든 확장할 수 있다.

Use HTTP2

HTTP/2는 유선을 통해 이동하는 데이터를 줄여 페이지 리소스를 더 빠르게 제공한다.

http1.1

해결

  • HTTP/2를 통해 리소스를 제공한다

Preconnect to required origins

<link rel=preconnect>로 연결 요청 우선 순위를 지정하지 않은 모든 주요 요청이 나열되어 있다.

<link rel=preconnect>는 대부분의 브라우저에서 지원된다. <link rel=preconnect>는 페이지가 다른 원본에 대한 연결을 설정하고 가능한 한 빨리 프로세스가 시작되기를 원한다는 것을 브라우저에 알린다.

특히 보안 연결의 경우 DNS 조회, 리디렉션 및 사용자의 요청을 처리하는 최종 서버로 여러 번 왕복하는 것과 관련이 있을 수 잇으므로, 속도가 느린 네트워크에서 연결을 설정하는 데 상당한 시간이 걸린다.

이 모든 것을 미리 처리하면 대역폭 사용에 부정적인 영향을 미치지 않으면서 애플리케이션이 사용자에게 훨씬 더 빠르게 느껴질 수 있다.

해결

<link rel="preconnect" href="https://example.com" />

이를 통해 브라우저는 페이지가 example.com에 연결되고 거기에서 콘텐츠를 검색할 것임을 알 수 있다.

일반적으로 <link rel="preload">이 더 포괄적인 성능 조정이므로 이를 사용하고 다음과 같은 사용 경우 <link rel="preconnect">를 사용해야한다.

  • 어디에서 왔는지 알지만 무엇을 가져오는지는 알 수 없는 경우
  • 스트리밍 미디어

Minify JavaScript

Javascript 파일을 축소하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있다. 축소는 더 작지만 완벽하게 유효한 코드 파일을 만드는 데 필요하지 않은 공백과 모든 코드를 제거하는 프로세스이다.

Lighthouse 결과에는 축소되지 않은 모든 Javascript 파일이 나열되고 이 파일을 축소했을 때 잠재적으로 절약할 수 있는 KB가 표시된다.

해결

  • Terser는 널리 사용되는 JavaScript 압축 도구이다. webpack v4에는 기본적으로 이 라이브러리에 대한 플러그인이 포함되어 있어 축소된 빌드 파일을 생성한다.
  • 빌드 시스템이 JS 파일을 자동으로 축소하는 경우 애플리케이션의 프로덕션 빌드를 배포하고 있는지 확인한다. React 개발자 도구 확장으로 이를 확인할 수 있다.

react dev tools

Eliminate render-blocking resources

이 부분에 첫번째 페인트를 차단하는 모든 URL이 나열되는데 중요하지 않은 리소스를 lazy로 연기하고 사용하지 않는 모든 것을 제거하여 이러한 렌더링 차단 URL의 영향을 줄이는 것이 좋다.

Lighthouse가 렌더링 차단 URL로 지정하는 스크립트와 스타일 시트가 있다.

다음과 같은 <script>태그

  • <head>문서에 있을때
  • defer속성 이 없을때
  • async속성 이 없을때

다음과 같은 <link rel="stylesheet">태그

  • disabled속성 이 없을때. 이 속성이 있으면 브라우저는 스타일시트를 다운로드하지 않는다.
  • media사용자의 기기와 구체적으로 일치 하는 속성이 없을때. media="all"렌더링 차단으로 간주된다.

defer 속성이 있는 스크립트(지연 스크립트)는 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다. 그리고 스크립트의 실행은 페이지 구성이 끝날 때까지 지연된다. defer 속성은 외부 스크립트에만 유효하다. DOM이나 다른 스크립트에 의존성이 있고, 실행순서가 중요한 경우 적용한다.

async 속성이 있는 스크립트(비동기 스크립트)는 페이지와 완전히 독립적으로 동작한다. defer와 마찬가지로 백그라운드에서 다운로드 되지만 async 스크립트 실행중에는 HTML 파싱이 멈춘다. 다른 스크립트에 의존성이 없고(방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트), 실행 순서가 중요하지 않은 경우 적용한다.

해결

  • 렌더링을 차단하는 script 제거: 사용하지 않는 코드는 제거하고 중요하지 않은경우 defer나 async 속성을 사용한다
  • 렌더링을 차단하는 stylesheet 제거: 첫번째 페인트에 필요한 중요한 스타일을 먼저 로드하고 나머지 스타일을 비동식으로 로드한다. CSS를 축소한다.
참고

https://web.dev/optimize-lcp/?utm_source=lighthouse&utm_medium=devtools#preload-important-resources

https://web.dev/unused-javascript/?utm_source=lighthouse&utm_medium=devtools

https://web.dev/uses-responsive-images/?utm_source=lighthouse&utm_medium=devtools

https://web.dev/uses-rel-preconnect/?utm_source=lighthouse&utm_medium=devtools

https://web.dev/unminified-javascript/?utm_source=lighthouse&utm_medium=devtools

https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=devtools