64 사이트 속도 높이기 Image Lazy Loading
64.1 이미지 로딩상태 확인
위 그림은 페이지에 접속시
페이지에서 사용되는 모든 이미지가 로딩 된 화면입니다.
Image lazy loading은
현재 화면에 필요한 이미지만 불러오는 기능입니다.
예를 들어
현재페이지 10개 이상의 이미지를 보여주는 페이지라면
사용자가 방문 했을때 모든 이미지를 로딩합니다.
사용자는 아래로 스크롤해서 이미지를 보지 않고
1~2번째 이미지만 보고 떠났을경우
사이트는 이미지를 전부 불러온 상태이기 때문에
사이트가 열리는 시간 지연 / 메모리 /네트워크 대역폭의 낭비가 발생합니다.
64.2 Image lazy loading 적용하기
<body>
<script src="{% static 'js/lazysizes.min.js' %}"></script>
</body>
lazysizes.js를 body태그 위에 넣어주세요
<img class="lazyload" data-src="https://.........">
img태그 class에 lazyload와 src를 data-src로 변경해주시면 됩니다.
64.3 Image lazy loading 적용확인하기
개발자모드(F12) > network> img 로 확인하시면
31.subnet01.png 로딩을 확인할 수 있습니다.
화면을 아래로 내리면 이미지가
순차적으로 로딩 되는것을 확인하실 수 있습니다.
lazysizes.min.js
내용 복사해서 파일로 만드세요^^
Comments
Login: