WebP와 next/Image, Lighthouse 지표와 관련하여

이전 게시글에서 이미지 최적화에 대해 고민하고 성능 최적화 리팩터링을 진행한 바 있다. ✍️

1. 이미지 최적화에 대해
2. useInfiniteQuery & 이미지 최적화 적용하기

WebP

WebP 에 대해 이전글에서..

• WebP는 Google이 개발한 이미지 포맷이다.
• WebP는 특히 웹에서 사용하기 위해 설계되었으며, 웹 페이지의 로딩 속도를 향상시키기 위한 목적으로 최적화되어 있다.

WebP 포맷의 주요 특징 및 장점

1. 효율적인 압축: WebP는 기존의 JPEG 및 PNG에 비해 더 작은 파일 크기로 동일한 품질의 이미지를 제공할 수 있다. 이것으로 웹페이지의 로딩 시간이 단축될 수 있다.
2. 손실 및 비손실 압축 지원: WebP는 손실 (lossy) 압축과 비손실 (lossless) 압축 모두를 지원한다. 이를 통해 웹 개발자는 상황에 따라 적절한 압축 방식을 선택할 수 있다.
3. 알파 채널 지원: WebP는 투명성을 지원하는 알파 채널을 포함하여 비손실 압축 이미지를 제공할 수 있다. 이는 PNG와 유사한 기능이지만, 일반적으로 더 작은 파일 크기로 결과를 얻을 수 있다.
4. 애니메이션 지원: WebP는 여러 프레임으로 구성된 애니메이션 이미지도 지원한다. 이는 기존의 GIF에 대한 더 효율적인 대안을 제공한다.
5. 풍부한 색상 정보: WebP는 24-bit RGB 색상 정보와 함께 8-bit 알파 채널을 지원한다.
6. 프로그래시브 디코딩: WebP 이미지는 점진적으로 로딩되어 사용자에게 빠르게 저해상도 버전의 이미지를 보여준 후, 높은 해상도로 전환될 수 있다.

WebP의 단점 중 하나는 아직 모든 웹 브라우저에서 지원되지 않는다는 것! 그러나 주요 브라우저 대부분 (Chrome, Firefox, Edge, Opera 등)에서는 WebP 포맷을 지원하고 있다고한다.😀

실제로 webP 형식을 통해 이미지 사이즈와 로딩 속도 차이를 비교해보니 그 차이가 크게 체감될 정도였다.

적용전

적용후

Light House에서 Performance 탭을 점검하다 보면 가끔 serve images in next-gen formats 문구를 볼 수 있을 것이다. 이때 말하는 차세대 이미지 포맷은 어떤 형식을 말하는 걸까?

이와 같은 성능 변화를 이끌어낸 것에 대해 조금더 깊게 탐구해보고, 새롭게 배운 내용을 기록하고 싶어서 글을 작성하려고 한다. 🧐

WebP 파일에 대해

Google은 온라인 이미지의 크기를 줄이기 위해 WebP 파일 포맷을 개발했다. WebP는 사진과 그래픽의 크기를 줄여 웹 사이트가 빠르게 로드되고 사용자에게 더 나은 경험을 제공할 수 있도록 돕는다.

WebP는 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷이다. 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아진다.
하지만 WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있어서 데이터 손실 없이 또는 중요하지 않은 정보의 일부만 손실하면서 이미지를 압축하는 것도 가능하다고 한다.

❓ 무손실 압축과 손실 압축을 선택할 수 있다는 것은 어떻게 가능할까? 그리고 어떻게 적용할까?

만약 직접 WebP 변환 도구나 라이브러리를 사용하여 이미지를 변환한다면, 선택적으로 압축 방식을 지정할 수 있다고 한다.

• 예를들어 cwebp 라는 공식 WebP 변환 도구를 설치, 명령어를 실행하여 사용할 수 있다.

• picture 요소를 사용할 수 있다.

  <picture>
    <source srcset="/path/to/image.webp" type="image/webp">
    <img src="/path/to/image.JPEG" alt="">
  </picture>

• .htaccess 파일을 수정할 수 있다.

• WordPress에서 여러 플러그인을 사용할 수 있다.

내 경우에는 next.js에서 제공하는 Image 컴포넌트를 사용했기 때문에 이 경우 어떻게 변환되는지에 대해 알아보았다.

WebP의 용도

(1) 웹 사이트 이미지 크기 축소

