뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다.
LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다.
2021.06.20 관련 글
lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com)
위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은,
<img> 태그에
'class=lazyload'를 추가하고
'src='를 'data-src='로 변경하는 것입니다.
페이지의 모든 이미지에 LazyLoad를 적용하니까
텍스트는 빠르게 출력이 되는데,
뷰포트 범위의 사정권(?)에 있는
로고 이미지, 네비게이션바의 버튼 이미지, 심벌 이미지, 간단한 등록 이미지 등이 늦게 출력이 되어
페이지를 사용하기 위한 초기 대기 시간이 오래 걸리고
웹브라우저가 이미지를 출력하기 시작하면서 화면을 다시 렌더링 하는 간섭 요소가 발생합니다.
그래서
출력 페이지에서 뷰포트에 근접한 이미지들만 LazyLoad 적용 범위에서 제외하면
페이지가 처음 로딩되는 단계에서
모든 이미지들이 출력이 되지 않은 상태에서도
필요한 메뉴 링크, 버튼 이미지, 로고 이미지 등, 접속자에게 필요한 도구는 로딩 완료된 상태가 됩니다.
한 마디로
뷰포트 범위에서는 마치 페이지의 화면 출력이 완료된 것과 같은 상태가 되어 즉시 사용이 가능합니다. 다른 이미지들이 출력될 때까지 기다릴 필요가 없습니다.
일부 이미지의 LazyLoad 적용을 해제하려면
적용 해제하려는 이미지의 관련 소스를 찾아서
<img>태그의
'class=lazyload'를 제거하고
'data-src='를 'src='로 변경합니다.
뷰포트 범위 이미지들의 LazyLoad만 해제하는 것입니다.
티스토리 블로그에서 LazyLoad를 자세하게 설명하는 페이지를 발견하였습니다. 영문 페이지를 원글 작성자 동의하에 직접 번역하여 올린 것이라고 합니다. 알기 쉽게 잘 정리한 좋은 글입니다.
댓글