Github / aFarkas / lazysizes / README.md
'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다.
페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다.
다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다.
이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는 웹페이지에 효과가 있습니다. 사용 이미지의 개수가 적고 파일의 용량도 작을 때 lazy load를 적용하면 오히려 페이지 로딩 속도를 저해하는 요인이 될 수 있습니다.
이 글에서는 이미지 파일에 lazy load를 적용하는 방법을 설명합니다.
작업 순서
1. 계정에 자바스크립트 라이브러리 파일 업로드
- "lazysizes.min.js" 다운로드
- 스크립트 파일 크기 약 8 KB
- 소스 페이지
https://cdnjs.com/libraries/lazysizes
lazysizes - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets). - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powe
cdnjs.com
- 네이버 블로그, 카페에서는 개인 스크립트 파일의 업로드 및 실행을 지원하지 않습니다.
- 편의를 위해 카카오 티스토리 블로그 계정을 예로 들겠습니다.
- 현재 버전 5.3.2
2. index.html 파일에 구문 추가합니다.
- 티스토리 블로그 계정 스킨은 'skin.html' 파일에 구문을 추가합니다.
- 다른 도메인 계정을 사용할 경우에는 'index.html' 파일에 구문을 추가합니다.
- 모든 글 본문에 추가하여도 무방하지만, 힘들기도 하지만 추후 해당 스크립트 관련 설정들을 초기화하거나 삭제할 경우 관리의 문제가 발생합니다. 추천하지 않습니다.
이미지 소스 라인에 추가하는 것이므로 <img> 태그에 2개의 설정을 덧붙입니다.
① 클래스 추가
class="lazyload"② 'src='를 'data-src='로 변경
data-src="xxx.jpg"①, ②를 정확하게 추가하면 아래와 같은 형태가 됩니다.
<img data-src="xxx.jpg" class="lazyload">
※ 하나의 element 객체에 여러 개의 클래스를 추가할 수 있습니다. 만약 "lazy"와 "load"라는 클래스 2개가 이미 지정되어 있다면 아래와 같이 추가합니다. 클래스와 클래스 사이는 공백(space)을 둡니다. 클래스의 순서는 마음대로 지정합니다.
<img data-src="xxx.jpg" class="lazy load lazyload">※ id와 class 값에는 공백(whitespace)를 사용할 수 없습니다.
(X) id="white space"
(O) id="whitespace"
(x) class="black space"
"black space"라는 1개의 클래스 값이 아니라 "black"과 "space"라는 2개의 클래스 값을 할당한 것입니다.
(O) class="blackspace"3. index.html 파일에서 스크립트 라이브러리 파일을 호출합니다.
<script src="./images/lazysizes.min.js" async></script>
</body>- 'lazysizes.min.js' 호출
- </body> 태그 바로 윗줄에 추가합니다.
- 소스 코드는 티스토리에 적용한 것입니다.
- 티스토리 블로그 계정은 'skin.html'에 추가합니다.
- 호출 경로는 사용하는 자신의 계정 환경에 맞게 적용합니다.
4. 계정 CSS 파일에 구문 추가
img.lazyload:not([src]) {
visibility: hidden;
}- 티스토리 블로그 계정은 기본으로 사용하는 'style.css' 파일에 추가하면 됩니다.
- 이 CSS 구문을 추가하는 것은 엑박 현상을 막기 위한 용도입니다.
이미지 파일을 바로 출력하지 않기 때문에 페이지 로딩 초기에 이미지 소스 파일 부재로 인한 엑스 박스가 나타납니다. 이미지 파일 링크에 숨김(hidden) 속성을 부여하여 잠시 보이지 않게 설정하는 것입니다.
※ 1번에서 자바스크립트 라이브러리 파일 'lazysizes.min.js'를 다운로드하여 자신의 웹 계정에 업로드하라고 설명하였습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>3번의 자바스크립트 파일 호출 코드를 로컬(웹계정)에서 CDN 링크로 변경할 수도 있습니다. 이럴 경우에는 계정에 해당 파일을 업로드할 필요가 없습니다. 대신 보안 문제가 대두됩니다.
CDN으로 사용하는 'cdnjs.cloudflare.com'에서 실시간 온라인으로 파일을 제공받을 경우 파일의 변조 여부와 코드 자체의 위해 요소 유무가 보안과 직결될 수 있습니다. 그리고 CDN에 네트워크 전송 불량 문제가 발생할 경우 스크립트가 작동하지 않아서 웹페이지의 오류가 불가피합니다.
계정의 전송 속도와 계정 용량이 문제되지 않는다면 로컬(웹 계정)에 업로드하여 사용하는 것을 추천합니다.
[참고] 웹용 브라우저 수준 이미지 지연 로딩
web.dev - 웹용 브라우저 수준 이미지 지연 로딩 (web.dev)
[참고] Lazy load offscreen images with lazysizes (web.dev)
댓글