【Lazy Loading】 화면 표시를 빠르게하는 간단한 방법
소개
프런트 엔드 강화 월간의 참가 기사입니다.
개요
이미지를 많이 사용하는 웹 사이트에서는 화면을 읽는 데 시간이 걸린다는 성능 과제를 항상 가지고 있습니다.
그 과제의 간단한 해소 방법으로서 「Lazy Loading」이 있습니다.
Lazy Loading이란?
Lazy Loading(지연 읽기)은 리소스를 미리 로드하는 것이 아니라 필요할 때 리소스를 로드하는 기법입니다.
요컨대, 화상을 표시하는 타이밍이 되었을 때에 처음으로 화상을 읽어들입니다.
Lazy Loading의 효과
일반 화면 읽기에서는 브라우저의 표시 영역 밖의 이미지도 사전에 로드하고 있습니다.
이렇게 하면 화면이 표시될 때까지 시간이 걸립니다.
Lazy Loading을 사용하면 브라우저의 표시 영역 밖에 있는 이미지(파선 부분)를 로드하지 않아 화면의 표시 속도를 향상시킬 수 있습니다.
구현
그럼 실제로 구현해 봅시다.
1. lazysizes.min.js 다운로드
lazysizes 을 GitHub에서 가져옵니다.
2021/05 현재 최신 버전은 5.3.1입니다.
2. lazysizes.min.js를 script 태그로 가져오기
body 닫기 태그 바로 앞에서 lazysizes.min.js를 로드합니다.
index.html <script src="lazysizes.min.js" async></script>
</body>
3. img 태그의 class 속성에 "lazyload"를 지정한다
class="lazyload" 로 lazysizes.min.js가 지연 읽기의 대상이라고 판단하게 합니다.
index.html<img class="lazyload" src="image.jpg">
4. img 태그의 src 속성을 data-src 속성으로 변경
data-src="image.jpg" 그러면 이미지가 표시 영역에 닿을 때 lazysizes.min.js가 이미지를 읽습니다.
index.html<img class="lazyload" data-src="image.jpg">
이것으로 Lazy Loading (지연 읽기)의 구현이 완료되었습니다.
검증
Lazy Loading에 따라 얼마나 변화가 있는지 확인해 보겠습니다.
검증 방법
Lazy Loading을 (a) 구현하지 않은 페이지와 (b) 구현하고있는 페이지의 2 종류를 준비하고,
캐시를 이용하지 않고 페이지를 읽었을 때의 읽기 완료 시간의 차이를 계측합니다.
두 페이지 모두 15장 정도 이미지를 로드합니다.
구현 내용
index.html<body>
<div>
<img class="lazyload" data-src="img-001.jpg">
</div>
<div>
<img class="lazyload" data-src="img-002.jpg">
</div>
<div>
<img class="lazyload" data-src="img-003.jpg">
</div>
<!-- 省略 -->
<div>
<img class="lazyload" data-src="img-013.jpg">
</div>
<div>
<img class="lazyload" data-src="img-014.jpg">
</div>
<div>
<img class="lazyload" data-src="img-015.jpg">
</div>
<script src="lazysizes.min.js" async></script>
</body>
검증 결과
(a) 구현되지 않은 페이지
모두 로드를 완료하는 데 1.47초가 걸립니다.
15장 가까이 있는 이미지를 모두 읽고 있는 탓인지 17회도 요청이 발생하고 있어 6.1MB의 리소스를 취득하고 있습니다.
LightHouse의 스코어 판정에서도 「Avoid enormous network payloads」가 경고로서 나타납니다.
(b) 구현하는 페이지
모두 로드를 완료하는 데 0.584초가 걸립니다.
표시 영역에 있는 네 개의 이미지만 가져오므로 리소스가 1.2MB로 줄어듭니다.
브라우저를 스크롤하여 이미지가 표시 영역에 연결되면 나머지 이미지가 수시로 로드됩니다.
LightHouse의 점수 판정에도 "Avoid enormous network payloads"가 나타나지 않습니다.
즉, 성능이 개선되고 있음을 알 수 있습니다.
결과
Lazy Loading은 비교적 간단하게 구현 및 도입할 수 있으며, 이미지를 많이 이용하는 웹 사이트에서는 성능이 향상될 것으로 예상됩니다.
참고
Reference
이 문제에 관하여(【Lazy Loading】 화면 표시를 빠르게하는 간단한 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RYO_nami/items/1fd75569f7d363b09308
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이미지를 많이 사용하는 웹 사이트에서는 화면을 읽는 데 시간이 걸린다는 성능 과제를 항상 가지고 있습니다.
그 과제의 간단한 해소 방법으로서 「Lazy Loading」이 있습니다.
Lazy Loading이란?
Lazy Loading(지연 읽기)은 리소스를 미리 로드하는 것이 아니라 필요할 때 리소스를 로드하는 기법입니다.
요컨대, 화상을 표시하는 타이밍이 되었을 때에 처음으로 화상을 읽어들입니다.
Lazy Loading의 효과
일반 화면 읽기에서는 브라우저의 표시 영역 밖의 이미지도 사전에 로드하고 있습니다.
이렇게 하면 화면이 표시될 때까지 시간이 걸립니다.
Lazy Loading을 사용하면 브라우저의 표시 영역 밖에 있는 이미지(파선 부분)를 로드하지 않아 화면의 표시 속도를 향상시킬 수 있습니다.
구현
그럼 실제로 구현해 봅시다.
1. lazysizes.min.js 다운로드
lazysizes 을 GitHub에서 가져옵니다.
2021/05 현재 최신 버전은 5.3.1입니다.
2. lazysizes.min.js를 script 태그로 가져오기
body 닫기 태그 바로 앞에서 lazysizes.min.js를 로드합니다.
index.html <script src="lazysizes.min.js" async></script>
</body>
3. img 태그의 class 속성에 "lazyload"를 지정한다
class="lazyload" 로 lazysizes.min.js가 지연 읽기의 대상이라고 판단하게 합니다.
index.html<img class="lazyload" src="image.jpg">
4. img 태그의 src 속성을 data-src 속성으로 변경
data-src="image.jpg" 그러면 이미지가 표시 영역에 닿을 때 lazysizes.min.js가 이미지를 읽습니다.
index.html<img class="lazyload" data-src="image.jpg">
이것으로 Lazy Loading (지연 읽기)의 구현이 완료되었습니다.
검증
Lazy Loading에 따라 얼마나 변화가 있는지 확인해 보겠습니다.
검증 방법
Lazy Loading을 (a) 구현하지 않은 페이지와 (b) 구현하고있는 페이지의 2 종류를 준비하고,
캐시를 이용하지 않고 페이지를 읽었을 때의 읽기 완료 시간의 차이를 계측합니다.
두 페이지 모두 15장 정도 이미지를 로드합니다.
구현 내용
index.html<body>
<div>
<img class="lazyload" data-src="img-001.jpg">
</div>
<div>
<img class="lazyload" data-src="img-002.jpg">
</div>
<div>
<img class="lazyload" data-src="img-003.jpg">
</div>
<!-- 省略 -->
<div>
<img class="lazyload" data-src="img-013.jpg">
</div>
<div>
<img class="lazyload" data-src="img-014.jpg">
</div>
<div>
<img class="lazyload" data-src="img-015.jpg">
</div>
<script src="lazysizes.min.js" async></script>
</body>
검증 결과
(a) 구현되지 않은 페이지
모두 로드를 완료하는 데 1.47초가 걸립니다.
15장 가까이 있는 이미지를 모두 읽고 있는 탓인지 17회도 요청이 발생하고 있어 6.1MB의 리소스를 취득하고 있습니다.
LightHouse의 스코어 판정에서도 「Avoid enormous network payloads」가 경고로서 나타납니다.
(b) 구현하는 페이지
모두 로드를 완료하는 데 0.584초가 걸립니다.
표시 영역에 있는 네 개의 이미지만 가져오므로 리소스가 1.2MB로 줄어듭니다.
브라우저를 스크롤하여 이미지가 표시 영역에 연결되면 나머지 이미지가 수시로 로드됩니다.
LightHouse의 점수 판정에도 "Avoid enormous network payloads"가 나타나지 않습니다.
즉, 성능이 개선되고 있음을 알 수 있습니다.
결과
Lazy Loading은 비교적 간단하게 구현 및 도입할 수 있으며, 이미지를 많이 이용하는 웹 사이트에서는 성능이 향상될 것으로 예상됩니다.
참고
Reference
이 문제에 관하여(【Lazy Loading】 화면 표시를 빠르게하는 간단한 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RYO_nami/items/1fd75569f7d363b09308
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script src="lazysizes.min.js" async></script>
</body>
<img class="lazyload" src="image.jpg">
<img class="lazyload" data-src="image.jpg">
Lazy Loading에 따라 얼마나 변화가 있는지 확인해 보겠습니다.
검증 방법
Lazy Loading을 (a) 구현하지 않은 페이지와 (b) 구현하고있는 페이지의 2 종류를 준비하고,
캐시를 이용하지 않고 페이지를 읽었을 때의 읽기 완료 시간의 차이를 계측합니다.
두 페이지 모두 15장 정도 이미지를 로드합니다.
구현 내용
index.html
<body>
<div>
<img class="lazyload" data-src="img-001.jpg">
</div>
<div>
<img class="lazyload" data-src="img-002.jpg">
</div>
<div>
<img class="lazyload" data-src="img-003.jpg">
</div>
<!-- 省略 -->
<div>
<img class="lazyload" data-src="img-013.jpg">
</div>
<div>
<img class="lazyload" data-src="img-014.jpg">
</div>
<div>
<img class="lazyload" data-src="img-015.jpg">
</div>
<script src="lazysizes.min.js" async></script>
</body>
검증 결과
(a) 구현되지 않은 페이지
모두 로드를 완료하는 데 1.47초가 걸립니다.
15장 가까이 있는 이미지를 모두 읽고 있는 탓인지 17회도 요청이 발생하고 있어 6.1MB의 리소스를 취득하고 있습니다.
LightHouse의 스코어 판정에서도 「Avoid enormous network payloads」가 경고로서 나타납니다.
(b) 구현하는 페이지
모두 로드를 완료하는 데 0.584초가 걸립니다.
표시 영역에 있는 네 개의 이미지만 가져오므로 리소스가 1.2MB로 줄어듭니다.
브라우저를 스크롤하여 이미지가 표시 영역에 연결되면 나머지 이미지가 수시로 로드됩니다.
LightHouse의 점수 판정에도 "Avoid enormous network payloads"가 나타나지 않습니다.
즉, 성능이 개선되고 있음을 알 수 있습니다.
결과
Lazy Loading은 비교적 간단하게 구현 및 도입할 수 있으며, 이미지를 많이 이용하는 웹 사이트에서는 성능이 향상될 것으로 예상됩니다.
참고
Reference
이 문제에 관하여(【Lazy Loading】 화면 표시를 빠르게하는 간단한 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/RYO_nami/items/1fd75569f7d363b09308
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【Lazy Loading】 화면 표시를 빠르게하는 간단한 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RYO_nami/items/1fd75569f7d363b09308텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
