웹 페이지를 만들 때, 적절한 스크립트 로딩 방법을 선택하는 것은 페이지 로딩 속도와 사용자 경험에 큰 영향을 미칩니다. script defer는 이러한 문제를 해결하기 위한 유용한 HTML 속성입니다. 이 글에서는 script defer의 위치와 활용 방법, 실무에서의 적용 사례를 단계적으로 알아봅니다.
Script Defer란 무엇인가?
script defer 속성은 브라우저가 스크립트를 비동기적으로 다운로드하면서 HTML 파싱을 블록하지 않도록 도와줍니다. 기본적으로 웹 브라우저는 script 태그를 만나면 HTML 문서의 파싱을 중단하고 스크립트를 싱크 방식으로 다운로드하여 실행합니다. 이는 페이지 로딩을 지연시킬 수 있기 때문에 defer 속성을 사용하면 HTML을 모두 파싱한 후 스크립트를 실행하여 **웹 페이지의 초기 로딩 속도를 개선**할 수 있습니다.
<script src="example.js" defer></script>
이렇게 사용하면 'example.js' 파일이 HTML 파싱 중간에 있더라도 모든 파싱이 끝난 후 실행됩니다.
Script Defer의 위치: 어디에 사용해야 할까?
일반적으로 script defer 속성이 적용된 스크립트는 <head> 섹션에 배치하는 것이 좋습니다.
이는 HTML 파서가 스크립트를 비동기적으로 다운로드하게 하여 DOM 구축을 빠르게 완료할 수 있게 합니다.
주의할 점은 defer는 document parsing이 끝난 후에 스크립트를 실행하기 때문에, DOM 요소에 접근하여 작업해야 하는 모든 스크립트에 매우 유용합니다.
우선적으로 실행되어야 하는 스크립트는 defer 대신 async 혹은 body 끝에 배치하는 것이 바람직합니다.
예시:
<head>
<script src="navigation.js" defer></script>
<script src="analytics.js" defer></script>
</head>
Script Defer vs. Async: 무엇이 다른가?
**Defer**는 HTML parsing이 끝난 후에 스크립트를 실행하는 반면, **async**는 스크립트 다운로드가 완료되는 즉시 실행됩니다. 따라서, script async를 사용하면 몇몇 스크립트가 HTML 파싱을 중단시킬 수 있습니다. 각 스크립트가 순서에 상관없이 독립적으로 실행이 가능하다면 async를 사용하고, 특정 순서대로 실행해야 한다면 defer를 사용하는 것이 좋습니다. 이 각각의 방법을 적절히 사용하는 것은 페이지 성능을 최적화하는 데 매우 중요합니다.
예를 들어, 분석용이나 광고 스크립트처럼 순서가 중요하지 않은 스크립트는 async로 설정할 수 있습니다.
Script Defer 활용 법: 코드 최적화 팁
script defer를 효과적으로 사용하기 위해, 페이지 내에서 사용하는 모든 외부 자바스크립트 파일이 명확하게 의존성과 순서대로 실행이 가능하도록 코드를 구성하는 것이 중요합니다. 예를 들어, 페이지 내에서 JQuery를 사용하는 경우, 그 위에 정의된 스크립트들이 모두 defer 속성을 갖도록 해야 적절한 실행 순서를 보장할 수 있습니다. 또한, 스크립트를 가능한 한 파일로 묶어서 서버 요청을 줄이는 것도 좋은 방법입니다.
예시:
<script src="jquery.js" defer></script>
<script src="custom-plugin.js" defer></script>
Script Defer로 로딩 시간 개선하기
웹 페이지의 초기 로딩 시간을 줄이기 위해, script defer를 잘 활용하는 것은 매우 효과적입니다. 특히 복잡한 자바스크립트 로직이 포함된 경우, 이러한 기법들은 사용자 경험 저하를 최소화할 수 있습니다. 여러 개의 스크립트 파일을 병렬로 로드하고, DOMContentLoaded 이벤트가 발생할 때까지 실행을 지연시키므로 인터페이스 구성에 소요되는 시간을 단축할 수 있습니다.
사용 예:
<script src="animation.js" defer></script>
<script src="ui-load.js" defer></script>
Script Defer 사용 시 주의 사항
script defer를 사용할 때 몇 가지 주의할 점이 있습니다. defer 속성은 오직 외부 스크립트 파일에서만 작동하며, inline script에는 적용되지 않습니다. 또한, 모든 브라우저에서 일관되게 동작하는 것을 보장할 수는 없으므로, 지원하지 않는 경우 fallback을 고려해야 합니다. 특히 오래된 인터넷 익스플로러 버전에서는 전혀 동작하지 않으므로 이 점을 유념해야 합니다.
추가적으로 각 브라우저 콘솔에서 오류가 발생하는지 테스트하고, 예상 작동과 일치하는지를 항상 확인해야 합니다.
script defer를 통해 웹 페이지 최적화를 시도해 봅시다. 올바른 사용으로 더 빠르고 원활한 사용자 경험을 제공할 수 있습니다!