[34] 라이트하우스에 대해서 설명해주세요.

hyeyoonS commented 4 months ago

📎 질문

라이트하우스에 대해서 설명해주세요.

✏ 구술 답변 키워드

Lighthouse란? 구글에서 제공하는 웹 앱의 성능, 품질 및 정확성을 향상시키기 위한 오픈 소스 자동화 도구
Lighthouse 사용 방법 : Chrome DevTools, 모듈, 웹
Lighthouse가 제공하는 검사 항목 : 성능, 접근성, Best Practice, SEO, PWA
Lighthouse 성능 메트릭 : FCP, LCP, TBT, CLS, SI, TTI, FID

✏ 서술 답변

Lighthouse란

웹 앱의 성능, 품질 및 정확성을 향상시키기 위한 구글의 오픈 소스 자동화 도구
성능, 접근성, PWA, SEO를 테스트하여 성능 보고서를 생성한다.
앱 개선을 위해 무엇을 할 수 있는지에 대한 지표로 사용할 수 있다.

Lighthouse 워크플로우

Chrome DevTools에 내장된 Lighthouse 사용
lighthouse 모듈을 터미널에서 명령어 스크립트를 통해 사용

lighthouse 모듈을 프로그래매틱하게 코드로 구현하여 사용

샘플 코드


import fs from 'fs';
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']}); const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port}; const runnerResult = await lighthouse('https://example.com', options);

// .report is the HTML report as a string const reportHtml = runnerResult.report; fs.writeFileSync('lhreport.html', reportHtml);

// .lhr is the Lighthouse Result as a JS object console.log('Report is done for', runnerResult.lhr.finalDisplayedUrl); console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

chrome.kill();


- `Lighthouse CI`를 연동하여 구현도 가능
4. [웹](https://pagespeed.web.dev/?hl=ko) 에서 사용

### Lighthouse 검사 항목
#### 성능
- 웹 페이지의 로딩 속도를 측정하고, 이를 개선하기 위한 권장 사항을 제공
- 여러 가지 성능 관련 지표(FCP, LCP, TTI 등)를 종합하여 성능 점수를 산출
- **점수가 유동적인 원인**
  1. A/B 테스트 또는 게재되는 광고의 변경사항
  2. 인터넷 트래픽 라우팅 변경사항
  3. 고성능 데스크톱 및 저성능 노트북과 같은 다양한 기기에서 테스트
  4. 자바스크립트를 삽입하고 네트워크 요청을 추가/수정하는 브라우저 확장 프로그램
  5. 바이러스 백신 소프트웨어

#### 접근성
- 모든 사용자가 콘텐츠에 액세스하고 사이트를 효과적으로 탐색하는지 웹 페이지의 접근성 수준을 평가
- 접근성을 높이기 위한 권장 사항 제공
- ex) ARIA 태그와 시멘틱 HTML 요소의 사용 검토
- 성능 감사와 달리 각 접근성 감사는 통과 또는 실패 (부분적으로 통과한 경우 0점으로 평가)

#### Best Practice
- 보안 문제, HTTPS 사용, 오류 처리 등을 검토하여 웹 표준 준수 여부
- 웹 개발의 모범 사례 준수 여부 
- 편리한 사용자 환경 조성
- 지원 중단된 기술 사용 여부

#### SEO
- 검색 엔진 최적화 상태 평가
- 검색 엔진에서 잘 노출되기 위한 권장 사항 제공
- ex) 제목, 설명, 키워드 등의 메타 태그 사용 여부를 검토

#### PWA
- PWA로서의 기능을 제대로 구현하고 있는지 평가
- ex) 오프라인 지원, 빠른 로딩, 설치 가능 여부, 서비스 워커 등 검토

### Chrome Dev Tool에서 Lighthouse 검사 시 옵션
#### 항목
- 성능, 접근성, Best Practice, SEO, PWA 중에 원하는 항목만 선택 가능
#### 모드
- 탐색(Navigation) : 디폴트 옵션. 초기 페이지 로딩 시 발생하는 성능 문제를 분석
- 기간(Timespan) : 사용자가 지정한 시간 동안에 발생한 성능 문제를 분석
- 스냅샷(Snapshot) : 현재 상태의 성능 문제를 분석
#### 디바이스
- Mobile, PC

