LazyLoad vs PreLoad

LazyLoad란?

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 나중에 하는 기법. 나중에 필요할 때(스크롤을 내려 콘텐츠를 확인한다던가, 사용자에게 직접 마우스 클릭과 같은 입력을 요구한다던가)로드가 되게 한다.

왜 쓰는가?

예를 들어, 스크롤을 한참 내려야 할만큼 많은 이미지를 불러와야하는 페이지가 있다고 가정했을 때 그 많은 이미지를 사용자가 접속할 때 모두 불러오게 한다면 아마 사용자는 흰 화면에서 이미지가 전부 로드될 때까지 기다리다 지쳐 빠져나가버릴 것이다. 그러므로, 우선 접속 시 보이는 뷰포트 내의 이미지만 로드시키고 나머지는 LazyLoad 늦게 로드시키면 사용자 경험 측면에서 더 좋은 결과를 얻어낼 수 있을 것이다.

PreLoad란?

페이지를 읽어들이는 시점에 미리 리소스를 로딩해놓는 기법. LazyLoad와 반대로 작동한다고 봐도 무방하다. 앞서 LazyLoad의 장점을 버리고 왜 굳이 PreLoad를 쓰냐는 의문이 생길 수 있다. 쓰는 곳이 다르다. PreLoad는 페이지가 바뀔 때, 바뀔 페이지의 이미지가 클 경우 페이지가 넘어가는 속도가 느려진다. 이럴 때 PreLoad를 사용해서 이미지를 미리 로딩해놓고 페이지를 넘기는 속도를 향상시킬 수 있다.