티스토리툴바

Front End/Web

Lighthouse

⚡

Lighthouse

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

Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있다. 검사할 페이지의 url을 Lighthouse에 전달하면 해당 페이지에 대한 여러 검사를 실행하고, 검사 결과에 따른 리포트를 생성한다. 개발자는 해당 리포트를 통해 점수가 낮은 지표에 대한 개선을 고려할 수 있으며, 지표의 중요성과 개선 방법에 대한 레퍼런스도 참고 가능하다.

Lighthouse 결과 리포트

분석 결과 항목

  1. Performance (성능)

    웹 성능을 측정한다. 화면에 컨텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용 하기까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 확인한다.

  1. Accessibility (접근성)

    웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 확인한다.

  1. Best Practice (권장사항)

    웹 표준 모범 사례를 잘 따르고 있는지 확인한다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인한다.

  1. SEO (검색엔진 최적화)

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

  1. PWA (Progressive Web App)

    해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인한다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.

Performance 측정 항목(메트릭)

  1. First Contentful Paint (FCP)

    브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다. 즉, 사용자가 감지하는 페이지의 로딩 속도를 측정하며 우수한 사용자 경험을 제공하려면 1.8초 이하여야 한다.

  1. Largest Contentful Paint (LCP)

    뷰포트를 차지하는 가장 큰 컨텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정한다. 이를 이용해 주요 컨텐츠가 유저에게 보이는 시간을 가늠할 수 있다.

  1. Speed Index

    페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는지 측정한다. 브라우저의 페이지 로딩과정을 각 프레임마다 캡쳐하고, 프레임 간 화면에 보이는 요소들을 계산한다. 그 후 Speedline Node.js module을 이용하여 Speed Index 점수를 그래프의 형태로 나타낸다.

  1. Time to Interactive (TTI)

    페이지가 로드되는 시점부터 사용자와의 완전한 상호작용이 가능한 시점까지의 시간을 측정한다. 그 기준은 아래와 같으며, 점수는 아카이브된 HTTP 데이터를 기반으로 백분위 단위로 점수를 측정한다.

    • 페이지에 FCP로 측정된 컨텐츠가 표시되어야 한다.
    • 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록된다.
    • 페이지가 0.05초안에 사용자의 상호작용에 응답한다.
  1. Total Blocking Time (TBT)

    TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다. FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록해 TBT를 측정한다.

  1. Cumulative Layout Shift

    컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표이다. 이 지표를 통해 화면에서 이리저리 움직이는 불안정한 요소가 있는지를 측정할 수 있다. 해당 항목은 사용자가 의도치 않은 상호작용으로 인해 실수 또는 실질적인 피해가 발생할 수도 있는지 판단하는 지표이기도 하다.

개선 추천 항목 (Opportunities)

Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시한다. 각 항목을 열면 해당 문제에 대한 상세 설명과 함께 어떤 코드나 화면에서 문제 상황을 발견했는지 확인할 수 있어 최적화의 방향을 잡기 좋다.

예시를 통한 개선 방법 탐색

  • 웹 이미지 포맷 변경 (JPGE, PNG, GIF)

    웹 이미지 포맷을 WebP, AVIF, MP4로 변경하여 리소스 소모를 절감시킬 수 있다.

  • 자바스크립트 줄이기 (트리 쉐이킹)

    필요한 모듈만 불러오는 것은 물론, 코드의 양 자체를 줄여서(반복 작업은 반복문으로 처리하는 등) 최적화할 수 있다.

  • 효율적으로 이미지 인코딩하기 (이미지 최적화)

    품질을 유지하면서 더 빠른 방식으로 인코딩하는 방법이 있다. 인코딩 방식에 따라서 용량이 달라지기 때문에, 위의 툴을 사용하거나 이미지포맷을 변경하는 것을 고려할 수도 있다.

  • 사용하지 않는 CSS 줄이기

    사용하지 않는 CSS 코드를 줄이고, 첫 화면에서 사용하지 않는 CSS는 나중에 불러오는 방법을 사용할 수도 있다.

  • 네트워크 페이로드 줄이기

    너무 큰 용량의 파일은 한번에 요청을 보내기에 부적절하다. 한 번의 요청의 페이로드는 최대 1,600Kb 이상을 넘지 않도록 하는 것이 좋다. 부득이하게 파일의 크기가 크다면 파일을 분할하는 것도 일종의 방법이 될 것이다.

  • 캐시 정책을 사용해 정적 에셋 제공하기

    고정적으로 사용하는 리소스는 캐시 정책을 설정하여 불필요한 네트워크 리소스 소모가 발생하지 않도록 할 수 있다.


Uploaded by N2T

티스토리툴바