현대 웹 개발에서는 페이지 로딩 속도가 사용자 경험과 SEO에 중대한 영향을 미칩니다. 이 글에서는 비동기적으로 스크립트를 로드할 수 있는 async와 defer 속성에 대해 알아보고, 이를 효과적으로 활용하는 방법을 단계별로 소개하고자 합니다.
async와 defer의 기본 개념 이해하기
JavaScript는 기본적으로 HTML 문서가 위에서 아래로 순차적으로 해석되고 스크립트가 즉시 실행되는 구조이기에, 필요한 경우 페이지 로딩이 지연될 수 있습니다. async와 defer 속성은 이런 지연을 최소화하기 위해 사용됩니다.
async 속성을 사용하면 스크립트가 HTML 구문 분석과 병행하여 다운로드되고, 다운로드가 완료되는 즉시 실행됩니다. 한편, defer 속성에서는 스크립트가 HTML 구문 분석을 방해하지 않고 페이지가 모두 로드된 후에 실행됩니다.
따라서 async는 스크립트 간에 의존성이 없을 때 유용하고, defer는 스크립트 간 의존성이 있는 경우에 더 적합합니다.
async와 defer 속성 선택의 실제 사례
웹사이트에서 광고 스크립트나 분석 추적 스크립트처럼 페이지 렌더링보다 빠르게 동작할 필요가 없는 경우, async 속성을 사용할 수 있습니다. 이러한 스크립트는 페이지의 주요 콘텐츠에 크게 영향을 미치지 않기 때문에, 비동기적으로 실행되더라도 무방합니다.
예를 들어, Google Analytics 스크립트를 불러올 때 다음과 같이 사용할 수 있습니다:
<script async src="https://www.google-analytics.com/analytics.js"></script>
반대로, 페이지의 DOM 요소에 조작을 가하는 스크립트일 경우 defer 속성을 사용하는 것이 좋습니다. 이러한 스크립트는 DOM이 완전히 준비된 후에 실행되기 때문에 안전하게 DOM 요소를 다룰 수 있습니다.
예를 들어, 페이지의 메뉴를 조작하는 JavaScript 라이브러리를 호출할 때 다음과 같이 사용할 수 있습니다:
<script defer src="menu.js"></script>
성능 최적화를 위한 고급 활용 방법
웹 사이트의 성능을 최적화하기 위해 async와 defer를 더욱 전략적으로 활용할 수 있습니다. 중요 스크립트와 중요하지 않은 스크립트를 분리하여, 주요 스크립트는 defer로 처리하고, 중요하지 않은 스크립트는 async로 처리합니다. 이렇게 하면 사이트의 초기 렌더링 속도를 극대화할 수 있습니다.
당신의 사이트는 여러 외부 스크립트를 사용하고 있을 가능성이 큽니다. 이러한 경우, 크리티컬 렌더 경로(Critical Rendering Path)를 단축시키기 위해 적절한 속성을 사용해 스크립트를 최적의 순서로 로드하는 것이 중요합니다.
예를 들어, 페이지의 스타일과 레이아웃에 바로 영향을 미치는 스크립트는 defer로 설정하고, 사용자 행동 추적과 같은 백그라운드 기능은 async로 분리하는 것입니다. 이 방법을 적용하면, 초기 페이지 로드 시간이 대폭 감소할 수 있습니다.
최종적으로, 웹사이트의 특성과 필요에 따라 async와 defer를 적절히 활용하여 최적의 성능을 구현해 보세요!