티스토리에 이미지 지연 로드 lazy load 적용하기

티스토리에 이미지 지연 로드 오프 스크린 로드 lazy load 적용하기

 

네이버 블로그는 이미지 지연 로드를 지원한다는데 아직 티스토리는 이미지 지연 로드를 지원하지 않는다

 

이미지 지연 로드를 사용하면 첫 화면 페이지 로딩 속도가 빨라져 구글 seo 점수에 이득이 있는데

티스토리에서도 편법으로 적용되긴 한다.

 

방법은 우선 밑에 코드를 스킨 html 편집에서 <헤드>와 </헤드> 사이인 </헤드> 바로 위에 삽입하자

 

<script> document.addEventListener("DOMContentLoaded", () => {
    let TICKING = false;

    const loadImg = (img) => {
        if (img.classList.contains("loaded")) return;

        img.src = img.dataset.src;
        img.removeAttribute("data-src");

        if (img.dataset.srcset) {
            img.srcset = img.dataset.srcset;
            img.removeAttribute("data-srcset");
        }

        img.classList.add("loaded");
    };

    const removeImgSrc = (img) => {
        img.dataset.src = img.src;

        if (img.dataset.srcset) {
            img.dataset.srcset = img.srcset;
            img.removeAttribute("srcset");
        }

        img.src = "복사한_이미지_경로";
    };

    if ("IntersectionObserver" in window) {
        const io = new IntersectionObserver(
            (entries, observer) => {
                entries.forEach((entry) => {
                    if (!entry.isIntersecting) return;
                    const target = entry.target;

                    loadImg(target);

                    observer.unobserve(target);
                });
            },
            {
                root: null,
                rootMargin: "200px",
            }
        );

        document.querySelectorAll(".imageblock img,.imagegridblock img").forEach((img) => {
            removeImgSrc(img);
            io.observe(img);
        });
    } else {
        const scrollEvent = () => {
            const { scrollY } = window;

            document.querySelectorAll(".imageblock img,.imagegridblock img").forEach((img) => {
                if (img.classList.contains("loaded")) return;

                const offsetTop = img.parentNode.offsetTop;

                if (
                    offsetTop + img.offsetHeight > scrollY &&
                    scrollY + window.innerHeight > offsetTop
                ) {
                    loadImg(img);
                }
            });
        };

        document.querySelectorAll(".imageblock img,.imagegridblock img").forEach((img) => {
            removeImgSrc(img);

            scrollEvent();

            window.addEventListener(
                "scroll",
                () => {
                    TICKING ||
                        (window.requestAnimationFrame(() => {
                            loadImg();
                            TICKING = false;
                        }),
                        (TICKING = true));
                },
                { passive: true }
            );
        });
    }
}); </script>

 

밑에 코드는 줄 바꿈 안 한 같은 코드이다

 

<script> document.addEventListener("DOMContentLoaded",()=>{let e=!1;const t=e=>{e.classList.contains("loaded")||(e.src=e.dataset.src,e.removeAttribute("data-src"),e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset")),e.classList.add("loaded"))},s=e=>{e.dataset.src=e.src,e.dataset.src&&(e.dataset.srcset=e.srcset,e.removeAttribute("srcset")),e.src="복사한_이미지_경로"};if("IntersectionObserver"in window){const e=new IntersectionObserver((e,s)=>{e.forEach(e=>{if(!e.isIntersecting)return;const r=e.target;t(r),s.unobserve(r)})},{root:null,rootMargin:"200px"});document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>{const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(s=>{if(s.classList.contains("loaded"))return;const r=s.parentNode.offsetTop;r+s.offsetHeight>e&&e+window.innerHeight>r&&t(s)})};document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}}); </script>

 

그 다음 밑에 파일을 스킨 편집에 들어가서 그 뒤 html 편집에 들어가서 파일 탭에 들어간다

 

blank.png

0.00MB

그 파일탭에서 저 파일을 다운로드하여 올리면 된다. 그 뒤에 그 올린 파일을 클릭한뒤 우클릭을 해서 링크 복사를 클릭한다.

그 복사한 링크를 저기 코드의 복사한_이미지_경로 안에 집어넣는다. 따옴표안에 집어넣어야 되며 따옴표는 남아있어야 된다.

 

이렇게 하면 되는데 나는 적용해보니 경고가 뜨고 seo 점수에 크게 변화가 없어서 다시 지웠다.

뭔가 티스토리에서 지원을 안 하는데 편법으로 지원하는 거라 오류가 있는 건가 싶은데.

 

밑에 링크분 코드이므로 혹시 모르거나 안되거나 하면 밑의 링크로 질문하도록 하자.

 

티스토리에서 Lazy Load 사용하기