WebP는 웹 사이트 이미지의 품질과 실용성 사이에서 균형을 유지한다. WebP 파일은 이미지 품질을 그대로 유지하면서 사진과 그래픽을 압축한다. 이미지 크기가 작을수록 사용자의 광대역 네트워크 연결에 대한 부담이 줄어들고 웹 사이트 탐색 속도가 빨라져서 웹 경험이 향상될 수 있다.

(2) 온라인 애니메이션 지원

WebP파일 포맷은 여러 온라인 애니메이션 파일 포맷의 표준이 된 GIF를 대신할 수 있다. Google에 따르면 애니메이션 WebP는 GIF보다 파일 크기가 훨씬 작고, 더 적은 바이트를 필요로 한다.

WebP의 장단점

장점

• 웹 페이지가 빠르게 로드될 수록 사용자 경험이 향상되고 검색 엔진에서 웹 사이트의 순위가 높아진다. 나아가 사용자의 이탈을 감소시킬 수 있다.
• WebP 포맷은 Google Chrome, Microsoft Edge, Mozilla Firefox등 다양한 웹 브라우저와 호환이 된다.

단점

• WebP 포맷은 인터넷을 염두에 두고 설계되었으므로 오프라인에서 이미지를 사용하는 경우에는 도움이 되지 않을 수 있다.
• Internet Explorer 등 일부 옛 브라우저의 경우 지원되지 않을 수 있다.
• 약간의 압축으로도 이미지 품질이 저하될 수 있다. 고품질 이미지로 작업해야 하는 경우 등에는 이를 고려해야한다.

WebP 이미지의 최대 크기

최대 크기는 16,383px * 16,383px 이므로, 이를 고려하자.

시간 절감예상하기

리팩터링 전 👇

리팩터링 후 경고문구가 사라졌다 😊👇

성능 테스트를 실행할 때 'Serve images in next-gen formats' 권장 사항을 받았다면 이는 이미지를 더 잘 최적화하고 WebP 또는 AVIF로 변환해야 함을 의미한다.

→ Google은 51.52초(추정)의 로딩 시간을 절약하기 위해 차세대 형식으로 이미지를 제공할 것을 권장한다.

LCP 점수 올리기

Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 페이지 로딩 성능을 평가하는 데 중요한 지표로 간주되며, 웹 페이지가 사용자에게 얼마나 빨리 '주요 컨텐츠'를 표시하는지 측정한다.
LCP가 이미지인 경우 녹색 점수를 유지하려면 가능한 한 빨리 로드해야 한다. 이때 WebP로 변환하는 것은 사용자가 가장 중요한 콘텐츠 로드를 빠르게 볼 수 있도록 하는 방법이다. 😤

LCP 주요 포인트

측정 대상: LCP는 페이지 로드 시작부터 가장 큰 눈에 띄는 콘텐츠 요소 (예: 이미지, 비디오 포스터, 텍스트 블록 등)가 화면에 완전히 표시되는 데 걸리는 시간을 측정한다.

사용자 경험 지표: LCP는 웹 페이지의 초기 로딩 성능과 사용자 경험을 평가하는 데 유용한 지표이다. 페이지의 주요 콘텐츠가 빨리 로드될수록 사용자는 그 페이지에 대해 더 긍정적인 인상을 받게 된다.

향상 전략: LCP 값을 향상시키려면, 큰 이미지의 최적화, CSS와 JavaScript의 지연 로딩, 서버 응답 시간의 최적화, 텍스트 페인트 최적화 등 다양한 최적화 전략을 적용할 수 있다.

Google의 Core Web Vitals: LCP는 Google이 제시하는 "Core Web Vitals" 중 하나이다. Core Web Vitals는 웹사이트의 사용자 경험 품질을 평가하기 위한 중요한 지표 모음으로, LCP 외에도 First Input Delay (FID) 및 Cumulative Layout Shift (CLS)가 포함된다.

SEO와도 관련이 있다고?

구글과 같은 주요 검색 엔진은 페이지 로딩 속도를 웹 사이트 순위를 결정하는 요소 중 하나로 고려한다.
이는 모바일 검색에 특히 중요한 요소로 간주된다. 많은 사용자가 모바일 장치를 사용하여 웹을 탐색하고, 이러한 장치는 종종 느린 네트워크 연결 상태에서 작동하므로, 빠른 페이지 로딩 속도는 이러한 환경에서 큰 차이를 만들 수 있을 것이다.
구글은 웹마스터와 개발제에게 페이지 속도를 최적화 하도록 권장하며, 이를 위한 도구와 가이드라인도 제공한다.

