본문 바로가기
it

Google Lighthouse 이용 사용자에게 최적의 웹 페이지 경험을 제공하는 법

by Soniasoso 2023. 12. 6.
Contents 펼치기
반응형

현재의 빠르게 변화하는 환경에서 사용자에게 최적의 웹 경험을 제공하는 것이 매우 중요합니다. 구글의 Lighthouse는 웹 페이지 품질을 간편하게 향상할 수 있는 강력한 오픈 소스 도구로 등장하였습니다. 이번 포스팅에서는 Lighthouse의 기능과 중요성을 자세히 살펴보며, 웹 개발과 사용자 경험 최적화에 대한 내용을 알려드립니다.

Lighthouse 이해하기

Lighthouse는 구글에서 개발한 주요 오픈 소스 자동화 도구로, 다양한 매개변수를 통해 웹 페이지 품질을 평가하고 향상시키는 데 사용됩니다.

METRICS 소개

Lighthouse는 웹 성능을 평가하기 위해 다음과 같은 지표(METRICS)들을 활용합니다.

  1. First Contentful Paint (FCP)
    • 사용자가 웹 페이지로 이동했을 때 브라우저가 초기 DOM 콘텐츠를 렌더링하는 데 걸리는 시간을 나타냅니다.
  2. Speed Index
    • 웹 페이지가 로드되는 동안 콘텐츠가 시각적으로 표시되는 데 걸리는 시간을 정량화합니다.
    • 사용자의 초기 상호작용(예: 버튼 클릭)과 브라우저의 응답 사이에 걸리는 가장 긴 시간을 측정하여 잠재적인 지연을 확인합니다.
  3. Total Blocking Time (TBT)
    • 웹 페이지의 메인 스레드가 로딩 중에 사용자 입력에 반응하지 못한 누적 시간을 나타냅니다.
  4. Largest Contentful Paint (LCP)
    • 뷰포트 내에서 가장 큰 콘텐츠 요소가 렌더링되는 데 걸리는 시간을 나타냅니다.
  5. Cumulative Layout Shift (CLS)
    • 뷰포트 내에서 가장 큰 콘텐츠 요소가 렌더링되는 데 걸리는 시간을 나타 냅니다 이미지 또는 광고의 느린 로딩, 비동기적 행동, 동적 DOM 변경 등으로 인해 레이아웃이 얼마나 불안정해지는지를 측정하여 사용자의 시각적 불안정성을 확인합니다.

Lighthouse 사용법

  1. Chrome 개발자 도구 내에서 Lighthouse 실행하기
    • Chrome 브라우저를 열고, 원하는 웹 페이지를 방문합니다.
    • 웹 페이지에서 마우스 오른쪽 클릭 후 "검사"를 선택합니다.
    • 개발자 도구가 나타나면, 상단 메뉴에서 "Lighthouse" 탭을 찾거나, 단추형 아이콘을 클릭하여 Lighthouse를 실행합니다.
    • 실행을 위해 필요한 옵션을 선택하고 "실행" 버튼을 클릭합니다.
  2. 명령줄을 이용하여 Lighthouse 실행하기
    • Node.js가 설치된 상태에서 터미널 또는 명령 프롬프트를 엽니다.
    • 다음 명령어를 입력하여 Lighthouse를 설치합니다:
    • npm install -g lighthouse
    • Lighthouse를 실행할 웹 페이지의 URL을 지정하여 다음 명령어를 입력합니다:
    • lighthouse https://example.com/

분석된 결과 해석하기

  • Lighthouse는 다양한 성능 지표와 함께 개선을 위한 권고 사항을 제공합니다.
  • 결과 보고서에서 가장 중요한 지표를 파악하고, 성능 향상을 위한 구체적인 조치를 적용해 봅니다.
  • 개선 사항에 따라 웹 페이지를 최적화하고, Lighthouse를 주기적으로 실행하여 성능 변화를 추적합니다.

Lighthouse 결과 항목 분석

  1. Performance
    • Lighthouse는 실제 로딩 속도보다는 사용자 경험에 더 중점을 두며, 얼마나 빠르게 콘텐츠가 화면에 표시되고 인식되는지를 평가합니다.
  2. Accessibility
    • 웹 애플리케이션의 접근성을 점검합니다. alt 속성이 포함된 <img> 태그, <html> 태그에 지정된 lang 속성, 적절한 배경색과 전경색 대비 등을 확인하여 모든 사용자가 웹 페이지에 쉽게 접근할 수 있는지 평가합니다.
  3. Best Practices
    • 웹 페이지가 웹 표준과 모범 사례를 준수하는지 검증합니다. 웹 애플리케이션이 작동하는 동안 콘솔에 오류가 발생하는지 여부, 사용되지 않는 API 호출, HTTPS를 통한 페이지 접근 가능 여부 등을 확인하여 웹 페이지의 품질을 평가합니다.
  4. SEO
    • 검색 엔진 최적화를 위해 웹 페이지가 적절한 구조와 내용을 갖췄는지 확인합니다. 사용자가 편안하게 읽을 수 있는 글꼴 크기, 올바른 robots.txt 파일 사용, 올바른 상태 코드 반환 등의 SEO 모범 사례를 살펴 웹 페이지의 검색 엔진 노출을 평가합니다.
  5. Progressive Web App
    • Lighthouse는 Progressive Web App의 요구사항을 기준으로 웹 페이지를 검사합니다. HTTP에서 HTTPS로의 리디렉션 여부, 응답 코드의 명확성, 3G 네트워크에서의 로딩 속도 등을 검사하여 PWA의 기준을 충족하는지를 평가합니다.

이 결과 항목들을 통해 개발자 및 마케터들은 웹 페이지의 품질을 ganz로 평가하고, 각 영역별로 개선할 사항을 식별하여 사용자 경험과 검색 엔진 최적화를 향상하는데 도움을 얻을 수 있습니다.

 

Lighthouse 사용 시 주의 사항

  • Lighthouse의 결과는 네트워크 상태, 기기 성능 등에 영향을 받을 수 있습니다.
  • 결과가 일관성 있게 유지되도록 여러 번 실행하여 평균을 내는 것이 좋습니다.
  • Lighthouse의 결과는 향후 개선을 위한 기준으로 활용되어야 합니다.

 

웹 관련 업무를 진행하시는 분들이라면 한번 측정해 보시고 웹페이지 최적화를 진행해보시는 것을 추천드립니다.

 

Test-Driven Development (TDD): 코드 개발의 새로운 방향

 

Test-Driven Development (TDD): 코드 개발의 새로운 방향

소프트웨어 개발에서 주요한 개발 방법인 TDD(Test-Driven Development)는 코드를 작성하기 전에 테스트 케이스를 먼저 작성하는 철저한 방법론입니다. 이는 신뢰성 있는 소프트웨어를 개발하는 데 큰

kksoso.tistory.com

 

728x90
반응형