🗣️ Lighthouse를 이용하여 Web Vital 진단 및 최적화를 진행할 수 있나요?
-
의도: 지원자가 Lighthouse를 사용하여 Web Vital을 진단하고 최적화할 수 있는지 평가
-
팁
- Lighthouse의 개념과 역할을 설명한다.
- Web Vital의 주요 지표(LCP, FID, CLS)를 설명한다.
- Lighthouse를 사용하여 성능을 진단하고 최적화하는 방법을 설명한다.
-
나의 답안
-
제공된 답안 (모범 답안)
Lighthouse는 웹페이지의 성능, 접근성, SEO 등을 분석하는 오픈 소스 도구입니다.
Web Vital은 웹페이지의 사용자 경험을 측정하는 주요 지표로, LCP(최대 콘텐츠 렌더링 시간), FID(최초 입력 지연), CLS(누적 레이아웃 이동)을 포함합니다.
Lighthouse를 사용하여 페이지 성능을 진단하고, 제안된 개선 사항을 적용하여 Web Vital을 최적화할 수 있습니다.
📝 개념 정리
🌟 Lighthouse란?
-
Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO(검색 엔진 최적화) 등 여러 측면에서 진단하고 개선할 수 있도록 도와주는 오픈 소스 자동화 툴
-
Google에서 제공하며, 크롬 브라우저의 개발자 도구(DevTools)와 통합되어 쉽게 사용할 수 있다.
-
주요 웹 성능 지표를 평가하고, 웹사이트의 최적화 개선 사항을 제안해준다.
🌟 Lighthouse의 주요 진단 영역
-
성능 (Performance)
웹 페이지의 로딩 속도와 성능을 측정하고 개선 방법을 제시한다. 사용자 경험을 최적화하기 위해 중요한 지표들을 포함한다. -
접근성 (Accessibility)
페이지가 다양한 사용자, 특히 장애인들에게 접근 가능한지 여부를 평가한다. 대체 텍스트 사용 여부나 색 대비 등 다양한 접근성 요소를 확인한다. -
베스트 프랙티스 (Best Practice)
웹 보안이나 최신 웹 기술 사용 여부를 진단한다. HTTPS 사용 여부나, 안전한 리소스 로드 등을 포함한다. -
SEO (Search Engine Optimization)
웹 페이지가 검색 엔진에 얼마나 잘 최적화되어 있는지를 평가한다. HTML 구조, 메타 태그, 콘텐츠 가독성 등을 진단한다. -
PWA (Progressive Web App)
PWA로서의 기준을 얼마나 충족하는지 평가한다. 오프라인 지원 여부, 웹 앱 매니페스트 파일 적용 여부 등을 확인한다.
🌟 Web Vital이란?
Web Vitals는 Google이 사용자 경험을 측정하고 평가하기 위해 정의한 핵심 성능 지표이다.
사용자에게 중요한 웹사이트 성능 요소를 중심으로 성능을 개선하도록 돕는다. Core Web Vitals는 특히 중요한 세 가지 주요 지표로 구성된다.
-
Largest Contentful Paint(LCP)
-
페이지에서 가장 큰 콘텐츠 요소가 렌더링되는 시간을 측정한다. 페이지 로딩 성능의 중요한 지표이다.
-
최적 기준: 2.5초 이하
-
-
First Input Delay(FID)
-
사용자가 처음으로 페이지와 상호작용(예: 버튼 클릭)했을 때의 반응 시간을 측정한다. 인터랙티브 성능의 중요한 지표이다.
-
최적 기준: 100ms 이하
-
-
Cumulative Layout Shift(CLS)
-
페이지 로딩 중 예기치 않게 레이아웃이 변경되는 정도를 측정한다. 시각적 안정성의 중요한 지표이다.
-
최적 기준: 0.1 이하
-
🌟 Lighthouse를 이용한 Web Vital 진단 및 최적화 방법
Lighthouse는 Core Web Vitals를 포함한 다양한 성능 지표를 기반으로 웹사이트의 성능을 평가하고 최적화 방향을 제시한다. Web Vitals 최적화를 위해 Lighthouse를 사용하는 방법은 다음과 같다.
-
Lighthouse 실행 방법
-
크롬 개발자 도구에서 실행
(1) 크롬에서 웹 페이지를 연 뒤,
F12키를 눌러 개발자 도구를 연다.
(2) 개발자 도구에서Lighthouse탭을 선택한다.
(3) 진단하고자 하는 항목(성능, 접근성, SEO 등)을 선택하고, Generate Report 버튼을 클릭하여 분석을 시작한다. -
Chrome Extension
(1)
Chrome Web Store에서 Lighthouse 확장 프로그램을 설치한다.
(2) 확장 프로그램을 클릭하고 웹 페이지 분석을 시작할 수 있다. -
CI/CD 통합
CI 파이프라인에서 Lighthouse를 실행해 성능을 자동으로 모니터링할 수 있다.
예를 들어, GitHub Actions와 같은 CI 도구에서 Lighthouse를 통해 정기적인 성능 보고서를 생성하도록 설정할 수 있다.
-
-
Web Vitals 분석
Lighthouse 보고서에서 성능 섹션을 보면 Web Vitals에 해당하는 항목들을 확인할 수 있다.
-
LCP(Largest Contentful Paint) : 페이지에서 가장 큰 콘텐츠가 로드되는 데 걸린 시간을 보여준다.
-
FID(First Input Delay) : 첫 상호작용의 지연 시간을 표시한다.
-
CLS(Cumulative Layout Shift) : 레이아웃 변경의 불안정성을 수치로 보여준다.
-
-
Web Vitals 최적화 방법
-
LCP 최적화
- 이미지 최적화
큰 이미지의 로딩 시간을 줄이기 위해 이미지 포맷을 압축하거나 더 빠른 로드 방식(예: lazy loading)을 적용한다. - CSS와 JavaScript 최적화
불필요한 CSS나 JavaScript 로드를 줄이거나, 중요한 CSS는 inline으로 작성하여 페이지 로딩 속도를 개선한다. - 서버 응답 시간 줄이기
서버의 TTFB(Time To First Byte)를 줄이기 위해 CDN 사용이나 서버 최적화, 캐싱 정책을 적용할 수 있다.
- 이미지 최적화
-
FID 최적화
- JavaScript 최적화
너무 많은 JavaScript가 초기 로드에 포함되면 사용자 인터렉션에 지연이 발생할 수 있다. 비동기 로드나defer속성을 통해 JavaScript 실행을 늦추거나 줄인다. - 메인 스레드 차단 시간 줄이기
메인 스레드를 차단하는 작업을 줄여 사용자 상호작용이 빠르게 처리되도록 해야 한다. 이를 위해 불필요한 태스크를 제거하거나 Web Workers를 사용해 메인 스레드의 부담을 줄일 수 있다.
- JavaScript 최적화
-
CLS 최적화
- 미디어 요소에 크기 속성 추가
이미지, 비디오 등 미디어 파일에는width와height속성을 미리 지정해 예기치 않은 레이아웃 변경을 방지할 수 있다. - 동적 콘텐츠 로딩에 주의
광고, 동적 콘텐츠가 로드될 때 레이아웃을 밀어내지 않도록 자리를 미리 확보해두는 것이 좋다.
- 미디어 요소에 크기 속성 추가
-
-
Lighthouse 최적화 결과 확인
-
최적화 작업을 완료한 후, 다시 Lighthouse로 웹사이트를 진단하여 개선된 성능 지표를 확인한다.
-
최종 성능 점수가 올라갔는지, Web Vitals 기준에 맞는지 확인하면서 추가적으로 개선할 수 있는 사항을 점검한다.
-
🌟 Lighthouse를 통한 최적화 프로세스
-
첫 진단: Lighthouse로 웹사이트를 처음 분석하여 현재 성능을 평가한다.
-
개선 사항 적용: Lighthouse에서 제안하는 최적화 방안들을 적용한다.
-
재진단: 다시 Lighthouse를 실행해 성능 지표의 변화를 확인하고 필요시 추가 조치를 취한다.