next.js Image와 WebP

next.js의 Image 컴포넌트는 자체적인 이미지 최적화 엔진을 사용하여 WebP 포맷을 지원한다. 사용자가 웹 브라우저에서 Next.js로 호스팅되는 페이지에 접속할 때, Image 커포넌트는 브라우저의 지원을 확인하고 WebP 포맷을 지원하는 경우 자동으로 WebP 이미지를 제공한다.

1. 브라우저 지원 확인
   Image 컴포넌트는 브라우저의 Accept 헤더를 확인하여 요청을 보낸 브라우저가 WebP 형식을 지원하는지 판단한다. 만약 브라우저가 WebP를 지원한다면, Accept 헤더에 image/webp를 포함시켜 요청을 보내고, 서버는 이 정보를 바탕으로 브라우저에게 WebP이미지를 제공할 수 있다.

2. 이미지 최적화
   Next.js는 내부적으로 이미지를 최적화하기 위해 sharp 라이브러리를 사용하여 이미지 변환을 수행한다. 사용자가 Image 컴포넌트로 이미지를 불러올 때, Next.js는 sharp를 사용하여 해당 이미지를 최적의 형식과 크기로 변환한다.
   (sharp는 높은 품질의 이미지 변환을 제공하며, JPEG, PNG 등의 포맷을 WebP로 변환할 수 있다. sharp는 원본 이미지의 품질을 분석하고, 목표 품질에 맞게 자동으로 이미지를 조절한다. 이를 통해 최적의 파일 크기와 품질을 달성할 수 있다.)

3. 자동화된 렌더링
   사용자가 Image 컴포넌트에 이미지 경로를 제공하면, Next.js는 필요에 따라 이미지를 최적화하고 캐싱한다. 이후 동일한 이미지 요청이 있을 경우 캐시된 버전을 제공하여 성능을 향상시킨다.

4. 품질 조절
   Image 컴포넌트의 quality prop를 사용하면 원하는 품질로 이미지를 변환할 수 있습니다. 이를 통해 파일 크기와 품질 간의 균형을 조절할 수 있습니다.

   <Image src="/path/to/image.jpg" quality={75} />

✍️ 앞에서 말한 자동화된 렌더링에 대한 개념을 추가적으로 더 살펴보자.

Next.js의 Image 컴포넌트

Next.js의 Image 컴포넌트는 이미지의 로딩 성능을 향상시키기 위한 여러 최적화 기능을 내장하고 있다. 그 중 위에서 언급한 "자동화된 렌더링"이라는 특성은 사실상 이미지 최적화와 캐싱 전략에 관한 것이다.

1. 자동 이미지 최적화
   사용자가 Image 컴포넌트에 이미지 경로를 지정하면, Next.js는 해당 이미지를 자동으로 최적화한다. 예를 들어, 큰 이미지를 작은 크기로 리사이징하거나, JPEG나 PNG 이미지를 WebP 포맷으로 변환하는 작업을 수행한다.
   이 최적화 과정은 사용자의 브라우저와 디바이스 환경, Image 컴포넌트의 props (예: width, height, quality 등)에 따라 달라진다.

2. 캐싱 메커니즘
   이미지 최적화는 리소스를 많이 사용하는 작업일 수 있기 때문에, 한 번 최적화된 이미지는 캐시에 저장되어 다음에 동일한 이미지가 요청될 때 빠르게 제공된다.
   Next.js는 내부적으로 Cache-Control 헤더를 사용하여 최적화된 이미지의 캐싱 전략을 관리한다. 이로 인해 이미지는 CDN이나 브라우저 캐시에서 효율적으로 관리될 수 있다.

3. 요청에 따른 동적 렌더링
   Image 컴포넌트는 웹 페이지를 로딩할 때마다 동적으로 이미지를 렌더링한다. 이때 브라우저의 Accept 헤더나 다른 요청 정보를 바탕으로 최적의 이미지 형식과 품질을 결정한다.
   예를 들어, 특정 브라우저가 WebP를 지원하지 않으면, 다른 포맷의 이미지 (예: JPEG)를 제공하게 된다.

