[Lighthouse] performance opportunites에 관하여

쉐런·2022년 10월 7일

Lighthouse는 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공해준다!

Lighthouse는 구글에서 개발한 오픈소스로서 웹페이지 품질을 개선할 수 있는 자동화툴이며 성능, 접근성 ,PWA,SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다!

Lighthouse를 써보기 위헤 알고리즘 공부를 위해 최근에 강의를 구입했던 유데미 홈페이지를 성능 측정해보았다.

Lighthouse의 분석 결과 항목 중 하나인 Performance는 웹 성능을 측정한다!

Lighthouse를 직접 사용해보면서 Performance의 Opportunities 항목에는 어떤 것들이 있는지 확인해보고, 각 항목마다 어떤 해결 방법이 있는지 구글링하며 블로깅 해주세요. 블로깅한 내용은 실시간 세션에서 소그룹으로 모여서 공유하게 됩니다.

Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해준다!

Opportunities 항목을 확인하면 각 메트릭 별 문제를 해결할 수 있다!
각 항목을 열어보면 해당 문제에 대한 상세 설명과 함께 어떤 코드, 어떤 화면에서 문제 상황을 발견했는지 확인할 수 있기 때문에 최적화의 방향을 잡기 좋다!

Lighthouse에서 유데미 홈페이지에서 performance는 보통이 나왔다.

모바일에 비해 홈페이지가 성능이나 접근성이 매우 좋게 나왔다.

performance의 메트릭을 확인해보니 렌더링 시간이 꽤 빠른편인지 초록색, 노란색으로 나왔다.

Opportunities는 총 3개로 나왔는데
1. 초기 서버 응답 시간 단축 (Reduce initial server response time)
-> 웹사이트 성능 향상을 처리할 때 프론트 엔드 최적화 조정의 일부

서버 응답 시간이 뭘까??
-> 서버 응답 시간은 브라우저에서 페이지를 요청하는 클라이언트 와 해당 요청에 응답하는 서버 사이에 경과하는 시간이고 TTFB (Time to First Byte)로 측정된다.
-> TTFB는 HTTP 요청을 보낸 후 페이지의 첫 번째 바이트를 수신하는 데 걸리는 시간(밀리초)이다.
TTFB를 개선하기 위해서는??
-> 안정적이고 빠른 웹 호스팅을 사용해야하고 CDN(콘텐츠 전송 네트워크)를 사용하는 것이 좋다.
-> 데이터 베이스를 최적화 시키면 좋다.

사용하지 않는 자바스크립트 줄이기(Reduce unused JavaScript)
-> 페이지가 로드될 때마다 브라우저는 javascript를 다운로드, 구문 분석 및 실행해야 페이지를 렌더링 할 수 있다.
-> 사용하지 않는 javascript를 로드하면 대역폭이 불필요하게 증가하고 페이지의 첫 번째 페인트(FCP)가 지연되어 전체페이지 성능이 느려진다.

자바스크립트를 줄이는 방법
-> 서버 측에서 렌더링하지 않는 경우 React.lazy()(으)로 자바스크립트 번들을 분할해보자.
-> 코드 분할을 통해 번들된 자바스크립트를 중요한 자바스크립트와 중요하지 않은 자바스크립트로 나누어서 중요한 자바스크립트만 먼저 로드되도록 해서 렌더 차단을 줄인다.
-> 트리쉐이킹을 사용해 현재 페이지에서 사용하지 않는 자바스크립트 코드를 제거한다.
-> import후 사용하지 않는 라이브러리를 제거하는 플러그인을 사용한다.