[8/3 TIL]next.js 이미지 최적화

사진 위주의 sns 서비스 프로젝트를 진행하고 있다. 사진 뿐만 아니라 여러 API를 사용하다보니 최적화하기 어려울 것 같다는 문제가 생겼다. 우리 팀이 next.js를 사용하기로 결정한 이유 중 하나다.

이미지 최적화

next.js에서 제공하는 Image태그를 사용하고 바로 성능 테스트를 시도했다.

성능이 좋지 않았다.
나는 내가 슬라이드를 만든 방식이 잘못되어서 성능이 나쁘다고 생각했는데, 프론트 리더님이 SSG 렌더링을 시도해보셨냐고 질문하셨다. 일단 이미지 최적화까지 하고 슬라이드 로직을 수정해봐야겠다고 생각했다.

SSG 확인하기

getStaticProps을 사용해 SSG를 구현했다.
그런데 캐시가 계속 miss로 나온다.

찾아보니 SSG는 개발 환경에서 계속 요청을 받기 때문에 확인하기 어렵다고 한다. yarn build를 해서 확인했다.

export const getStaticProps: GetStaticProps = async () => {
  const data = sliderImages;
  const hashtagData = hashtagImages;
  const hashContent = hashtagContentsImages;
  const popularContent = popularContentsImages;
  return {
    props: { data, hashtagData, hashContent, popularContent },
    revalidate: 60,
    //MEMO : revalidate
    //stale : 신선하지 않은 데이터
    //5초 동안 hit가 유지된다.
    //데이터가 변하지 않으면 pre-render가 실행되지 않는다.
  };
};

즉시 로딩과 지연 로딩

메인 배너는 가장 상단에 나오는 이미지가 있다. next.js는 별도의 설정 없이도 레이지로딩을 지원한다. 하지만 가장 먼저 노출되는 이미지에 레이지로딩이 걸리면 안된다. eager를 걸어서 즉시 로딩으로 수정하였다.

<Image  loading="eager"/>

사이즈 명시적으로 기제

반응형을 위해 fill을 사용하더라도 명시적으로 sizes를 적어달라는 경고메세지가 콘솔창에 지속적으로 등장한다.

<Image  sizes="(max-width: 1440px) 100vw"/>

결과

성능 상승을 확인할 수 있었다.

앞으로 수정해야하는 목록

• 브라우저창이 리사이징 될 때마다 메인배너의 슬라이드 크기도 같이 조절된다. 리사이징 이벤트가 자주 발동되면 성능 저하로 이어진다. 해당 부분을 어떻게 제어할 지 생각해봐야한다.

• 다른 성능을 끌어올릴 수 있는 부분에 대해 lighthouse가 진단해주는 내용을 전부 이해하지 못했다. 빨간색은 아니더라도 확인해봐야한다.