보통의 경우, 웹페이지에 있는 모든 자바스크립트 코드와 리소스를 한꺼번에 다운로드하고 실행하려고 하면 초기 로딩 시간이 길어질 수 있습니다. 이때, 지연 로딩을 사용하면 페이지 로딩 후 필요한 자바스크립트 코드만 다운로드하여 필요한 시점에 실행하므로 초기 로딩 시간을 단축할 수 있습니다.

// 예시: 이미지 로딩 후 특정 자바스크립트 파일을 비동기적으로 다운로드하고 실행하기
window.addEventListener('load', function() {
  var script = document.createElement('script');
  script.src = 'deferred.js';
  document.body.appendChild(script);
});

위 예시에서는 window의 load 이벤트를 사용하여 페이지의 모든 요소가 로드된 후에 실행될 스크립트를 비동기적으로 다운로드하고 있습니다.

지연 로딩을 통해 DOM 초기화 시간을 단축시킬 수 있지만, 적절한 사용법과 주의가 필요합니다. 너무 많은 리소스를 나중에 다운로드하거나 실행하면 사용자 경험이 오히려 악화될 수 있습니다. 그러므로 웹페이지의 성격과 특성에 맞게 지연 로딩을 구현하고 최적화해야 합니다.

[참고 자료]

• Google Developers: Optimizing Content Efficiency
• Mozilla Developer Network: Using the Page Visibility API