[웹 기술/SEO] 홈페이지 속도 개선 방법: WebP 이미지 용량 줄이기와 지연 로딩 실무

💡 이 글의 핵심 요약

• 홈페이지 속도 개선을 위한 WebP 포맷 전환의 실측 압축률 비교
• LCP 지표 하락을 막는 올바른 네이티브 지연 로딩(loading="lazy") 적용법
• 구글 이미지 검색 노출을 위한 Alt 태그 및 파일명 최적화 실무

웹사이트 렌더링 속도는 사용자 체류시간을 결정짓는 핵심 요소이자, 구글 검색 랭킹 시그널인 코어 웹 바이탈(Core Web Vitals)의 최우선 평가 항목입니다. 텍스트나 스크립트보다 무거운 이미지 리소스의 용량을 줄이고 로딩 시점을 제어하는 것이 프론트엔드 성능 최적화의 첫 단추라 할 수 있습니다.

WebP 포맷 전환을 통한 이미지 용량 줄이는 법

기존에 쓰던 JPEG나 PNG 대신 차세대 포맷인 WebP로 이미지를 서빙하는 게 요즘 실무 정석입니다. 구글 developers 공식 문서에 따르면, WebP는 손실/무손실 압축을 모두 지원하며 기존 포맷 대비 확연한 용량 절감 효과를 보여줍니다.

비교 포맷	압축 방식	평균 용량 절감률 (구글 공식 기준)
WebP vs JPEG	손실 압축 (Lossy)	약 25% ~ 34% 감소
WebP vs PNG	무손실 압축 (Lossless)	약 26% 감소 (알파 채널 지원)

실제 3.2MB 크기의 고해상도 PNG 원본을 WebP 무손실 압축으로 트랜스코딩할 경우 시각적 품질 저하 없이 약 2.3MB 수준으로 가벼워집니다. 최신 모던 브라우저들은 대부분 WebP를 네이티브로 지원하므로, 트래픽 대역폭 절감을 위해 필수적으로 도입해야 합니다.

지연 로딩(Lazy Loading)과 LCP 예외 처리

용량을 줄인 후에는 이미지를 불러오는 시점을 통제해야 합니다. 페이지 접속 시 화면 하단에 있는 이미지 수십 장을 동시에 다운로드하면 초기 렌더링 속도가 곤두박질칩니다. 자바스크립트 없이 HTML 태그에 loading="lazy" 속성을 추가하면, 사용자가 스크롤을 내려 이미지가 화면(뷰포트)에 진입하기 직전에만 리소스를 다운로드합니다.

다만 현업에서 진짜 주의할 포인트가 있습니다. 사용자가 접속 직후 보게 되는 최상단 메인 배너(Above the fold)에 `lazy` 속성을 넣으면 렌더링이 지연되어 오히려 LCP(Largest Contentful Paint) 점수가 깎입니다. 구글 web.dev 가이드라인에 명시된 대로, 상단 핵심 이미지는 지연 로딩에서 제외하고 fetchpriority="high" 속성을 주어 먼저 불러오는 튜닝이 병행되어야 합니다.

이미지 검색 유입을 위한 Alt 태그 세팅

홈페이지 속도 개선만큼 중요한 것이 구글 이미지 검색 탭을 통한 트래픽 유입 확보입니다. 크롤러는 이미지의 픽셀을 눈으로 보지 못하므로, 반드시 alt="핵심 키워드를 포함한 묘사" 형태로 대체 텍스트를 작성해야 합니다. 파일명 역시 'img_001.webp'가 아니라 'webp-lazy-loading-guide.webp'처럼 하이픈(-)으로 연결된 영문 키워드로 지정하는 것이 검색엔진 최적화(SEO)의 기본입니다.

---

결론: LCP 개선을 위한 실무 3원칙

웹사이트 성능을 끌어올리려면 다음 세 가지 규칙을 프론트엔드 환경에 세팅해 두면 됩니다.

1. 포맷 전환: 모든 원본 이미지를 WebP로 트랜스코딩하여 서버에 서빙할 것.
2. 네트워크 통제: 스크롤 하단 영역에만 loading="lazy"를 적용할 것.
3. LCP 최적화: 최상단 뷰포트 이미지는 lazy 속성을 빼고 fetchpriority="high"로 우선순위를 높일 것.

▶ 테크니컬 SEO 관련 이전 칼럼 더 보기