자동으로 Lazy Loading 속성 추가하는 방법: 이미지 최적화와 웹 성능 개선

이미지 최적화와 빠른 로딩을 위한 Lazy Loading 설정 방법

Lazy Loading은 웹페이지 로딩 시 이미지와 다른 요소를 필요한 시점에서만 로드되게 하는 이미지 최적화 방법입니다. 이 기능은 이미지를 필요할 때만 로드하여 초기 로딩 시간을 단축시키고 서버 자원을 절약할 수 있어 매우 효과적입니다. 특히 페이지 로딩 시 불필요한 자원을 지연시켜 사용자 접근성을 향상시키며, HTML 코드에 loading="lazy" 속성을 추가해 구현할 수 있습니다.

이 속성은 브라우저가 이미지가 화면에 보일 때만 로드하도록 하여 웹 성능을 개선합니다. 이를 통해 웹페이지의 효율성을 높이고, 빠른 로딩 속도를 유지하여 Core Web Vitals 점수를 개선하는 데 직접적인 도움을 줍니다.

Lazy Loading은 코드가 실행될 때 필요한 자원만 로드하므로, 페이지의 다른 부분의 로딩을 제어하는 데도 도움을 줍니다. 아래 방법은 작성자가 별도 코딩 작업 없이 자동으로 이미지에 LAZY 속성을 추가하는 방법입니다.

Lazy Loading 코드는 실행될 때 필요한 사항에서만 설정된 리소스를 로딩하는 코드입니다. 이를 지연 로딩이라고 합니다. 처음 로딩 시 불필요한 부분은 차후에 로딩을 시켜주고 필요 시만 로딩을 해주는 방법으로, 글의 이미지가 초기 로딩 속도에 미치는 영향을 최소화합니다.

Lazy Loading의 효과 요약 (SEO 점검 핵심)

자동 형성 Lazy Loading 구현 방법 및 코드 적용

자동 형성 LAZY 사용 방법

• 일반적인 글을 작성하고 글에 생성된 이미지에 자바스크립트 또는 플러그인을 통해 속성을 추가하는 간단한 방법입니다.

아래는 오늘 제가 작성한 서울시 청년수당에 대한 글의 홍보이미지 자료입니다. 이 자료는 그냥 에디터을 통해서 간단하게 이미지를 삽입했을뿐입니다. 그러나 코드를 확인하게 되면 제가 별도로 코딩 작업을 하지 않아도 loading="lazy" 속성이 들어가 있는 것을 확인할 수 있습니다.

코드 적용 여부 확인

✔ 예시 (자동 적용된 코드)

img
src="https://blog.kakaocdn.net/dna/bidI61/btsIhViAlvh/AAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q/img.webp?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=rKD0ujW0j2gqi7T9VcqS4eBd3Ws%3D"
srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbidI61%2FbtsIhViAlvh%2FAAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1772290799%26allow_ip%3D%26allow_referer%3D%26signature%3DrKD0ujW0j2gqi7T9VcqS4eBd3Ws%253D"
onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"
alt="서울시청년수장"
data-filename="54878545474.webp"
data-origin-width="599"
data-origin-height="788"
loading="lazy"
data-phocus-index="1"

아래는 속성이 적용되지 않았을 때의 원래 코드입니다. loading="lazy" 속성이 없습니다. 초기 로딩 시 모든 이미지를 한 번에 불러오게 됩니다.

✔ 예시 (속성 미적용 코드)

img
src="https://blog.kakaocdn.net/dna/bidI61/btsIhViAlvh/AAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q/img.webp?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=rKD0ujW0j2gqi7T9VcqS4eBd3Ws%3D"
srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbidI61%2FbtsIhViAlvh%2FAAAAAAAAAAAAAAAAAAAAAC-b0DERD4OkgnW5s9yXP0Sti53wAbdxHkxTif3qcY1q%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1772290799%26allow_ip%3D%26allow_referer%3D%26signature%3DrKD0ujW0j2gqi7T9VcqS4eBd3Ws%253D"
onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"
alt=""
data-filename="54878545474.webp"
data-origin-width="599"
data-origin-height="788"
data-phocus-index="1"

코드 사용 방법: 자바스크립트를 이용한 자동 Lazy Loading

HTML 베너 플러그인 또는 /BODY 위에 코드 적용

사용 방법도 아주 간단합니다. 아래 자바스크립트 코드를 HTML 베너 출력에 넣어서 사용하시면 됩니다. 굳이 HTML 코드까지 수정하실 필요도 없습니다. 모든 페이지의 img 태그에 loading="lazy" 속성을 추가하는 코드입니다. 사이드 영역이 있는 티스토리 스킨은 HTML 배너 출력을 사용해서 간단하게 사이드에 넣어 주셔도 되고, 모든 페이지에 적용 시에는 아래 코드를 /BODY 위에 넣어주시면 됩니다.

script
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
img.loading = 'lazy';
});
});
/script

특정 이미지 예외 처리 코드 (LCP에 중요한 이미지 제외)

그리고 혹시 특정 이미지 (예: 뷰포트 최상단의 로고 또는 메인 배너로, LCP에 중요한 영향을 미치는 이미지)는 지연 로딩을 적용하고 싶지 않을 경우는 아래 코드에 이미지의 파일명을 수정해주시면 지정된 이미지는 태그가 적용되지 않습니다. 아래 코드를 같이 넣어주시면 됩니다.

script async="async"
// 이미지 lazy loading 설정 스크립트
document.addEventListener("DOMContentLoaded", function () {
var images = document.querySelectorAll('img');
images.forEach(function (img) {
var imageUrl = img.getAttribute('src');
if (imageUrl.includes('변경하지않을_이미지파일명.jpg')) {
img.removeAttribute('loading');
} else {
img.setAttribute('loading', 'lazy');
}
});
});
/script

이 방법은 글 작성 시 별도의 코딩 작업 없이 이미지에 lazy 코드를 추가해주는 간단한 방법이며, SEO 성능 개선에 필수적입니다.

Q: Lazy Loading이란 무엇이며, 웹 성능과 SEO에 왜 필요할까요?

A: Lazy Loading은 웹페이지에서 이미지를 사용자가 실제로 볼 때만 로드하는 방식입니다. 이는 초기 로딩 속도를 빠르게 하여 Core Web Vitals 지표 중 하나인 LCP(최대 콘텐츠 렌더링 시간)를 개선합니다. LCP 개선은 검색엔진의 페이지 평가에 긍정적인 영향을 미쳐 노출 순위 상승에 기여합니다.

Q: HTML에서 Lazy Loading을 적용하려면 어떻게 해야 하나요?

A: HTML의 img 태그에 loading="lazy" 속성을 추가하면 됩니다. 브라우저가 이 속성을 인식하여 지연 로딩을 처리하며, 별도의 자바스크립트 라이브러리가 필요 없습니다.

Q: 모든 이미지에 자동으로 Lazy Loading을 적용하고, 특정 이미지만 제외하려면?

A: 특정 이미지 (예: LCP에 영향을 주는 가장 중요한 이미지)를 제외하고 나머지에만 Lazy 속성을 적용하려면 위 섹션에 제시된 자바스크립트 코드를 사용하세요. 코드를 통해 모든 이미지에 속성을 적용하되, 파일명을 조건문으로 넣어 해당 이미지만 속성을 제거하도록 설정할 수 있습니다.