웹 애플리케이션에서 Lazy Loading을 사용하여 이미지 및 비디오와 같은 미디어 파일의 로딩 성능을 최적화하는 방법을 설명하고 사용자 경험에 미치는 영향을 논의하세요. 또한 Lazy Loading을 잘못 적용했을 때 발생할 수 있는 문제점과 이를 방지하기 위한 방법을 설명해보세요.
학습 전 나의 답변
처음 렌더링시 뷰포트내에 존재하는 이미지만 우선 다운로드하는 것으로 화면에 보여지지 않는 이미지는 나중에 처리함으로써 효율적인 렌더링을 할 수 있게 하는 것을 말한다.
학습 후 나의 답변
웹 페이지 초기 렌더링 시 현재 뷰포트내에 있는 이미지만 우선적으로 다운로드하고,
뷰포트 밖에 있는 이미지들은 나중에 사용자가 해당 영역으로 스크롤할때만 필요에 따라 로드하는 기술이다.
이를 통해 초기 페이지 로딩 시간을 단축하고 불필요한 네트워크 트래픽을 줄여서
더 효율적인 웹 성능을 제공할 수 있다.
: 필요한 시점에 필요한 리소스만 로드하기 때문에 초기 페이지 로딩이 빨라지므로
<img src="image.jpg" loading="lazy">