<aside>

10.30 lighhouse 성능 측정

1. 로컬환경에서도 가능하나, 배포환경과 동일한 성능을 측정하고자 배포환경에서 측정 후 비교하기
2. npm run build && npm run start
3. 브라우저 관리자 모드에서 lighthouse 탭 클릭 후 기본 속성으로 측정

• lighthouse 측정 지표로 성능은 86으로 다소 낮은 점수가 나왔다.

• 진단요소는 다음과 같았다.

</aside>

당장은 UI 구성파트가 주를 이루기에 해당 파트에서 발생한 문제요소들을 고쳐나가보도록 하자

1. 이미지 최적화 패키지 sharp필요

Error: 'sharp' is required to be installed in standalone mode for the 
image optimization to function correctly.

• 다음 같은 에러가 발생했고 내용은 이미지 최적화 패키지인 ‘sharp’를 설치해달라는 것. 설치를 했다.
  • npm install sharp

2. 이미지 확장자 변경 → webp,avif

• webp의 경우 jpg, png에 비해 크기를 26% 이상 줄일 수 있다.

• avif의 경우 webp에 비해 20% 향상된 압축률을 제공하나 해당 확장으로의 변환이 가능한지는 모름

  • 사파리에선 안한다곤 한다.

• 넥스트에서 제공하는 이미지 포맷기능을 사용

• next.config.js 다음과 같이 작성해서 확장자를 변환하도록 함.

  images: {
      formats: ['image/avif', 'image/webp'],
    },
  

3. Image 컴포넌트 사용

• 일반 html 이미지 태그인 img와 다르게 Next에서 제공하는 Image의 경우 다음과 같은 기능을 제공
  1. lazy lodaing : 로딩 시 필요한 이미지만 가져옴
  2. 이미지 사이즈 최적화 : srcset을 통한 뷰포트 너비에 로드될 이미지를 결정
  3. placeholder : ui변화로 인한 CLS현상을 일으키지 않고자 빈 화면을 보여줌 or blur이미지 설정 가능
• 본격적 Image 컴포넌트 사용
  • 일부 img 태그를 사용중이던 BlogComment, SearchBar등 img태그를 Image컴포넌트로 변경

4. font Dela 로컬폰트로 변경

• 현재 구글 폰트인 Dela를 Next를 통해 가져오고 있는데 해당기능 사용 시 매 렌더링 마다 폰트를 받아와 적용시키는 과정에서 지연 발생