블로그나 홈페이지를 운영하다 보면 이미지 때문에 로딩 속도가 느려져서 답답했던 적 있으시죠? 오늘은 Lazy Loading(레이지 로딩) 기능을 자동으로 적용해서 웹사이트 속도를 확 올리는 방법을 알려드릴게요. 구글 SEO에서 정말 중요한 LCP(최대 콘텐츠 렌더링 시간) 점수도 챙기고, 초기 로딩 시간을 줄여서 방문자들이 더 쾌적하게 글을 읽을 수 있도록 도와주는 이미지 최적화 꿀팁입니다.
이미지 최적화와 빠른 로딩을 도와주는 Lazy Loading 설정하기
Lazy Loading은 말 그대로 ‘게으른 로딩’이에요. 방문자가 웹페이지에 들어오자마자 눈에 보이지도 않는 아래쪽 이미지까지 다 불러오는 게 아니라, 스크롤을 내려서 이미지가 필요한 순간에만 딱 로드하는 똑똑한 기술이죠. 이 기능을 쓰면 처음 화면이 뜨는 시간이 훨씬 빨라지고 서버 데이터도 아낄 수 있어서 정말 효율적이에요. 보통 HTML 코드에 loading="lazy"라는 속성을 넣어서 만드는데, 이걸 하나하나 수동으로 넣으려면 너무 힘들잖아요. 그래서 자동으로 적용하는 법이 필요해요.
이 속성을 쓰면 브라우저가 “아, 이 이미지는 지금 당장 안 보여줘도 되는구나” 하고 판단해서 웹 성능을 높여줘요. 덕분에 페이지가 훨씬 가벼워지고 빠른 로딩 속도를 유지할 수 있어서 구글이 좋아하는 Core Web Vitals 점수도 자연스럽게 올라가게 됩니다.
Lazy Loading을 쓰면 코드가 실행될 때 당장 필요한 것만 불러오니까, 다른 중요한 기능들이 더 빨리 작동할 수 있어요. 아래에서 복잡한 코딩 없이 자동으로 이미지에 LAZY 속성을 넣는 방법을 알려드릴게요.
쉽게 말해 지연 로딩은 나중에 필요한 건 나중에 불러오는 방식이에요. 덕분에 글에 이미지가 아무리 많아도 처음 접속하는 속도는 아주 빠르죠. 블로그 지수에 정말 중요한 영향을 미칩니다.
Lazy Loading을 쓰면 좋아지는 점들 (SEO 점검 포인트)
| 좋아지는 부분 | 어떤 효과가 있나요? |
| LCP (최대 콘텐츠 렌더링 시간) | 화면 밖에 있는 이미지 로딩을 미뤄서, 당장 보여야 할 중요한 내용이 훨씬 빨리 떠요. |
| 초기 로딩 속도 | 페이지를 열 때 불필요한 데이터를 줄여서 전체적인 속도가 빨라져요. |
| 데이터 절약 | 방문자가 글을 끝까지 안 읽고 나가도, 안 본 이미지 데이터는 쓰지 않아서 서버 비용이 절약돼요. |
코딩 몰라도 OK! 자동 Lazy Loading 적용하기
자동으로 LAZY 속성 넣는 법
- 글을 평소처럼 쓰고 나서, 자바스크립트 코드 한 줄만 추가하면 알아서 모든 이미지에 기능이 적용되는 아주 쉬운 방법이에요.
제가 최근에 쓴 서울시 청년수당 관련 글을 예로 들어볼게요. 그냥 평소처럼 에디터로 사진을 넣었을 뿐인데, 코드를 뜯어보면 제가 건드리지 않았는데도 loading="lazy" 속성이 저절로 들어가 있는 걸 볼 수 있어요.
코드가 잘 들어갔는지 확인해볼까요?
✔ 예시 (자동으로 적용된 상태)
img
src="https://blog.kakaocdn.net/dna/bidI61/..."
srcset="https://img1.daumcdn.net/thumb/R1280x0/..."
onerror="this.onerror=null; ..."
alt="서울시청년수장"
loading="lazy" <-- 이렇게 자동으로 들어가요!
data-phocus-index="1"반대로 속성이 적용되지 않은 원래 코드는 아래와 같아요. loading="lazy" 부분이 없죠? 이렇게 되면 페이지에 들어오자마자 모든 이미지를 한꺼번에 불러오느라 속도가 느려지게 돼요.
✔ 예시 (속성이 없는 상태)
img
src="https://blog.kakaocdn.net/dna/bidI61/..."
srcset="https://img1.daumcdn.net/thumb/R1280x0/..."
onerror="this.onerror=null; ..."
alt=""
data-phocus-index="1"코드 복사해서 붙여넣기만 하세요: 자바스크립트 자동 적용
HTML 배너 플러그인이나 /BODY 태그 위에 넣기
적용 방법은 정말 간단해요. 아래 자바스크립트 코드를 복사해서 HTML 배너 출력 부분에 넣거나, 스킨 편집에서 </body> 태그 바로 위에 붙여넣으시면 돼요. 어려운 HTML 수정할 필요 없이 이 코드만 있으면 모든 페이지의 img 태그에 loading="lazy"가 자동으로 생깁니다. 티스토리 사이드바 배너에 넣어도 잘 작동해요.
<script>
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
img.loading = 'lazy';
});
});
</script>중요한 이미지는 바로 뜨게 하기 (예외 처리)
그런데 주의할 점이 있어요! 사이트 맨 위에 있는 로고나 메인 배너처럼 들어오자마자 바로 보여야 하는 이미지는 늦게 뜨면 오히려 안 좋거든요. LCP 점수에도 악영향을 줄 수 있고요. 그래서 특정 이미지는 지연 로딩을 하지 않도록 설정하고 싶다면 아래 코드를 사용해서 파일명만 살짝 바꿔주세요.
<script async="async">
// 이미지 lazy loading 설정 및 예외 처리 스크립트
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
var imageUrl = img.getAttribute('src');
// 아래 '변경하지않을_이미지파일명.jpg' 부분에 제외할 이미지 이름을 넣으세요
if (imageUrl.includes('변경하지않을_이미지파일명.jpg')) {
img.removeAttribute('loading');
} else {
img.setAttribute('loading', 'lazy');
}
});
});
</script>이 방법만 쓰면 글 쓸 때마다 일일이 코딩할 필요 없이 알아서 최적화가 되니까 SEO 성능도 챙기고 관리하기도 정말 편해져요.
자주 묻는 질문 (FAQ)
Q: Lazy Loading이 정확히 뭐고, 왜 꼭 써야 하나요?
A: Lazy Loading은 사용자가 스크롤을 내려서 이미지를 볼 때만 로딩하는 방식이에요. 이렇게 하면 초기 로딩 속도가 빨라져서 구글이 중요하게 보는 LCP(최대 콘텐츠 렌더링 시간) 점수가 좋아져요. 결과적으로 검색 노출 순위가 오르는 데 큰 도움이 된답니다.
Q: HTML에서 직접 Lazy Loading을 넣으려면 어떻게 해요?
A: HTML의 img 태그 안에 loading="lazy"라는 글자만 넣어주면 돼요. 요즘 브라우저들은 이 속성을 다 알아듣기 때문에 별도의 복잡한 프로그램 없이도 바로 작동해요.
Q: 다 자동으로 적용하고 싶은데, 메인 배너만 빼고 싶으면요?
A: 로고나 메인 배너처럼 LCP에 중요한 이미지는 바로 뜨는 게 좋아요. 그럴 땐 위에서 알려드린 두 번째 자바스크립트 코드를 쓰시면 돼요. 코드 안에 제외하고 싶은 이미지의 파일명만 적어주면 그 이미지만 빼고 나머지는 다 자동으로 지연 로딩이 적용됩니다.
