이미지만 바꿔도 성능이 좋아진다

철이·2023년 7월 31일

최적화

목록 보기

1/1

❗이미지 로딩 속도가 느렸다

WOK-AT(워캣) 개발을 하면서 성능 측정을 위해 오늘도 어김없이 Lighthouse를 돌려보았습니다.

워캣의 메인 페이지에서 가장 취약했던 지표는 LCP(Largest Contentful Paint)였습니다. LCP는 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고하는 지표입니다. LCP 수치가 좋으면, 그만큼 메인 콘텐츠가 빠르게 로드되어 사용자가 해당 페이지를 빠르게 이용할 수 있다고 인지하게 돕습니다.

따라서 사용자에게 빠른 속도의 페이지를 제공하기 위해 LCP를 개선하고자 했습니다.

🔧 LCP를 고쳐보자

Next.js 공식문서에 따르면 v12.0.0부터 avif 포맷의 이미지를 지원하기 시작했다고 합니다.

next.config.js 파일을 다음과 같이 수정하면 avif 지원을 활성화할 수 있습니다.

공식문서가 알려주는 대로 워캣에도 적용해 보았습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['wokat-place-image.s3.ap-northeast-2.amazonaws.com'],
    formats: ['image/avif', 'image/webp'],
  },
};

module.exports = nextConfig;

💡 Next.js의 Image Optimization API는 요청의 Accept 헤더를 통해 브라우저에서 지원되는 이미지 형식을 자동으로 감지합니다. 만일 Accept 헤더가 설정한 포맷 중 둘 이상과 일치하는 경우 배열에서 첫 번째로 일치하는 포맷이 사용됩니다. 일치하는 항목이 없다면 Image Optimization API는 원본 이미지의 포맷으로 fallback 합니다. - Next.js 공식문서

💡 (참고)

AVIF generally takes 20% longer to encode but it compresses 20% smaller compared to WebP. This means that the first time an image is requested, it will typically be slower and then subsequent requests that are cached will be faster.

If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the Accept header.

AVIF는 일반적으로 인코딩하는 데 20% 더 오래 걸리지만 압축률은 WebP에 비해 20% 더 작습니다. 즉, 이미지가 처음 요청될 때는 일반적으로 속도가 느리지만 캐시 된 후속 요청이 더 빠릅니다.