많은 사람들이 웹 페이지 로딩 속도에 대해 고민하고 있습니다. JavaScript 파일은 웹 페이지의 로딩 성능에 큰 영향을 미칠 수 있는데요, 이를 최적화하기 위한 방법 중 하나가 바로 defer 속성입니다. 이번 글에서는 defer 속성이 무엇인지, 왜 중요한지, 어떻게 사용하는지에 대해 단계적으로 알아보겠습니다.
Defer 속성이란 무엇인가?
먼저 defer 속성이 무엇인지 이해하는 것이 중요합니다. 이는 HTML의 <script> 태그에 추가할 수 있는 속성으로, JavaScript 파일이 완전히 다운로드된 후에도 HTML 문서의 파싱이 완료될 때까지 실행을 지연시킵니다. 이렇게 하면 JavaScript 로직이 DOM 조작을 필요로 할 때 안전하게 작동하도록 보장할 수 있습니다. 기본적으로 JavaScript는 순차적으로 로드되기 때문에, defer 속성을 사용하면 불필요한 대기 시간을 줄일 수 있습니다.
예를 들어, 다음과 같이 스크립트를 HTML의 head 섹션에 포함시킬 수 있습니다:
<script src="script.js" defer></script>이렇게 하면 문서의 파싱이 끝난 후, 스크립트가 실행됩니다. 따라서 페이지 로드 성능을 개선할 수 있습니다.
Defer와 Async의 차이점
defer와 자주 비교되는 속성으로는 async가 있습니다. 이 둘의 차이를 이해하면 적재 적소에 더욱 효과적으로 활용할 수 있습니다. 기본적으로 async는 스크립트를 비동기적으로 다운로드하고, 다운로드가 완료되는 즉시 실행합니다. 이는 스크립트가 페이지 파싱을 방해하지 않지만, 스크립트 실행이 문서의 파싱 순서에 따라 불확실해질 수 있다는 단점이 있습니다.
한편, defer는 HTML 문서의 파싱이 완료된 후 스크립트를 순차적으로 실행합니다. 그러므로 DOM을 조작해야 하는 스크립트에 적합한 방식입니다.
간단한 예를 통해 두 차이를 살펴볼 수 있습니다:
<!-- Async Usage -->
<script src="asyncScript.js" async></script>
<!-- Defer Usage -->
<script src="deferScript.js" defer></script>async는 독립적인 스크립트에, defer는 DOM 조작이 필요할 때 적절하게 사용됩니다.
어디서 Defer를 사용해야 하나요?
defer를 사용할 때 가장 적합한 용도로는 페이지 초기 로드 시 가장 필수적인 스크립트입니다. 대부분의 경우, DOM 요소를 조작하거나, 이벤트 바인딩을 해야 하는 스크립트에 defer를 사용해야 합니다. 특히, 사용자 입력에 의해 트리거되는 스크립트는 사용자의 행동이 페이지를 완전히 로드해야만 하기 때문에 defer를 사용하는 것이 좋습니다.
예를 들면, 사용자 분석 툴이나 광고 추적 코드에는 async를, 페이지의 구성 요소를 조작하는 스크립트에는 defer를 사용하면 좋습니다.
Defer 사용의 장점
defer을 사용함으로써 얻을 수 있는 주요 장점은 웹 페이지의 초기 로딩 시간 단축입니다. 스크립트 다운로드와 실행이 병렬적으로 진행되기 때문에, 사용자는 빠르게 콘텐츠를 볼 수 있게 됩니다. 이는 특히 모바일 네트워크 환경에서 중요합니다.
또한, 모든 스크립트를 순서에 맞게 실행할 수 있기 때문에 코드 로직이 꼬일 가능성을 줄이며, 유지보수가 쉬워집니다. 이는 복잡한 웹 애플리케이션에서 큰 장점입니다.
Defer가 지원되지 않는 환경에서의 대안
일부 구형 브라우저에서는 defer 속성을 지원하지 않을 수 있습니다. 이러한 경우를 대비해 대체 방법으로 JavaScript 로직을 따로 파일로 두지 않고 내용이 있는 스크립트를 body의 마지막에 두는 방식으로 대체할 수 있습니다. 이렇게 하면 문서의 파싱이 완료된 후 스크립트가 실행되므로, 어느 정도 동일한 효과를 얻을 수 있습니다.
예를 들어, 파일의 끝 부분에 다음과 같이 스크립트를 배치할 수 있습니다:
<body>
...
<script>
// JavaScript code here
</script>
</body>결론
defer 속성을 올바르게 사용하는 것은 웹 페이지의 성능 최적화에 있어 매우 유용한 도구가 될 수 있습니다. 적절한 곳에 사용함으로써 사용자 경험을 향상시킬 수 있으며, 로드 속도를 개선해 궁극적으로 웹사이트 사용자 유지에 기여할 수 있습니다. 이제 defer와 async의 차이점을 이해하고, 실제 프로젝트에서 어떻게 사용할지 계획해보세요. 더 나은 사용자 경험을 위해 defer 속성을 적극 사용해보세요!