Lazy loading

Lazy Loading

보통 유저가 웹페이지를 열 때, 전체 페이지의 컨텐츠는 한번에 다운로드되고 한번에 렌더링된다. 이는 브라우저가 웹 페이지를 캐싱하게 하지만 거기엔 유저가 다운로드 된 컨텐츠를 모두 볼거라고 확신할 수 없다.

예를 들어, 전체 포토 갤러리가 다운로드 되었지만 유저가 첫번 째 이미지만 보고 페이지를 떠난다면 그 결과로 메모리와 대역폭을 낭비하게 된다.

페이지에 액세스할 때 모든 내용을 대량로드하는 대신, 사용자가 로드가 필요한 페이지의 부분에 액세스하였을 때 컨텐츠를 로드할 수 있다.

레이지로딩을 이용하여 사용자가 필요로 할 때 페이지에 실제 컨텐츠로 대체될 부분인 placeholder 컨텐츠를 생성한다.

--> 사이즈가 큰 데이터(이미지, 동영상 등)를 로딩할 때 사용자의 화면에 나타나지 않은 이미지 모두를 로딩하면 메모리와 대역폭 낭비가 심해진다. lazy loading을 이용하면 사용자의 브라우저에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤을 하면서 이미지에 가까워지면 로딩한다.

Lazy Loading 작동법

누군가 웹페이지에 이미지나 동영상같은 resource를 추가할 때, 리소스는 작은 placeholder 컨텐츠를 레퍼런스한다. 유저가 웹 페이지를 탐색하듯, 실제 리소스는 브라우저에 의해 캐싱되어있고 유저의 스크린에 리소스가 보여지게 될 때 placeholder로 대체된다. 예를 들어 유저가 웹페이지를 로드하고 바로 떠났다면 웹페이지의 상단부분의 리소스만 로드가 된다.

Lazy Loading의 장점

1. 컨텐츠 전달 최적화와 UX의 간소화 사이의 균형을 유지한다.

2. 유저가 처음 웹사이트에 액세스했을 때 웹사이트가 필요로 하는 부분만 다운로드가 되기 때문에 유저가 컨텐츠에 더 빨리 연결될 수 있다.

3. 유저들의 페이지 체감속도가 더 빨라지기 때문에 기업들의 고객 유지율이 높아진다.

4. 전체를 다 다운로드하는 것 보다 유저가 필요로 하는 부분의 컨텐츠만 전달하기 때문에 resource cost가 낮아진다.

결론

웹 컨텐츠 최적화는 사용자의 브라우징 경험을 형성하는 중요한 부분이다. 리소스를 동적으로 로드하면 사용자가 여러 페이지로 이동하거나 브라우저를 새로고침을 할 때까지 기다릴 필요 없이 더 많은 컨텐츠를 탐색할 수 있다.

레이지로딩을 사용하는 것으로 웹사이트의 로딩속도를 향상시킬 수 있고, 대역폭을 절약할 수 있다. 또한 방해받지 않는 브라우징 세션을 제공한다. 웹사이트에 방문하는 반 정도의 유저들은 한 페이지만을 본다. 레이지로딩은 사용자가 스크롤 할 때 새 콘텐츠를 지속적으로 추가함으로써 싱글뷰의 효과를 더 높혀준다.

간단하게 말해 유저가 사이트에 접속했을 때 이미지나 동영상등의 사이즈가 큰 컨텐츠들을 한번에 전부 다운로드 하는 것이 아니라 유저가 보고있는 부분의 컨텐츠만을 로드하는 것

출처

https://blog.stackpath.com/glossary/lazy-loading/