lazy loading

 

lazy loading이란

레이지 로딩은 on-demand loading 이라고도 불리는 온라인 콘텐츠 최적화 기법으로 웹 페이지 전체를 불러와서 한 번에 사용자에게 렌더링하는 방식 대신, 필요한 부분만 불러오고 나머지 부분은 사용자가 필요할 때까지 미루는 것으로 사용자의 데이터 낭비를 막아줍니다.
예를 들어, 사용자가 검색 엔진에서 한 이미지를 검색 했을 때, 요청한 내용으로 채워진 전체 웹 페이지가 로드됩니다. 사용자는 첫 번째 이미지가 해당 찾던 이미지라면 웹 페이지를 닫을 것이고, 이렇게 되면 로드된 나머지 이미지는 보이지 못하여 리소스가 낭비됩니다.

lazy loading을 사용하면 페이지가 placeholder 콘텐츠로 작성되며, 사용자가 필요할 때만 실제 콘텐츠로 대체 됩니다.

lazy loading의 한 형태는 무한 스크롤로, 사용자가 페이지를 아래로 스크롤 할 때 웹 페이지의 내용이 로드됩니다. 

lazy loading 장단점

lazy loading의 장점은 시간 소비와 메모리 사용량을 줄여 콘텐츠 전달을 최적화하는 점입니다. 필요한 웹페이지 중 일부만 먼저 로드되기 때문에 시간이 적게 소요되고, 나머지 부분의 로딩이 미뤄져 저장공간이 절약됩니다. 이 점들은 콘텐츠가 바로 공급되기 때문에 사용자의 경험을 향상 시킵니다. 또한, 불필요한 코드 실행을 피하고 시간과 공간 자원의 최적 사용은 cost-effective한 접근을 가능하게합니다.

lazy loading의 단점은 기존의 코드에서 코드가 더 추가되어 코드를 약간 복잡하게 만들 수 있고, lazy loading의 아직 로드되지 않은 컨텐츠의 부적절한 인덱싱으로 검색 엔진에서 웹사이트의 순위에 영향을 미칠 수 있다는 점입니다.

lazy loading의 예시

lazy loading은 사진이나 영상에 사용하거나 사용자에게 바로 보여지지 않는 페이지에 사용하는 것이 좋으며, 이를 잘 사용한 예시로는 medium이 lazy loading으로 글에서 이미지가 중요도가 낮기 때문에 나중에 불러오는 점을 예시로 들 수 있습니다.

 medium의 lazy loading 예시

---

Reference

https://youtu.be/bl9wJH1fBjw

https://velog.io/@ruinak_4127/Lazy-Loading

https://krpeppermint100.medium.com/js-%EB%A0%88%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EA%B8%B0%EB%B2%95-5e3d5dfcb4c1