이미지는 웹 페이지 로딩 속도를 늦추고 Core Web Vitals(CWV) 점수, 특히 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift)에 가장 큰 영향을 주는 요소입니다. LCP를 개선하려면 히어로 이미지의 파일 크기와 서버 응답 시간을 줄여야 합니다. 이를 위해 JPEG나 PNG보다 압축률이 뛰어난 WebP 또는 AVIF 포맷을 사용하세요. 또한 `srcset`과 `sizes` 속성을 활용한 반응형 이미지를 구현하여 브라우저가 기기 화면에 최적화된 크기의 페이지만 다운로드하게 해야 합니다. CLS의 경우, 이미지 로딩 시 콘텐츠가 아래로 밀리는 '점핑' 현상이 주원인입니다. HTML 태그에 `width`와 `height`를 명시하거나 CSS의 aspect-ratio 속성을 사용하여 브라우저가 이미지가 로드되기 전에 공간을 미리 확보하게 하세요. 화면 하단(Below the fold) 이미지에는 네이티브 레이지 로딩(`loading="lazy"`)을 적용하여 중요한 콘텐츠의 로딩 우선순위를 높여야 합니다. 마지막으로 CDN을 통해 사용자 위치와 가까운 곳에서 이미지를 서빙하면 대기 시간을 획기적으로 줄일 수 있습니다.
단계별 가이드
WebP/AVIF로 변환
기존 포맷에서 벗어나 더 작은 파일 크기로 고화질을 제공하는 차세대 포맷을 채택합니다.
명시적 크기 지정
모든 <img> 태그에 width와 height 속성을 추가하여 예기치 않은 레이아웃 이동을 방지합니다.
Srcset 구현
반응형 이미지 속성을 사용하여 기기 화면 크기에 최적화된 해상도를 제공합니다.
레이지 로딩 적용
중요하지 않은 하단 이미지에 레이지 로딩을 활성화하여 초기 렌더링 속도를 높입니다.
히어로 이미지 최적화
상단에 위치한 LCP 이미지는 레이지 로딩을 제외하고 'preload'를 설정하여 우선순위를 높입니다.
전문가 팁
- TinyPNG나 Squoosh 같은 도구를 사용하여 화질 저하 없이 이미지를 압축하세요.
- 텍스트를 이미지로 만들지 마세요. SEO와 접근성을 위해 CSS와 웹 폰트를 사용하는 것이 좋습니다.
- LCP 이미지를 미리 로드(Preload)하여 브라우저에 우선순위임을 알려주세요.
- 사용 중인 CDN이 브라우저 환경에 맞는 최적의 이미지 포맷을 자동으로 서빙하도록 설정하세요.
pSeoMatic의 도움을 받는 방법
pSeoMatic은 사이트의 미디어 자산을 분석하여 Core Web Vitals 점수를 깎아먹는 최적화되지 않은 이미지를 식별합니다. 크기 속성이 누락되었거나 용량이 과도하게 큰 이미지를 정확히 짚어냄으로써, LCP 및 CLS 점수를 개선하고 궁극적으로 검색 순위와 사용자 참여도를 높일 수 있는 명확한 가이드를 제공합니다.
pSeoMatic 무료로 체험하기관련 질문
레이지 로딩이 SEO에 해로운가요?
아니요, 브라우저 네이티브 지원 방식이나 SEO 친화적인 JS 라이브러리를 사용한다면 전혀 문제가 되지 않습니다.
웹 이미지에 가장 적합한 포맷은 무엇인가요?
현재로서는 AVIF가 가장 높은 압축률을 자랑하며, WebP가 그 뒤를 잇는 훌륭한 대안입니다.
이미지로 인한 '레이아웃 이동'이란 무엇인가요?
이미지의 크기가 정의되지 않은 상태에서 로드될 때, 이미지가 갑자기 나타나면서 주변 텍스트나 버튼을 밀어내는 현상을 말하며 이는 사용자 경험을 저해합니다.
관련 가이드
이 내용을 바로 실행에 옮길 준비가 되셨나요?
pSeoMatic은 귀하의 데이터를 기반으로 수천 개의 SEO-optimized 페이지를 생성합니다.