Core Web Vitals와 LCP를 위한 이미지 최적화

웹 페이지 용량에서 가장 큰 비중을 차지하는 것은 대부분 이미지입니다. 페이지 속도는 사용자 경험과 검색 순위에 모두 직접적인 영향을 주기 때문에, 이미지 최적화는 사이트에서 효과가 가장 큰 작업 중 하나입니다. 구글은 이를 Core Web Vitals로 측정하는데, 이미지는 그중 두 지표의 한가운데에 있습니다.

이미지가 Core Web Vitals에 미치는 영향

LCP(Largest Contentful Paint)는 화면에서 가장 큰 요소가 그려지기까지 걸리는 시간을 측정합니다. 대부분의 페이지에서 그 요소는 히어로 이미지나 큰 사진이므로, 무겁고 느린 이미지는 LCP를 그대로 끌어올립니다. 목표는 2.5초 이내입니다.

CLS(Cumulative Layout Shift)는 로딩 중 콘텐츠가 예기치 않게 움직이는 정도를 측정합니다. 이미지에 크기가 지정되지 않으면 브라우저가 공간을 미리 확보하지 못해, 이미지가 도착하는 순간 주변 콘텐츠가 밀립니다. 두 문제 모두 몇 가지 기법으로 해결할 수 있습니다.

1. 최신 포맷 사용하기

JPEG·PNG에서 WebP·AVIF로 바꾸면 같은 화질에서 용량을 흔히 25~50% 줄일 수 있습니다. 파일이 작아지면 더 빨리 내려받아져 LCP가 직접 낮아집니다. Scrunch처럼 폴더 전체를 한 번에 변환하면 사이트 전반에 이 효과를 가장 빠르게 적용할 수 있습니다.

2. 표시 크기에 맞춰 제공하기

가장 흔한 실수는 4000픽셀 사진을 올려 800픽셀 영역에 표시하는 것입니다. 브라우저는 여전히 원본 전체를 내려받습니다. 이미지를 실제 표시되는 크기 정도로(고밀도·레티나 화면을 위해 약 2배까지 허용) 리사이즈하면 절감 효과가 큽니다.

3. 반응형 이미지 사용하기

srcset 속성을 쓰면 브라우저가 화면마다 알맞은 이미지를 고릅니다. 휴대폰이 데스크톱용 히어로 이미지를 내려받게 해서는 안 됩니다. 몇 가지 너비를 제공하면 작은 화면은 작은 파일을 받게 되어, 특히 모바일 Core Web Vitals에 중요합니다.

4. 화면 밖 이미지는 지연 로딩

단, 히어로 이미지는 지연 로딩 금지

스크롤 아래 이미지에 loading="lazy"를 넣으면 필요할 때까지 로딩을 미뤄 대역폭을 아낍니다. 다만 페이지 상단의 LCP 이미지는 즉시 로딩해야 하며, 가능하면 fetchpriority="high"로 최대한 빨리 나타나게 합니다.

5. 공간을 미리 확보해 레이아웃 이동 방지

이미지에는 항상 width·height 속성(또는 CSS aspect-ratio)을 지정하세요. 그래야 브라우저가 로딩 전에 정확한 공간을 확보해, CLS를 해치는 밀림 현상이 사라집니다.

요약 체크리스트

• 이미지를 WebP 또는 AVIF로 변환
• 실제 표시 크기로 리사이즈(레티나용 약 2배 허용)
• 반응형 srcset 너비 제공
• 스크롤 아래 이미지는 지연 로딩
• LCP·히어로 이미지는 우선 로딩
• width·height 지정으로 레이아웃 이동 방지

포맷과 크기가 기본기입니다. 여기서 시작하세요. Scrunch는 그중 변환·압축 단계를 브라우저 안에서 여러 장 한 번에 처리해 줍니다.