Lazy Loading?

• 사용자가 웹 페이지를 열면 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링이 됩니다.
• 이를 통해 브라우저는 웹페이지를 캐시할 수 있지만 사용자가 다운로드한 모든 콘텐츠를 실제로 볼 수 있다는 보장은 없습니다.
• 페이지에 액세스할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 액세스할 때 콘텐츠를 로드할 수 있습니다.
• lazy loading을 사용하면 페이지가 placeholder 콘텐츠로 작성되며, 사용자가 필요할 때만 실제 콘텐츠로 대체 됩니다.

Lazy Loading이란?

• lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술 입니다.
  - 이 중요하지 않은 리소스들은 필요할 때 로드가 되어야 합니다.
• 이미지와 관련된 경우에는 중요하지 않은 리소스들은 "off-screen"와 함께 동기화가 됩니다.
• 사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체합니다.
• 이미지, 비디오를 그냥 로딩하지 않고 lazy loading을 사용하는 이유는 사용자가 볼 수 없는 것들을 로딩할 가능성이 있기 때문입니다.
• 사용자가 보고 있지 않은 것들을 로딩할 때 데이터가 낭비됩니다. 무제한 요금제를 사용하는 사용자인 경우에는 상관이 없지만 제한된 요금제를 사용하는 사용자인 경우 사용자가 보고 있지 않은 화면을 로딩하는 것은 자원(돈)을 낭비할 수도 있습니다.

SEO에 미치는 영향

Search engine optimization : 검색 엔진 최적화

• lazy loading은 검색 엔진 순위에 영향을 미친다. 리소스는 placeholder 콘텐츠여서 웹사이트를 크롤링하는 검색 엔진은 리소스의 내용을 잘못 해석하거나 무시할 수 있습니다.
• 블로그 게시물과 같은 웹페이지의 전체 구성 요소를 느리게 로드하면 검색 엔진이 해당 구성 요소를 우회하여 콘텐츠가 인덱싱 되지 않아 검색 엔진 결과가 줄어들 수 있습니다.
  - 이러한 문제를 극복하는 한 가지 요령은 lazy load하는 콘텐츠에 대한 링크를 제공하는 것입니다.
  - 이렇게 하면 기본적으로 검색 엔진 크롤러가 액세스 할 수 있는 콘텐츠에서 웹페이지를 만듭니다.
• 이 방법은 기본적으로 사용자가 콘텐츠를 동적으로 로드할 수 있게 하면서 lazy load도 웹사이트를 전통적인 웹사이트로 구성합니다.

장점

• lazy loading은 콘텐츠 전달 최적화와 최종 사용자 간의 경험을 간소화 하는 균형을 맞춥니다.
• 사용자가 처음 열 때 웹 사이트의 일부만 다운로드 해야하므로 사용자에게 콘텐츠를 더 빨리 제공합니다.
• 콘텐츠가 지속적으로 사용자에게 공급되므로 사용자가 웹사이트를 이탈할 확률을 낮출 수 있습니다.
• 사용자가 한 번에 필요로 하는 경우에만 콘텐츠를 불러오므로 리소스 비용(사용자의 배터리, 시간, 시스템 리소스)이 낮아진다.

추가적인 내용들로 웹에서 적용시키는 방법등이 있지만 아직 필요치 않은 부분으로 판단해 참고 주소를 남겨놓고 다음에 필요할 때 공부하는 방향으로 설정

https://scarlett-dev.gitbook.io/all/it/lazy-loading