구글의 연구에 따르면, 모바일 웹사이트의 로딩 시간이 3초를 넘어가면 방문자의 53%가 이탈한다고 합니다.
화려한 디자인과 훌륭한 기획으로 무장한 홈페이지라도, 접속 속도가 느리다면 고객은 결과물을 보기도 전에 뒤로 가기를 누릅니다.

1. 차세대 이미지 포맷 'WebP' 사용하기

WebP(웹피)는 구글에서 개발한 이미지 포맷입니다. 기존 JPG나 PNG와 동일한 화질을 유지하면서도 용량을 무려 30%~50% 이상 획기적으로 줄여줍니다. 최신 웹 트렌드에서는 필수적으로 사용되는 규격입니다.

⚠️ 단, 주의할 점 (구형 브라우저 호환성)

인터넷 익스플로러(IE)나 너무 오래된 스마트폰에서는 WebP를 인식하지 못해 엑스박스가 뜰 수 있습니다. 이를 완벽하게 방어하기 위해 HTML의 <picture> 태그를 사용해야 합니다.

<!-- 나눔웹 추천 안전한 이미지 삽입 코드 -->
<picture>
    <!-- 브라우저가 WebP를 지원하면 이것을 로드합니다 -->
    <source srcset="image.webp" type="image/webp">
    
    <!-- WebP를 지원하지 않는 구형 브라우저면 기존 JPG를 로드합니다 -->
    <img src="image.jpg" alt="나눔웹 포트폴리오 이미지">
</picture>

2. 안 보이는 건 나중에! 'Lazy Loading' 적용

사용자가 스크롤을 내리기 전까지, 모니터 화면 밖(아래쪽)에 숨어있는 이미지들까지 처음부터 미리 다 불러올 필요는 없습니다.
화면에 이미지가 보일 때쯤 늦게(Lazy) 로딩하게 만들면 초기 접속 속도를 미친 듯이 끌어올릴 수 있습니다. 적용법은 너무나 간단합니다.

<!-- img 태그 안에 loading="lazy" 딱 하나만 추가하세요! -->
<img src="heavy-image.jpg" alt="고화질 배너" loading="lazy">