웹 개발에 있어 페이지 로딩 속도는 사용자 경험 및 SEO에 있어 매우 중요합니다. 그 중에서도 defer 속성은 스크립트 로딩을 최적화하는 데 큰 역할을 합니다. 이번 글에서는 defer 속성의 활용 방법을 자세히 살펴보고, 실제 프로젝트에서 적용할 수 있는 실질적인 팁과 예제를 제공합니다.
Defer 속성이란?
defer 속성은 HTML 스크립트 태그에 추가되어, 외부 스크립트를 병렬로 내려받으면서 HTML 문서의 구문 분석이 끝날 때까지 실행을 지연시키는 기능을 합니다. 페이지의 콘텐츠가 빠르게 로드되도록 보장하며, 사용자는 보다 나은 경험을 누릴 수 있습니다.
예를 들어, 다음과 같이 사용할 수 있습니다:
<script src="app.js" defer></script>Defer와 Async의 차이점
async 속성과 defer 속성은 모두 스크립트 로딩을 비동기적으로 처리하지만 차이가 있습니다. async는 스크립트가 준비되면 바로 실행되므로, HTML 구문 분석 중간에 발생할 수 있습니다. 반면, defer는 모든 HTML 구문 분석이 완료된 후 스크립트가 실행됩니다.정교한 콘텐츠와 상호작용이 중요한 경우, defer가 더욱 적합합니다.
Defer 속성을 사용하는 이유
Defer 속성 사용의 주요 이유 중 하나는 렌더링 차단을 방지하는 것입니다. 스크립트 태그가 페이지 상단에 있을 경우, 브라우저는 HTTP 요청을 보내기 전에 이를 처리하느라 콘텐츠 렌더링이 지연될 수 있습니다.
하지만, defer를 사용하면 페이지의 시각적 요소들이 먼저 로드되어 사용자에게 빠르게 노출됩니다.
효율적인 Defer 활용법
모든 스크립트에 무조건 defer를 적용하기보다는, 페이지 기능에 따라 적절히 사용하는 것이 중요합니다. 예를 들어, 페이지에 반드시 필요한 초기 JavaScript는 defer 없이 로드할 수 있으며, 비필수 스크립트는 defer를 사용해 로딩 우선순위를 조절할 수 있습니다.
다음과 같이 적용해 보세요:
<!-- 필수 스크립트 -->
<script src="essential.js"></script>
<!-- 비필수 스크립트 -->
<script src="non-essential.js" defer></script>
브라우저 호환성
defer 속성은 대부분의 현대 브라우저에서 지원되지만, IE9 이하 버전에서는 예외가 발생할 수 있습니다. 이 경우, 스크립트가 실행되지 않거나 예기치 않은 동작을 할 수 있으니, 프로젝트 요구에 따라 폴리필 사용을 검토해 볼 필요가 있습니다.
Defer 사용 시의 주의점
defer 속성은 HTML 문서 파싱 후 스크립트를 실행하므로, 스크립트 간 종속성이 있을 경우 선후 관계를 주의해야 합니다. 실행 순서가 중요한 스크립트들은 이후에 로드되도록 파일 트리를 구성하여 놓치지 않도록 합니다.
Ex:
<script src="lib1.js" defer></script>
<script src="app.js" defer></script>
이와 같은 방법을 통해 페이지의 로딩 성능을 최적화하고, 사용자에게 원활한 웹 경험을 제공할 수 있습니다. Defer는 쉬운 속성임에도 기대 이상의 효과를 보여줄 수 있는 중요한 도구입니다. 오늘 소개드린 팁을 활용해 여러분의 웹 페이지 속도를 한 단계 더 올라갈 수 있도록 도전해보세요!