반응형
현재의 빠르게 변화하는 환경에서 사용자에게 최적의 웹 경험을 제공하는 것이 매우 중요합니다. 구글의 Lighthouse는 웹 페이지 품질을 간편하게 향상할 수 있는 강력한 오픈 소스 도구로 등장하였습니다. 이번 포스팅에서는 Lighthouse의 기능과 중요성을 자세히 살펴보며, 웹 개발과 사용자 경험 최적화에 대한 내용을 알려드립니다.
Lighthouse 이해하기
Lighthouse는 구글에서 개발한 주요 오픈 소스 자동화 도구로, 다양한 매개변수를 통해 웹 페이지 품질을 평가하고 향상시키는 데 사용됩니다.
METRICS 소개
Lighthouse는 웹 성능을 평가하기 위해 다음과 같은 지표(METRICS)들을 활용합니다.
- First Contentful Paint (FCP)
- 사용자가 웹 페이지로 이동했을 때 브라우저가 초기 DOM 콘텐츠를 렌더링하는 데 걸리는 시간을 나타냅니다.
- Speed Index
- 웹 페이지가 로드되는 동안 콘텐츠가 시각적으로 표시되는 데 걸리는 시간을 정량화합니다.
- 사용자의 초기 상호작용(예: 버튼 클릭)과 브라우저의 응답 사이에 걸리는 가장 긴 시간을 측정하여 잠재적인 지연을 확인합니다.
- Total Blocking Time (TBT)
- 웹 페이지의 메인 스레드가 로딩 중에 사용자 입력에 반응하지 못한 누적 시간을 나타냅니다.
- Largest Contentful Paint (LCP)
- 뷰포트 내에서 가장 큰 콘텐츠 요소가 렌더링되는 데 걸리는 시간을 나타냅니다.
- Cumulative Layout Shift (CLS)
- 뷰포트 내에서 가장 큰 콘텐츠 요소가 렌더링되는 데 걸리는 시간을 나타 냅니다 이미지 또는 광고의 느린 로딩, 비동기적 행동, 동적 DOM 변경 등으로 인해 레이아웃이 얼마나 불안정해지는지를 측정하여 사용자의 시각적 불안정성을 확인합니다.
Lighthouse 사용법
- Chrome 개발자 도구 내에서 Lighthouse 실행하기
- Chrome 브라우저를 열고, 원하는 웹 페이지를 방문합니다.
- 웹 페이지에서 마우스 오른쪽 클릭 후 "검사"를 선택합니다.
- 개발자 도구가 나타나면, 상단 메뉴에서 "Lighthouse" 탭을 찾거나, 단추형 아이콘을 클릭하여 Lighthouse를 실행합니다.
- 실행을 위해 필요한 옵션을 선택하고 "실행" 버튼을 클릭합니다.
- 명령줄을 이용하여 Lighthouse 실행하기
- Node.js가 설치된 상태에서 터미널 또는 명령 프롬프트를 엽니다.
- 다음 명령어를 입력하여 Lighthouse를 설치합니다:
npm install -g lighthouse- Lighthouse를 실행할 웹 페이지의 URL을 지정하여 다음 명령어를 입력합니다:
lighthouse https://example.com/
분석된 결과 해석하기
- Lighthouse는 다양한 성능 지표와 함께 개선을 위한 권고 사항을 제공합니다.
- 결과 보고서에서 가장 중요한 지표를 파악하고, 성능 향상을 위한 구체적인 조치를 적용해 봅니다.
- 개선 사항에 따라 웹 페이지를 최적화하고, Lighthouse를 주기적으로 실행하여 성능 변화를 추적합니다.
Lighthouse 결과 항목 분석
- Performance
- Lighthouse는 실제 로딩 속도보다는 사용자 경험에 더 중점을 두며, 얼마나 빠르게 콘텐츠가 화면에 표시되고 인식되는지를 평가합니다.
- Accessibility
- 웹 애플리케이션의 접근성을 점검합니다.
alt속성이 포함된<img>태그,<html>태그에 지정된lang속성, 적절한 배경색과 전경색 대비 등을 확인하여 모든 사용자가 웹 페이지에 쉽게 접근할 수 있는지 평가합니다.
- 웹 애플리케이션의 접근성을 점검합니다.
- Best Practices
- 웹 페이지가 웹 표준과 모범 사례를 준수하는지 검증합니다. 웹 애플리케이션이 작동하는 동안 콘솔에 오류가 발생하는지 여부, 사용되지 않는 API 호출, HTTPS를 통한 페이지 접근 가능 여부 등을 확인하여 웹 페이지의 품질을 평가합니다.
- SEO
- 검색 엔진 최적화를 위해 웹 페이지가 적절한 구조와 내용을 갖췄는지 확인합니다. 사용자가 편안하게 읽을 수 있는 글꼴 크기, 올바른 robots.txt 파일 사용, 올바른 상태 코드 반환 등의 SEO 모범 사례를 살펴 웹 페이지의 검색 엔진 노출을 평가합니다.
- 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
반응형
'it' 카테고리의 다른 글
| 아이폰 16 Pro 테트라 프리즘 망원 렌즈와 출시 예상? (60) | 2023.12.07 |
|---|---|
| 갤럭시 S24 시리즈: 새로운 디자인과 변화와 출시일은? (64) | 2023.12.06 |
| 아이폰 15 카메라 설정으로 사진과 영상 퀄리티 높이기: 전문가 팁 (64) | 2023.12.05 |
| 아이폰 개발자 설정: 더 깊은 기능 활용하는 법 (63) | 2023.12.05 |
| Homebrew 명령어 사용법: 패키지 관리의 핵심 (62) | 2023.12.04 |
