지연 로드는 리소스를 미리 로드하지 않고 필요할 때까지 리소스 로드를 기다리는 접근 방식입니다. 이렇게 하면 초기 페이지 로드 시 로드 및 파싱해야 하는 리소스의 양을 줄여 성능을 개선할 수 있습니다.
이 기법에는 초기 페이지 로드 중에 화면에 표시되지 않는 이미지가 가장 적합합니다. 무엇보다도 lazysizes를 사용하면 이 전략을 매우 간단하게 구현할 수 있습니다.
페이지에 L지연 크기 스크립트 추가
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
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 지연 로드를 사용해 봅니다.
실제 사례 보기
작업이 끝났습니다. 변경 내용을 실제로 확인하려면 다음 단계를 따르세요.
사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다.콘솔을 열고 방금 추가된 이미지를 찾습니다. 페이지를 아래로 스크롤하면 클래스가
lazyload에서lazyloaded로 변경되어야 합니다.
- 페이지를 아래로 스크롤할 때 이미지 파일이 개별적으로 로드되는 것을 네트워크 패널을 확인합니다.
Lighthouse를 사용하여 확인
마지막으로 Lighthouse를 사용하여 이러한 변경사항을 확인하는 것이 좋습니다. Lighthouse의 '오프스크린 이미지 연기' 성능 감사를 통해 오프스크린 이미지에 지연 로드를 추가하는 것을 잊었는지 확인할 수 있습니다.
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
- 오프스크린 이미지 연기 감사를 통과했는지 확인합니다.
완료되었습니다. 지연 크기를 사용하여 페이지의 이미지를 지연 로드했습니다.