1. Lazy Loading Images:
   • 이미지를 지연 로딩하는 것은 사용자가 스크롤할 때 보이는 이미지만 로드함으로써 초기 페이지 로딩 시간을 단축시키는 데 도움이 됩니다.
   • 이미지 요소에 loading="lazy" 속성을 추가하여 브라우저가 해당 이미지를 지연 로딩하도록 할 수 있습니다.

    <img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">
   

2. Deferred JavaScript:
   • 자바스크립트 파일을 지연 로딩하여 페이지의 초기 로딩 시간을 단축할 수 있습니다.
   • defer 속성을 이용하여 스크립트를 지연로딩하고, 이를 통해 HTML 파싱 작업과 병렬로 실행할 수 있습니다.

    <script src="script.js" defer></script>
   

3. Dynamic Loading with JavaScript:
   • 웹 페이지가 로드된 후에 필요한 자바스크립트 파일을 동적으로 로드할 수 있습니다.
   • import() 함수를 사용하여 필요한 모듈을 동적으로 로드할 수 있습니다.

    import('module.js')
        .then((module) => {
            // 모듈이 성공적으로 로드된 후에 실행할 작업
        })
        .catch((error) => {
            // 로딩 또는 실행 중 발생한 오류 처리
        });
   

이러한 지연 로딩 기술을 사용하여 페이지의 로딩 시간을 최적화하고, 사용자가 필요로 하는 콘텐츠에 빠르게 접근할 수 있도록 도와줍니다.