defer 속성은 문서 파싱 후에 스크립트를 실행하지만, 문서 로딩이 끝난 후에 실행됩니다. 반면, async 속성은 스크립트를 비동기적으로 다운로드하고 다운로드가 끝난 즉시 실행되지만, 다운로드 순서에 따라 실행 순서가 보장되지 않습니다.

또 다른 방법으로는 뷰포트 내에 스크롤되거나 특정 이벤트가 발생했을 때 스크립트를 로드하는 레이지 로딩(Lazy Loading)을 적용하는 것이 있습니다. 이는 페이지 초기 로딩 시간을 단축시키고 사용자 경험을 향상시킬 수 있는 좋은 방법입니다.

더 많은 방법과 예시는 아래 레퍼런스를 참고하세요.

레퍼런스:

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#attr-async
• https://web.dev/async-defer/
• https://web.dev/lazy-loading/