내 웹사이트의 성능을 개선해보자! Lighthouse란?

트위터 프로젝트를 시작한지 약 2년이 지나가고.... 이제는 어느정도 원하는 기능은 구글링을 통해 다 구현할 수 있는데 이에 넘어서 내 프로젝트를 좀더 발전시키고 싶었다. 기능 구현에 치중되어있던 지난 개발 공부에 넘어서서 이제는 코드를 좀 더 깔끔하게 고치고 효율적인 코드 사용과 내 웹사이트의 성능을 개선하고 싶었다. 그래서 처음으로 공부하게 된 것이 lighthouse이다. 

라이트하우스(Lighthouse)란?

 

구글에서 개발한 웹페이지의 품질을 개선할 수 있는 오픈 소스 형태의 도구이다. 라이트하우스는 웹 페이지의 여러 측면을 평가하고 테스트하여 개선할 수 있는 지표를 제공한다. 

 

모드

사용할 수 있는 모드는 총 3가지가 존재한다. 

 

- 탐색 : 기본값으로 초기 페이지 로딩시 발생하는 성능 문제를 분석한다.

- 시간 : 사용자가 정의한 시간동안 발생한 성능 문제를 분석한다.

- 스냅샷 : 현재 상태의 성능 문제를 분석한다. 

 

카테고리

분석하고 싶은 부분을 선택할 수 있다. 카테고리는 5가지가 존재한다. 

 

- 성능 : 웹 페이지의 로딩시간, 렌더링 시간 등과 관련된 성능 지표를 평가한다. 페이지가 얼마나 빠르게 로드되고 사용자의 상호작용에 얼마나 빠르게 반응하는지 측정해준다. 즉 웹페이지의 로딩 과정에서 발생하는 성능 문제를 분석한다. 

 

- 접근성: 서비스의 사용자 접근성 문제를 분석한다. 

 

- 권장사항: 웹 사이트 보안측면과 웹개발의 최신 표준에 중점을 두고 분석한다. 

 

- 검색엔진 최적화(SEO): 검색엔진에서 얼마나 크롤링되고 검색 결과에 표시되는지 분석한다. 

 

- 프로그레시브 웹앱(Progressive Web App): 사용자가 오프라인 상태에서도 애플리케이션을 사용할 수 있는지 홈화면에 바로 가기를 추가할 수 있는지 등을 PWA와 관련된 문제를 분석한다. 

 

Lighthouse는 Google Chrome 브라우저 개발자 도구에 내장되어 있다. 

 

Lighthouse 분석 화면

 

성능은 아래의 지표와 비중으로 계산된다. 

First Contentful Paint(FCP) - 10% 가중치
Speed Index(SI) - 10% 가중치
Largest Contentful Paint(LCP) - 25% 가중치
Time To Interactive(TTI) - 10% 가중치
Total Blocking Time(TBT) - 30% 가중치

 

First Contentful Paint(FCP) 

 

FCP는 사용자가 웹 페이지로 이동하여 로드 되었을때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간이다.

 

 

Speed Index(SI) 

 

SI는 웹 페이지를 로드되는 동안 페이지의 시각적인 변화가 얼마나 빨리 발생하는지를 나타내는 지표이다. 

출처: https://velog.io/@dell_mond/Lighthouse-%EC%82%AC%EC%9A%A9%EB%B2%95

위 그림과 같이 A,B페이지를 각각 로드 했을때, 두 페이지 모드 로드되는데 동일한 시간이 걸렸더라도 A페이지가 더 빨리 로드된것으로 보아 높은 점수를 받는다.

 

Largest Contentful Paint(LCP) 

 

LCP는 페이지가 로드될때 화면에서 가장 큰 콘텐츠 요소(이미지 or 텍스트)가 렌더링 될 때까지 걸리는 시간이다.

사용자가 페이지의 주요 콘텐츠를 볼 수 있는 시점을 나타내는데 높은 LCP 시간은 페이지가 느리게 로드되고 있다는 것을 의미하여 ㅏ용자 경험에 부정적인 영향을 미칠 수 있다. 

 

Time To Interactive(TTI)

 

TTI는 웹 페이지가 사용자와 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간이다.

즉 페이지가 완전히 로드되고 '활성화'되어 있는 상태에서 사용자가 버튼을 클릭하거나 양식을 작성할 수 있는 상태를 의미한다. 

TTI 시점 전까지는 화면이 보여도 클릭 같은 입력이 동작하지 않는다.

 

Total Blocking Time(TBT)

 

TBT는 웹 페이지가 클릭 or 키보드 입력 같은 사용자 입력에 응답하지 못하도록 차단된 총 시간을 종합한 지표이다.

측정은 FCP와 TTI사이의 시간동안 일어나며, TBT가 높을수록 페이지가 사용자의 입력에 반응하지 못할 가능성이 높으며, 이는 사용자 경험을 저하시킬 수 있다. 

 

Cumulative Layout Shift(CLS)

 

CLS는 웹 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표이다. 즉 사용자가 페이지를 로드하는 동안 레이아웃을 얼마나 자주 변경되는지를 나타내는 것이다. 

 

여기서 레이아웃 이동이란 화면상에서 요소의 위치나 크기가 변하는 것을 말하는데, 예를들면 웹 페이지가 로드되는 중에 이미지나 광고와 같은 콘텐츠가 비동기적으로 로드되는 경우, 이 콘텐츠가 로드되는 과정에서 다른 요소들이 밀리거나 이동할 수 있다. 이러한 레이아웃 변화는 사용자의 경험을 방해하고 혼란을 줄 수 있다.

 

 

다음 게시물에서는 어떻게 성능을 개선하였는지에 대한 글을 작성할 예정이다

 

 

<참고사이트>

https://velog.io/@shin6403/React-%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94-1%ED%8E%B8-Lighthouse

[React] 성능최적화 1편 - Lighthouse란?