LightHouse 점수보고 충격, 어떻게 해야하지

LightHouse

LightHouse라는 걸 알게 되었다.

LightHouse는 사이트 성능 측정 도구정도로 생각하면 된다.

 

크롬 개발자도구의 lighthouse탭에 있다.

 

각종 지표들

회사 랜딩페이지를 검사해보았는데 그리 나쁘진 않은 것 같다.

 

유저가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정한 것인데

우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다. 

우리 회사의 FCP는 0.7초이다. 다행히 선방치는것 같다.

그런데 FCP빼고는 다 쓰레기다.

 

예를들어 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한 값인데,

그러니깐 TTI가 4.7s라는 것은 '사용자가 우리 홈페이지와 상호작용하려면 로드되고 4.7초가 지나야 한다.' 라는 뜻이다.

 

이 밖에도 LCP, Speed Index, TBT 등이 있는데 이런건 검색하면 잘 나오니 여기서 설명은 하지 않겠다.(lightHouse를 공부하는 글이 아니기 때문)

 

네이버도 검사해봤는데 대박. 깔끔하다.

네이버 lightHouse 검사

바로 떠오르는 해결책

1. 우선 이미지들을 가볍게 만들어야 할 것 같다.

 

WebP를 사용하면 PNG와 비교했을때 약 26% 용량을 감소시킬 수 있다고 한다.

AVIF는 WebP보다 20% 용량을 감소시킬 수 있다고 한다. (실제 실험해보진 않았고 검색으로 안 사실, 이론충)

 

WebP와 AVIF의 브라우저 호환성 문제는 picture태그를 이용해서 해결할 수 있을 것 같다.

(picture태그는 각 브라우저의 호환성에 맞도록 이미지 분기를 할 수 있는 태그이다. img요소의 다중 이미지 리소스를 사용할 수 있다.)

//picture 태그 예시

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

 

2. css 용량 줄이기??

이건 검색하다가 알게 된 사실이다.

오래된 레포지토리일수록 레거시가 많음은 당연하다.

그 중 css용량을 줄여서 브라우저 렌더링 시간을 단축할 수 있을 것이다.(리플로우 줄이는 css작성)

 

그리고 이 홈페이지를 통해 알게된 사실인데, purgecss라는 것을 이용해 css 용량을 줄일 수 있다고 한다.

 

뭐 아직 해보진 않았다.

 

 

어쨌든 위 1,2번 방법이 지금 가장 간단히 시도해 볼 수 있는 솔루션인것 같다.

 

다행히 SEO는 의도적으로 신경쓰고 있기 때문에 실망적인 점수를 보이진 않았다.