1차 라이트하우스 기반 성능 개선 작업

[bomi8489]

📑 이슈 번호

#311

🚧 구현 내용

폰트 최적화

• Pretendard font를 font-face attribute로 cdn 통해 폰트를 다운로드하던 것에서 next/font를 사용하여 font를 빌드 타임 때 한번만 다운로드 받게 변경하였습니다.
  • cdn으로부터 다운로드 받게 되는 경우에는 클라이언트에서 custom 폰트를 다운로드 받기 전까지는 운영체제에서 사용 가능한 fallback font(Arial 등)를 사용하게 게 됩니다. custom 폰트 로드 전/로드 후에 폰트 사이즈 크기 차이로 인해 cumulative layout shift가 발생하여 사용자 경험을 크게 떨어뜨리게 됩니다.
  • Next.js의 next/font를 사용하는 경우에는 font를 빌드 타임 때 한번만 다운로드 받고, fallback font가 사용되는 동안 css size-adjust 프로퍼티를 적용시켜서 글자 크기를 동일하게하여 layout shift가 발생하는 것을 막아줍니다.

스켈레톤 삭제

• 스켈레톤 UI를 직접 구현하여 적용시켰더니 Lighthouse 성능 CLS(Cumulative Layout Shift)가 굉장히 높게 책정되어 결국 삭제하게 되었습니다. 추후 좀 더 보완하여 적용하겠습니다.

개선점

• 기존 배포된 환경의 Lighthouse 성능 검사

• 폰트 최적화 및 스켈레톤 삭제 후 (개발 환경에서 성능이 더 안좋게 나오는 점 고려)

결과

• 기존의 LCP(Largest Contentful Paint)가 3,347ms 였고 cdn 다운로드에 300ms가 소요됐던것을 없애 약 9.8%의 LCP 개선을 기대할 수있습니다.

Todo

• 이미지 최적화

🚨 특이 사항