[ 검색엔진 최적화 ] 이미지 최적화 자동 LAZY 속성 추가 방법

Lazy Loading 속성 자동 추가 방법으로 웹사이트 성능 향상시키기

자동 LAZY 속성 추가 방법

Lazy loading은 웹페이지 로딩 속도에서 이미지 최적화 하는 방법으로, 이미지를 필요할 때만 로드하여 초기 로딩 시간을 단축시키고 자원을 절약합니다. 이 방법은 페이지 로딩 시 불필요한 자원을 지연시켜 사용자 접근성을 향상시키며, HTML 코드에 loading="lazy" 속성을 추가해 구현할 수 있습니다.

이 속성은 브라우저가 이미지가 화면에 보일 때만 로드하도록 하여 성능을 개선합니다. 이를 통해 웹페이지의 효율성을 높이고, 빠른 로딩 속도를 유지할 수 있습니다.

이미지 최적화 LAZY 속성

LAZY는 웹페이지가 로딩시 이미지와 다른 요소를 필요한 시점에서 로드되게 하는 코드입니다.이미지를 최적화하는 방법 중 lazy loading을 활용하는 것이 효과적일수 있습니다. lazy loading은 필요할 때만 이미지를 로드하여 초기 페이지 로딩 속도를 개선하고 인터넷 자원을 절약할 수 있는 방법입니다.

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

lazy 태그를 활용한 방법은 상당한 효과가 있는 것으로 판단됩니다. lazy코드는 실행될 때 필요한 사항에서만 설정된 리소스를 로딩하는 코드입니다. 지연 로딩이라고 합니다. 처음 로딩 시 불필요한 부분은 차후에 로딩을 시켜주고 필요 시만 로딩을 해주는 방법입니다.

글의 이미지는 초기 로딩 속도에 많은 영향을 주기 때문에 코딩을 하실 수 있는 분들은 코드를 작성하거나 그 외 다른 방법으로 수정을 해서 사용하는 경우가 있습니다. 그러나 작업이 번거롭고 신경을 써서 별도로 코딩 작업을 해야 합니다.

자동 형성 LAZY 사용 방법

• 일반적인 글을 작성하고 글에 생성된 이미지에 속성을 추가하는 간단한 방법입니다.

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

코드 적용여부 확인

✔ 예시

코드에 자동삽입된 loading="lazy"

<img
    src="https://blog.kakaocdn.net/dn/bidI61/btsIhViAlvh/5voARK9jnR9ZeZGfbchs31/img.webp"
    srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbidI61%2FbtsIhViAlvh%2F5voARK9jnR9ZeZGfbchs31%2Fimg.webp"
    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/dn/bidI61/btsIhViAlvh/5voARK9jnR9ZeZGfbchs31/img.webp"
    srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbidI61%2FbtsIhViAlvh%2F5voARK9jnR9ZeZGfbchs31%2Fimg.webp"
    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">

사용 방법

HTML 베너 플러그인 사용

사용 방법도 아주 간단합니다. 아래 코드를 HTML베너출력에 넣어서 사용하시면 됩니다. 굳이 HTML 코드까지 수정하실 필요도 없습니다.

✔ 예시

html 베너출력 플러그인 사용

코드 적용

페이지의 모든 이미지 파일에 loading="lazy" 속성을 추가하는 코드 입니다. 사이드 영역이 있는 티스토리 스킨은 HTML 배너 출력을 사용해서 간단하게 사이드에 넣어 주셔도 되고  모든 페이지에 적용시는 아래 코드를 </BODY> 위에 넣어주시면 됩니다.

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

예외 처리 코드

그리고 혹시 특정 이미지는 적용하고 싶지 않을 경우는 아래 코드에 이미지의 파일명을 수정해주시면 지정된 이미지는 태그가 적용되지 않습니다. 아래 코드를 같이 넣어주시면 됩니다.

 <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('변경하지않을 이미지파일명')) {
                    img.removeAttribute('loading');
                } else {
                    img.setAttribute('loading', 'lazy');
                }
            });
        });
    </script>

글 작성시 별도의 코딩 작업 없이 이미지에 lazy 코드를 추가해주는 간단한 방법입니다.