NEXT.js Lighthouse 점수 높이기와 Sharp

Lighthouse 란? 

 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 자동화 도구이다! 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다고 한다. 

 

왜 Lighthouse를 썼나

배포에 Vercel을 사용한 나는 Vercel 에서 재공하는 Speed Insights 가 있지만 Lighthouse를 썼는데

그 이유는 Vercel은 RUM(Real User Monitoring) 방식이기 때문이다.

이 방식은 서비스가 제공되는 중 실제 유저의 활동기록을 기반으로 성능 측정해서 사용자 환경에 따라 점수가 달라 질 수 있다. 그래서 난 Lighthouse 를 사용했다.

 

Lighthouse 검사

프로젝트를 배포 후 크롬에서 Lighthouse를 해보니 아래와 같은 점수가 나왔다.

여기서 내가 해야할건 Performance와 Accessibility, SEO이다!

 

Performance와 Accessibility

Performance와 Accessibility를 향상시키기 위해 이미지최적화 및 로딩속도 와 초기로딩 속도를 높여야했다.

IMG

Lighthouse의 상세내용을 보니 img의 로딩이 느려 페이지가 완전히 로딩 되기까지 느리다는 말이 적혀있었다. 이미 난 이미지 최적화를 위해 Image 컴포넌트를 사용하고 있었고 width, height 값을 선언해 Reflow (액션이나 이벤트에 의해 DOM요소의 크기나 위치 등을 변경) 되지 않게 하고 있었지만 부족했다. 그래서 Sharp를 사용했다. 

 

Sharp

Sharp는 이미지 처리 및 최적화를 위한 도구이다. PNG,JPEG 를 AVIF형식으로 변환할 수 있었다. (AVIF 는 색상 프로파일과 비트율에 대한 압축 효율성을 제공한다. 크기를 크게 줄이면서도 원본 이미지의 세부 정보와 색상을 보존할 수 있는 것이다! )

 

Lazy loding

lazy loding은 이미지가 필요할때까지 로딩을 지연 시키는 것인데 웹 성능을 향상 시킨다고 한다? 말은 게으른 뚱이같은데 성능을 향상 시킨다니! 뭔가 이해가 되지않아 찾아 보았는데 내가 이해를 잘 못 한거였다! 

 이미지가 필요할때까지 로딩을 지연 시키는 것 이라는 것은 이미지가 필요하지 않으면 로딩시키지 않느다는 것이기 때문에 성능이 향상되는 것이었다!  (이미지가 로딩되지 않으면 플레이스홀더가 생성되고 이미지를 만나면 이미지 로딩 후 플레이스홀더는 이미지로 바뀐다!) 

즉 뷰포트에 만나지 않은 이미지를 로딩하지 않아 대역폭이 절약되어 성능이 향상되는 것이다!

 

SEO

SEO 점수가 90점이 나왔다. 그래서 head 태그와  메타 태그를 추가했다.

그리고 이미지 컴포넌트에 alt 속성이 없는것을 파악하고 추가해줬다.

메타 태그는 아래처럼 했다! 

메타태그 추가

결과

점수가 많이 향상되었다! 

Accessibility는 디자인상 더 이상 점수를 향상시킬 수 없었다! (Lighthouse는 디자인도 모르는 바보!)