4. 효율적인 네트워크 사용
   Next.js의 Image 컴포넌트는 이미지 로딩을 지연시키는 "Lazy Loading" 기능도 기본적으로 지원한다. 이는 뷰포트 내에 없는 이미지들은 로딩을 지연시켜 네트워크 리소스를 효율적으로 사용하게 한다.

next.js/Image 이미지 캐싱

1. Cache-Control 헤더
   리소스의 캐시 동작을 지정하는 데 사용된다. 이 헤더는 리소스가 얼마 동안 캐시될 수 있는지, 리소스가 다시 검증되어야 하는지 등의 지침을 제공한다.
   ex.) Cache-Control: public, max-age=3600 은 해당 리소스가 1시간 동안 캐시될 수 있음을 나타낸다.

2. Next.js의 이미지 최적화와 캐싱
   앞의 내용처럼 사용자가 Image 컴포넌트를 사용하여 이미지를 요청하면, Next.js는 이 이미지를 최적화하고 최적화된 이미지는 캐시에 저장된다.
   최적화된 이미지에 대한 응답은 Cache-Control 헤더를 포함하여 브라우저나 CDN에 전송된다. Next.js는 기본적으로 이 헤더를 설정하여 이미지를 캐시에 저장할 것을 지시한다.

3. CDN과의 연동
   Next.js는 Vercel과 같은 플랫폼에서 호스팅될 때 자동으로 CDN의 이점을 활용할 수 있다. CDN은 전 세계의 여러 데이터 센터에 콘텐츠의 복사본을 저장하여 사용자에게 빠르게 콘텐츠를 제공하는 시스템이다.
   이미지가 CDN에 저장되면, 사용자의 요청은 가장 가까운 데이터 센터로 라우팅되어 빠른 응답 시간을 보장한다.
   Cache-Control 헤더에 따라, CDN은 이미지를 적절한 시간 동안 캐시에 저장하고, 캐시된 이미지가 만료될 때까지 원본 서버로 다시 요청하지 않는다.

4. 브라우저 캐시
   브라우저 역시 Cache-Control 헤더의 지침을 따라 리소스를 로컬 캐시에 저장한다. 이를 통해 동일한 리소스를 다시 요청할 필요 없이 빠르게 페이지를 로드할 수 있다.

❓ 그럼 여기에서 말하는 서버 캐싱과 브라우저 캐싱은 서로 다른 역할을 하는 걸까?
→ 두 캐싱은 서로 다른 목적과 과정을 가지고 있다.

(1) 브라우저 캐싱
목적: 사용자의 웹 브라우저가 이미 다운로드 받은 리소스를 다시 요청하지 않도록 하여 페이지 로드 속도를 높이는 것이다.

작동 원리: 웹 페이지를 처음 방문할 때, 브라우저는 웹 서버로부터 필요한 모든 리소스 (이미지, CSS, JavaScript 등)를 다운로드 받는다. Cache-Control 헤더의 지침에 따라, 브라우저는 이 리소스들을 로컬 캐시에 저장한다. 이후 동일한 리소스를 필요로 하는 페이지에 방문하면, 브라우저는 캐시에 저장된 리소스를 사용하여 빠르게 페이지를 로드한다.

장점: 네트워크 대역폭 사용을 줄이고, 페이지 로드 시간을 크게 줄일 수 있다.

(2) 서버 캐싱(특히 CDN캐싱)
목적: 원본 서버의 부하를 줄이고, 전 세계 어디서든 사용자에게 빠르게 콘텐츠를 제공하는 것이 목적이다.

작동 원리: CDN (Content Delivery Network)는 전 세계 여러 지점에 데이터 센터를 두고 있다. 사용자의 요청이 들어오면, 가장 가까운 데이터 센터가 응답한다. 해당 데이터 센터에 요청한 리소스의 캐시가 있다면, 즉시 사용자에게 제공한다. 캐시에 리소스가 없다면 원본 서버에서 리소스를 가져와 사용자에게 제공하고, 동시에 그 리소스를 캐시에 저장한다.

장점: 전 세계 어디서든 빠른 응답 시간을 보장하고, 원본 서버의 부하를 크게 줄일 수 있다.

🧐 즉, 브라우저 캐싱은 개별 사용자의 경험을 빠르게 만들어주며, 서버 캐싱 (특히 CDN)은 전체 사용자 베이스에 대해 안정적이고 빠른 서비스를 제공하는 데 도움을 준다.

reference)
webp 알기
webp 형식에 대해