Katie Hempenius
지연 로드는 리소스를 미리 로드하는 것이 아니라 필요할 때까지 리소스가 로드되기를 기다리는 방식입니다. 이렇게 하면 초기 페이지 로드 시 로드하고 파싱해야 하는 리소스의 양을 줄여 성능을 개선할 수 있습니다.
초기 페이지 로드 중 화면 밖에 표시되는 이미지가 이 기법에 적합한 후보입니다. 무엇보다도 지연 크기를 사용하면 매우 간단하게 구현할 수 있습니다.
페이지에 지연 크기 스크립트 추가
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
lazysizes.min.js이(가) 이미 다운로드되어 이 Glitch에 추가되었습니다. 페이지에
포함하는 방법은 다음과 같습니다.
- 다음
<script>태그를index.html에 추가합니다.
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
지연크기는 사용자가 페이지를 스크롤할 때 이미지를 지능적으로 로드하고 사용자가 곧 보게 될 이미지의 우선순위를 지정합니다.
지연 로드할 이미지 표시
- 지연 로드되어야 하는 이미지에
lazyload클래스를 추가합니다. 또한src속성을data-src로 변경합니다.
예를 들어 flower3.png의 변경사항은 다음과 같습니다.
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
이 예에서는 지연 로드 flower3.png, flower4.jpg, flower5.jpg를 사용해 봅니다.
실제 사례 보기
작업이 끝났습니다. 실제 변경사항을 확인하려면 다음 단계를 따르세요.
사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.콘솔을 열고 방금 추가된 이미지를 찾습니다. 페이지를 아래로 스크롤하면 클래스가
lazyload에서lazyloaded로 변경됩니다.
- 네트워크 패널에서 페이지를 아래로 스크롤할 때 이미지 파일이 개별적으로 로드되는지 확인합니다.
Lighthouse를 사용하여 확인
마지막으로 Lighthouse를 사용하여 이러한 변경사항을 확인하는 것이 좋습니다. Lighthouse의 '오프스크린 이미지 지연' 성능 감사는 오프스크린 이미지에 지연 로드를 추가하는 것을 잊은 경우 이를 알려줍니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.
- `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
- 화면 밖 이미지 연기 감사를 통과했는지 확인합니다.
완료되었습니다. 지연 크기를 사용하여 페이지의 이미지를 지연 로드해 보았습니다.