티스토리 오프스크린 이미지 지연 로딩(Lazy loading) 하기1 - lazysizes 라이브러리 사용
몇 년 동안 서비스 기능 업데이트 없이 방치되면서 티스토리 인프라가 요즘의 검색 추세에 맞지 않게 많이 낙후되어 있습니다.
전반적인 인프라 개선이 되어야 하지만 전혀 안되고 있어서 티스토리 플랫폼 전체가 검색 결과에 패널티를 먹고 있습니다.
가장 시급한 문제들은 너저분하게 널린 자바스크립트 코드들이지만, 단기간에 해결이 불가능합니다.
두번째는 검색에 가장 큰 악영향을 주는 이미지 로딩 문제인데, 이미지 서버 인프라가 바뀌어야 하는 것이어서 마찬가지로 어렵습니다. "srcset" 문제가 전혀 개선되고 있지 않고, 오프스크린 이미지 지연 로딩도 마찬가지입니다.
"Lazy loading", "레이지 로딩"은 오프스크린 이미지 지연 로딩을 말하는 고유 단어입니다. 같은 말입니다.
최근 네이버 블로그 가보면 이미지가 저해상도였다 페이지 스크롤을 하면서 이미지가 고해상도로 바뀌는 것을 알 수 있습니다. 이미지 서버 인프라 업그레이드로 "srcset"이 적용되면서 네이버 블로그 전반적으로 페이지 로딩 속도가 상당히 빨라졌습니다.
검색 지수에 유리한 것은 당연합니다.
오프스크린 이미지 로딩 지연을 하는 방법은 몇몇 블로그에서 코드를 배포하고 있고, 완벽하지는 않아도 어느정도는 페이지 로딩 속도 개선에 도움이 됩니다.
오프스크린 이미지 로딩 지연을 해주는 외부 라이브러리도 있지만, 사용방법이 많이 까다롭습니다.
초보자는 거의 불가능이라고 봐야 합니다.
기본적으로 자바스크립트 코드 수정 정도는 할 수 있어야 합니다.
적용하면 오프 스크린 이미지들이 페이지 로딩 완료 후 페이지 스크롤에 따라 로딩되기 때문에 페이지 로딩 반응이 빨라지는 장점이 있습니다.
소개하는 방법은 "lazysizes" 라는 레이지 로딩 자바스크립트 라이브러리를 사용해 티스토리에 레이지 로딩을 구현하는 것입니다.
미리 말해두자면, 초보자들은 적용이 쉽지 않습니다.
그리고, 티스토리 시스템이 "srcset" 을 지원하지 않기 때문에 그렇게 썩 유연하지도 않습니다.
다만 오프스크린 이미지들이 페이지 로딩 완료 후 지연 로딩되기 때문에 페이지 로딩 완료 반응이 빨라져서 구글 검색 결과 지표에 도움이 됩니다.
티스토리 스킨 종류에 따라서는 적용이 불가능 할 수도 있습니다.
테스트 블로그에 테스트를 해보고 적용하는 것을 추천합니다.
다음 다운로드 링크를 클릭해 다운로드 한 후 압축을 풀면 "lazysizes" 자바스크립트 라이브러리("lazysizes.min.js")와 1x1px 크기의 투명 PNG 이미지 파일("1x1.png")이 하나 있습니다.
티스토리 스킨 편집기 파일업로드에서 모두 업로드 하면 됩니다. 압축 파일에 포함된 "lazysizes" 버전은 5.2.2 입니다.
"lazysizes" 레이지로딩 라이브러리는 깃헙에서 최신 버전을 다운로드 받을 수 있습니다.
최근까지 지속적인 업데이트가 되고 있기 때문에 사용성은 좋은 편입니다.
github.com/aFarkas/lazysizes
코드의 기능이나 효율성보다는 최대한 단순하게 구현한 레이지 로딩입니다.
스킨에서 사용하는 기본 자바스크립트 파일에 다음 코드를 추가해야 합니다.
스킨에 따라 파일 명이 다를 수 있으므로 본인 스킨의 자바스크립트 파일을 배포하는 스킨의 "images" 폴더에서 찾아야 합니다.
추가하는 자바스크립트 코드는 페이지 전체에 사용된 이미지 태그에 레이지 로드를 적용해주는 것입니다.
바닐라 자바스크립트 코드이므로 자바스크립트 라이브러리와 무관하게 실행 가능합니다.
const imgs = document.querySelectorAll('img');
if(imgs.length > 0){
imgs.forEach(function(img){
if(img.getAttribute('srcset') != null){
img.setAttribute('data-srcset', img.getAttribute('srcset'));
img.setAttribute('srcset', '티스토리PNG이미지경로');
}
if(img.getAttribute('src') != null){
img.setAttribute('data-src', img.getAttribute('src'));
img.setAttribute('src', '티스토리PNG이미지경로');
}
img.classList.add('lazyload');
});
}복붙할 위치를 잘 잡아야 합니다.
제이쿼리 기반의 스킨인 경우 기본 자바스크립트 파일의 다음 즉시 실행 함수를 찾아 안쪽 끝에 추가하면 됩니다.
(function($) {
/* 끝 부분에 추가*/
})(jQuery);바닐라 자바스크립트 파일인 경우 다음 이벤트리스너 안쪽 끝에 추가하면 됩니다.
window.addEventListener('DOMContentLoaded', function(event){
/* 끝 부분에 추가*/
}복붙한 후 코드 안의 "티스토리PNG이미지경로" 를 변경해야 합니다.
앞서 업로드한 "1x1.png" 파일의 경로를 얻어 붙여넣으면 됩니다. 스킨편집기 화면 "파일업로드" 에서 확인할 수 있습니다.
HTML 스킨 편집기 에디터 화면 하단 끝에(또는 스킨 기본 자바스크립트 파일 링크 밑에) "lazysizes.min.js" 파일을 링크합니다.
적용 후에는 웹브라우저 캐시를 한번 소거해줘야 합니다. 캐시된 이미지가 없어야 레이지로딩이 적용되는 것을 확인할수 있습니다.
완료 후 웹브라우저 개발자 도구를 열어 "Network(네트워크)" 탭에서 로딩된 블로그 페이지를 스크롤 하면 "lazysizes.min.js" 가 추가로 이미지를 로딩하는지 확인하면 됩니다.
스킨 스크립트 파일에 별도로 적용하는 방법이 번거로울 경우 다음처럼 스킨 편집기 화면 HTML 편집 화면에서 다음처럼 코드를 붙여넣어서 적용해도 됩니다.
스킨 HTML 편집기에서 "</head>" 태그를 찾아서 그 윗줄에 붙여넣으면 됩니다.
<script>...</script> 태그로 감싸서 이벤트리스너 메서드 안에 레이지로드 코드를 그대로 붙여넣으면 됩니다.
PNG 이미지 경로는 위에 안내된 방법대로 경로를 찾아서 대체해주면 됩니다.
