<WEB> Lighthouse로 웹사이트 성능 분석하기

Lighthouse

구글에서 개발한 오픈소스

웹페이지의 품질 검사 기능 제공 -> 이를 참고하여 낮은 지표에 대해 개선 가능

 

lighthouse 성능 분석은 결국 로컬 pc에서 진행되기 때문에 사용자의 pc 성능에 따라 결과가 그 때 그 때 다르게 나온다.

즉, 이 결과가 절대적이지 않다는 것을 염두에 두어야 한다!

사용해보기

네이버 데스크탑 웹페이지를 분석해본 결과 대부분의 지표에서 평균 이상의 점수가 나왔다.

지표별 점수

metrics별 점수

Largest Contentful Paint는 뷰포트에서 가장 넓은 영역을 차지하는 콘텐츠의 로딩 시간을 측정하는 지표이다.

이 부분을 제외한 모든 영역에서는 초록색이 떴다. 

위 항목을 개선할 여러 방법에 대해서는 공식 문서에서 서술하고 있다.

최대 콘텐츠풀 페인트 최적화

 

더 개선할 부분이 있나 보기 위해 opportunities와 diagnostics도 살펴보았다.

opportunities 항목

opportunities 중 두 번째, 세 번째 항목은 metrics에서 유일하게 오렌지색으로 떴던 항목인 LCP(Largest Contentful Paint)와 관련 있는 부분이다. 

 

- Serve images in next-gen formats

WebP나 AVIF 포맷으로 이미지를 최적화할 것을 권장하고 있다.

아코디언 탭을 열어 항목을 살펴보니 페이지에 사용된 대부분의 이미지가 jpg/png 형식이었다.

4번째 항목(Efficiently encode images)에서도 비슷한 맥락으로 최적화된 이미지를 사용할 것을 제안하고 있다.

 

- Reduce unused JavaScript

첫 번째 항목은 React devtools가 로딩되면서 설치되는 것으로, 페이지 로딩 시 devtools도 같이 로딩되어 생긴 문제였다

크롬 확장 프로그램 설정에서 React devtools가 클릭 시 활성화되도록 바꿔주면 된다고 한다.

 

설정 저장 후 다시 Lighthouse를 돌려본 결과 LCP의 속도가 신기하게도 현저히 감소하였다.

 

참고: https://stackoverflow.com/questions/66988022/confusion-about-lighthouse-report-of-unused-js-for-react-devtools-chrome-extensi

Confusion about Lighthouse report of unused JS for react devtools chrome extension

 

이 항목은 어떤 자바스크립트 코드가 현재 페이지를 로드하는데에는 필요가 없기 때문에 뜬다.

코드 스플리팅으로 해당 스크립트를 동적으로 불러오도록 하여 페이지 로드 시 불필요한 코드를 불러오지 않도록 할 수 있다.

리액트에서는 React.lazy()를 이용할 수 있다.

참고: https://stackoverflow.com/questions/67818019/lighthouse-remove-unused-javascript-but-the-javascript-is-used

Lighthouse: Remove unused Javascript, but the Javascript is used

 

- Eliminate render-blocking resources

웹사이트의 first paint를 지연시키는 요소를 알려준다.

웹 렌더링 시 DOM트리 구축을 일시적으로 막는 것은 CSS(<link rel="stylesheet">)와 자바스크립트 파일(<script>)이다.

Lighthouse에서는 첫 렌더링에 중요하지 않은 리소스는 async/defer을 이용하여 필요할 때 로드하도록 권장하고 있다.

 

혹은 preload를 이용하여 필요한 코드를 미리 불러올 수도 있다고 한다.

중요한 자산을 미리 로드하여 로딩 속도 향상

 

개발자 도구의 coverage 탭에 들어가면 첫 로드 시 필수적으로 쓰이는 코드를 알 수 있다.

개발자 도구 오른쪽 맨 위 점 세 개를 클릭하여 커맨드 창을 띄운다.

점 세 개 클릭 후 run command 클릭

커맨드 창에 'show coverage'를 입력하면 밑에 coverage 탭이 나타나게 된다.

파란색으로 표시된 부분이 핵심 코드이고, 빨간색이 first paint에 사용되지 않는 부분이다.

Lighthouse 문서에서는 핵심 코드들을 html 파일의 inline으로 빼내어 즉시 로드되도록 만드는 것을 제안하고 있다.

하지만 이를 실제 서비스에 그대로 적용하기에는 어렵지 않을까하는 생각이 들기도 한다.

 

참고: https://polarb-raf.dev/%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0-1-eliminate-render-blocking-resources

웹 성능 개선 (1) - Eliminate Render Blocking Resources

 

 

Accesibility 영역에 감지된 문제점에는 aria 태그, 배경과 글자 색상의 충분한 대비가 적용되지 않은 점, link 태그에 description이 없는 문제 등이 있었다.

 

Best Practices 영역에서는 보안 취약점이 발견된 자바스크립트 라이브러리(jQuery)가 사용된 점을 문제로 감지하고 있었다.