본문 바로가기
카테고리 없음

최적화를 알려주는 Lighthouse개념,설치방법,측정항목의 의미,활용방법

by 작은거인123 2024. 7. 17.
반응형

lighthouse란?

Lighthouse는 구글 확장프로그램으로 웹 페이지의 성능, 접근성, 최적화등을 자동으로 평가하고 개선점을 제시해 주는 오픈소스 도구입니다.

 

설치방법& 성능측정

1.구글에서 lighthouse검색/크롬에 추가

 

2. 내블로그로 들어가 Generate report 누르기 - 아랍어를 한국어로 변경하면 됩니다

 

3. 결과보고서가 새로운 탭에서 열린다

 

 

성능측정항목과 그 의미

 

1. 성능 평가: 웹 페이지의 로딩 속도, 렌더링 시간, 자원 최적화 등을 종합적으로 평가합니다.

2. 접근성 검사: WCAG 2.0 기준에 따라 웹 페이지의 접근성을 검사합니다.

3. 검색엔진최적화: 검색엔진 최적화를 위한 요소들을 분석합니다.

4. 보고서 생성: 검사 결과를 상세한 보고서로 제공하여 개선 방향을 제시합니다.

 

측정항목

1.First Contentful Paint : 페이지의 첫 번째 콘텐츠가 화면에 표시되는 시간입니다.

2.Largest Contentful Paint: 페이지의 주요 콘텐츠가 로드되는 시간입니다

3.Total Blocking Time: 페이지가 사용자 입력에 반응하지 않는 시간의 총합입니다

4.Cumulative Layout Shift: 페이지 로드 중 레이아웃이 얼마나 이동하는지를 나타냅니다

5.Speed Index: 페이지 콘텐츠가 시각적으로 얼마나 빨리 로드되는지를 나타냅니다

 

진단

 

부족한 점수에 대한 진단을 해주고  해결방법까지 제시해줍니다.

 

지속적인 성장을 위한 lighthouse 활용법

1. 주기적인 성능 검사 : 정기적으로 사용하여 성능을 모니터링하고, 필요한 경우 개선 작업을 실시

2. 최신 lighthouse 버전 사용 : 지속적으로 업데이트되므로, 항상 최신 버전을 사용하여 최신 기준에 맞게 최적화합니다

 

lighthouse는 우리의 블로그운영에 대한 질과 성능을 향상하기 위한 강력한 도구입니다.

다양한 측면을 분석하고, 개선점을 찾아 실행함으로써 사용자 경험을 크게 향상할 수 있습니다.

정기적으로 사용하여 블로그를 모니터링하고, 지속적으로 최적화 작업을 진행함으로써 수익도 챙겨갑시다!!

 

 

 

 

 

반응형