Lighthouse

Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴입니다. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있습니다.

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

First Contentful Paint

FCP란 무엇인가요?
최초 콘텐츠풀 페인트(FCP) 메트릭은 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다
우수한 사용자 경험을 제공하려면 사이트의 최초 콘텐츠풀 페인트가 1.8초 이하여야 합니다.

해결방법

렌더링 차단 리소스 제거

CSS 축소

사용하지 않는 CSS 제거

필요한 원본에 사전 연결

서버 응답 시간 단축(TTFB)

여러 페이지 리디렉션 방지

핵심 요청 사전 로드

막대한 네트워크 페이로드 방지

효율적인 캐시 정책으로 정적 자산 제공

과도한 DOM 크기 방지

li>크리티컬 요청 깊이 최소화

웹폰트 로드 중에 텍스트가 계속 표시되는지 확인

요청 수를 낮게 유지하고 전송 크기를 작게 유지

Speed Index

속도 지수는 Lighthouse 보고서 의 성능 섹션에서 추적되는 6가지 측정항목 중 하나입니다. 각 메트릭은 페이지 로드 속도의 일부 측면을 캡처합니다.

속도 지수가 측정하는 것
속도 지수는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 측정합니다. Lighthouse는 먼저 브라우저에서 페이지 로드의 비디오를 캡처하고 프레임 간의 시각적 진행을 계산합니다.

속도 지수 점수를 높이는 방법

메인 스레드 작업 최소화

자바스크립트 실행 시간 단축

웹폰트 로드 중에 텍스트가 계속 표시되는지 확인

Largest Contentful Paint

Large Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 Core Web Vitals 메트릭이며 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정합니다. 페이지의 메인 콘텐츠가 화면에서 렌더링을 완료한 시점을 결정하는 데 사용할 수 있습니다.

LCP가 저하되는 일반적인 원인은 다음과 같다.

느린 서버 응답 시간

자바스크립트와 CSS의 렌더 블로킹

느린 리소스 로딩 시간

클라이언트측 렌더링

해결방법

느린 서버 응답 시간

• 서버를 최적화한다.
• 사용자와 가까운 CDN을 사용한다.
• 자원을 캐시한다.
• HTML 페이지를 우선 캐시되도록 한다.
• 서드파티 자원의 연결을 일찍한다.

자바스크립트와 CSS의 렌더 블로킹

• CSS를 최소화한다.
• 중요하지 않은 CSS를 지연시킨다.
• 중요한 CSS는 내재한다.

느린 리소스 로딩 시간

• 리소스 로드 시점을 늦춘다.
• 이미지를 최적화하고 압축한다.
• 중요한 리소스를 미리 로드한다.
• 텍스트 파일을 압축한다.
• 적응형 제공방식
• 서비스 워커를 사용하여 리소스를 캐시한다.

클라이언트 측 렌더링

• 핵심 자바스크립트를 최소화한다.
• 서버 측 렌더링을 사용한다.
• 사전 렌더링한다.