Lighthouse에 대해 알아보자

Lighthouse로 웹페이지 성능 높여보기

남다은

2024.05.10

✨ Lighthouse

Google Lighthouse는 웹페이지 성능을 측정하기 위한 오픈소스 자동화 도구이다.
구글 확장 프로그램으로 설치하면 된다!
- Lighthouse는 공개 웹 페이지나 인증이 필요한 모든 웹페이지에 대해 실행 가능하다.

✨ 성능 측정 하는 방법

위 사진과 같이 개발자 도구의 메뉴를 통해 lighthouse에 접근 가능하다.

Google Lighthouse 검사가 시작되면 lighthouse는 대상 웹사이트를 여러 번 로드하여 사이트의 구조, 태그 및 성능에 대한 측정 항목을 수집한다. 이를 통해 사용자 경험에 영향을 미치는 사이트의 특정 성능 약점을 알 수 있으며 이를 최적화하는데 필요한 통찰력을 얻을 수 있다!

그렇다면.. 높은 점수가 왜 중요할까?

Google은 Lighthouse의 성능 점수에 따라 타겟 웹사이트의 순위를 변경한다.
높은 접근성 점수를 통해 사용자의 접근성을 높일 수 있어 비지니스 측면에서도 우수해진다.
Lighthouse의 점수가 높다는 것은 곧 웹 사이트의 성능이 좋다는 말과 같다.

이번 과제에서 구현한 페이지의 Lighthouse 성능 측정을 해보았다.

Lighthouse에서 측정하는 성능 지표에 대해 살펴보자.

✨ Lighthouse 성능 지표

LCP (Largest Contentful Paint)

LCP는 Lighthouse의 성능 세션에서 추적되는 측정 항목 중 하나로, 웹 페이지의 주요 콘텐츠가 모두 렌더링 될 때까지 걸리는 시간을 의미한다.

이때 주요 콘텐츠로 판단하는 것으로는 <img>, <svg>, <video>, 텍스트 노드가 있다.

FCP (First Contentful Paint)

FCP는 콘텐츠가 포함된 첫 페인트로, 사용자가 페이지로 이동한 후 브라우저에서 첫 번째 DOM 콘텐츠를 렌더링 하는 데 걸리는 시간을 의미한다.

페이지의 이미지, 흰색이 아닌 <canvas> 요소, SVG는 DOM 콘텐츠로 간주되며, iframe 내부의 콘텐츠는 포함되지 않는다.

SI (Speed Index)

SI는 페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도를 측정한다. Lighthouse는 브라우저에서 페이지 로드 동영상을 캡쳐하고 프레임 간의 시각적 진행 상황을 계산한다.

TBT (Total Blocking Time)

TBT는 페이지가 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 응답하지 못하도록 차단된 총 시간을 의미한다.

합계는 콘텐츠가 포함된 첫 페인트와 상호작용 시간 사이에 모든 장기 작업의 차단 부분을 더해서 계산된다.

CLS (Cumulative Layout Shift)

CLS은 페이지 수명 동안 발생하는 모든 예상치 못한 레이아웃 변경에 관한 레이아웃 변경 점수의 가장 큰 버스트를 측정한 것이다.

가장 큰 버스트는 해당 기간 내의 모든 레이아웃 변경의 최대 누적 점수가 있는 세션 기간이다.

FID (First Input Delay)

FID는 사용자가 상호작용을 처음으로 시작하고 브라우저가 응답하여 실제로 이벤트 핸들러를 처리하기까지 걸리는 시간을 의미한다.

최초입력으로는 클릭, 입력이 평가된다.

CLS (Cumulative Layout Shift)

CLS는 페이지 전체 생명 주기 중 발생하는 모든 레이아웃 이동에 대한 종합 점수이다.

FP (First Paint)

FP는 최초 페이지 불러오기가 시작되고 첫 번째 픽셀이 viewport에 표시되는데 걸리는 시간을 의미한다. 즉, 페이지에 필요한 기본 리소스를 불러오는데 문제가 있는지 판단할 수 있는 항목이다.

✨ Lighthouse 성능을 올려보자

<Accessibility & SEO 높이기>

Step 1 - 이미지 alt 태그 추가

<Image src={sprout} alt="새싹 이미지" />

이미지 컴포넌트에 alt 속성 추가함으로써 접근성과 SEO 측면의 점수를 높일 수 있었다.

<Performance 높이기>

Step 2 - 비디오 자동 재생 loop 설정 변경

        <ReactPlayer
          url={video}
          playing={true}
          muted={true}
          controls={true}
          loop={false} // 변경
          style={{
            position: "absolute",
            top: "30%",
            left: "50%",
            transform: "translate(-50%, -50%)",
          }}
        />