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

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

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

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

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

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

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 코드를 추가해주는 간단한 방법입니다.