### Lighthouse로 측정할 수 있는 성능 메트릭들 
- FCP : First Contentful Paint
사용자가 웹페이지로 이동했을때 브라우저가 DOM의 첫번째 컨텐츠를 렌더링하는데 걸리는 시간
- LCP : Largest Contentful Paint
뷰포트에서 가장 큰 콘텐츠요소가 화면에 렌더링 될 때까지 걸리는 시간
- TBT : Total Blocking Time
웹페이지가 사용자 입력에 응답하지 못하도록 차단된 시간
(로딩중 같이 메인스레드가 긴시간 중단되어 응답을 받을수 없던 시간)
- CLS : Cumulative Layout Shift
이미지/광고의 느린 로딩, 동적 DOM 변경으로 웹페이지의 레이아웃이 얼마나 변하는지 측정
- SI : Speed Index
웹페이지를 불러올때 컨텐츠가 시각적으로 표시되는데 걸리는 시간
- TTI : Time To Interactive
웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간
- FID : Max Potential First Input Delay
사용자가 웹 사이트와 처음 상호작용(버튼 클릭)할 때부터 브라우저가 실제로 해당 상호작용에 응답할 수 있을 때까지 걸리는 가장 긴 시간 (즉, 최악의 경우를 측정)

Eugene-A-01 commented 4 months ago

라이트하우스란? 웹페이지 품질 개선을 위해 다양한 메트릭으로 성능, 접근성, SEO, PWA, 권장사항 등을 측정하는 자동화 도구

라이트하우스로 측정할 수 있는 성능 메트릭들

FCP : First Contentful Paint 사용자가 웹페이지로 이동했을때 브라우저가 DOM의 첫번째 컨텐츠를 렌더링하는데 걸리는 시간
LCP : Largest Contentful Paint 뷰포트에서 가장 큰 콘텐츠요소가 화면에 렌더링 될 때까지 걸리는 시간
TBT : Total Blocking Time 웹페이지가 사용자 입력에 응답하지 못하도록 차단된 시간 (로딩중 같이 메인스레드가 긴시간 중단되어 응답을 받을수 없던 시간)
CLS : Cumulative Layout Shift 이미지/광고의 느린 로딩, 동적 DOM 변경으로 웹페이지의 레이아웃이 얼마나 변하는지 측정
SI : Speed Index 웹페이지를 불러올때 컨텐츠가 시각적으로 표시되는데 걸리는 시간

Jyophie commented 4 months ago

라이트하우스(Lighthouse)란?

라이트하우스(Lighthouse)는 웹 애플리케이션의 성능, 접근성, 최적화 상태 등을 분석하고 개선할 수 있는 오픈 소스 도구입니다. Google에서 개발한 이 도구는 웹 페이지의 품질을 평가하고, 다양한 지표를 통해 웹 페이지의 상태를 종합적으로 파악할 수 있도록 도와줍니다.

주요 기능

성능 분석
- 웹 페이지의 로딩 속도를 측정하고, 이를 개선하기 위한 권장 사항을 제공합니다.
- 여러 가지 성능 관련 지표(FCP, LCP, TTI 등)를 종합하여 성능 점수를 산출합니다.
접근성 분석
- 웹 페이지의 접근성 수준을 평가하고, 접근성을 높이기 위한 권장 사항을 제공합니다.
- ARIA 태그와 시멘틱 HTML 요소의 사용을 검토합니다.
베스트 프랙티스(Best Practices)
- 보안 문제, HTTPS 사용, 오류 처리 등을 검토하여 웹 표준 준수 여부를 평가합니다.
- 웹 개발의 모범 사례 준수 여부를 평가합니다.
SEO(Search Engine Optimization)
- 검색 엔진 최적화 상태를 평가하고, 검색 엔진에서 잘 노출되기 위한 권장 사항을 제공합니다.
- 제목, 설명, 키워드 등의 메타 태그 사용 여부를 검토합니다.
PWA(Progressive Web App)
- PWA로서의 기능을 제대로 구현하고 있는지 평가합니다.
- 오프라인 지원, 빠른 로딩, 설치 가능 여부 등을 검토합니다.

QueenCards / ProjectAnalysis