[티스토리 블로그 최적화] 페이지 성능 최적화하는 이미지 지연로드 1분 적용 방법

안녕하세요! 이번 글에서는 티스토리 블로그 최적화 방법 중 하나인 이미지 지연로드를 1분 만에 적용하는 방법을 소개해드리겠습니다. 이미지 지연로드를 적용하면, 방문자가 블로그에 들어왔을 때 보이지 않는 이미지들은 나중에 로드되어 페이지 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

 

이미지 지연로드란?

 

이미지 지연로드는 방문자가 페이지를 스크롤하여 이미지를 볼 때까지 해당 이미지를 로드하지 않는 기술입니다. 이를 통해 초기 페이지 로드 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다.

 

이미지 지연로드의 장점

이미지 지연로드는 필수는 아니지만, 페이지 성능을 크게 향상시켜 SEO 측면에서도 유리하며, 방문자가 블로그에 방문했을 때 긍정적인 경험을 제공하여 재방문을 유도할 수 있습니다.  따라서 간편하게 이미지 지연로드를 적용하여 블로그를 더욱 좋은 방향으로 성장시킬 수 있습니다.

 

잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요! 따라 하기 쉽도록 단계별로 설명해 드릴 테니, 걱정하지 마세요. 이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 이제 시작해볼까요?

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

 

이미지 지연로드 코드 추가

 

HTML 파일에서  '</body'를 검색하거나 맨 아래로 내려가 찾습니다.

</body

HTML 파일에서 '</body'를 검색하거나 찾습니다.

아래 코드를 복사하여 '</body' 위에 붙여 넣습니다.

 

<!-- 이미지 지연로드 -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                if (img.dataset.srcset) {
                    img.srcset = img.dataset.srcset;
                }
                img.classList.add("loaded");
                observer.unobserve(img);
            }
        });
    }, {
        rootMargin: '200px'
    });

    document.querySelectorAll("img[data-src]").forEach(img => {
        observer.observe(img);
    });
});
</script>

 

코드 설명

1. 'data-src' 속성을 가진 이미지를 찾아, 그 이미지가 뷰포트 내에 들어올 때까지 로드되지 않도록 합니다.
2. 이미지가 뷰포트에 들어오면 실제 이미지를 로드하여 성능을 최적화합니다.

뷰포트는 사용자가 보는 화면의 영역을 말합니다. 예를 들어, 모바일 기기나 데스크톱에서 웹페이지를 열었을 때 사용자가 현재 보고 있는 화면의 크기를 의미합니다.

복사한 이미지 지연로드 코드를 추가합니다.

 

결론

이번 글에서는 티스토리 블로그 페이지 성능을 최적화하는 이미지 지연로드를 1분 만에 적용하는 방법을 소개했습니다. 이 코드는 페이지 성능을 향상시켜 SEO 측면에서 매우 유리하기에 꼭 적용해 보세요.

다음 글도 기대해 주시고, 궁금한 점이나 도움이 필요하면 언제든지 댓글로 알려주세요!