웹 페이지의 성능은 사용자 경험에 큰 영향을 미칩니다. 특히 페이지 로딩 속도는 사용자의 발길을 붙잡기 위해 중요한 요소 중 하나입니다. 오늘은 자바스크립트의 defer 속성을 이용해 DOMContentLoaded 이벤트를 효과적으로 처리하는 방법과 실용적인 활용법을 알아보겠습니다.
1단계: DOMContentLoaded란 무엇인가?
웹 페이지를 로드할 때, 브라우저는 보통 두 가지 주요 이벤트를 기다립니다: DOMContentLoaded와 load 이벤트입니다. DOMContentLoaded는 HTML 문서가 완전히 로드되고 구문 분석이 끝났을 때 발생합니다. 즉, 이미지나 스타일시트 같은 비동기 리소스를 기다리지 않습니다. 이 이벤트는 페이지가 상호작용할 준비가 되었음을 의미하며, 보통 자바스크립트를 실행하는 시점으로 적합합니다. 많은 경우, 스크립트가 이 시점에 실행되도록 하여 성능을 높일 수 있습니다.
1단계: defer 속성 이해하기
자바스크립트를 HTML에 포함할 때는 일반적으로 <script> 태그를 사용합니다. 그런데 기본적으로 이 태그는 HTML 파싱을 중단시킵니다. 하지만 defer 속성을 사용하면, 브라우저는 스크립트 파일을 비동기적으로 다운로드하여 파싱을 계속할 수 있습니다. 그리고 전체 HTML이 파싱된 후 스크립트가 실행됩니다. 이는 특히 여러 스크립트를 로드할 때 유용하며, 스크립트들이 지정된 순서대로 실행되도록 보장합니다.
2단계: defer 속성 사용해보기
defer 속성을 사용하려면 <script> 태그에 defer 속성을 추가하기만 하면 됩니다. 예를 들어, 다음과 같은 HTML을 생각해보세요:
<script src="app.js" defer></script>
여기서 app.js는 HTML 문서가 완전히 파싱된 후에 실행됩니다. 이는 사용자에게 초기 콘텐츠를 더 빠르게 표시할 수 있게 하여, 페이지의 가시적 콘텐츠 로딩 속도를 개선합니다. 이렇게 하면 특히 모바일 환경에서 그 효과가 두드러집니다.
2단계: defer와 async 비교
많은 사람이 async와 defer를 혼동합니다. 이는 비슷해 보일 수 있지만, 중요한 차이가 있습니다. async 속성을 가진 스크립트는 다운로드 후 즉시 실행되며, 이는 다른 스크립트 및 HTML 파싱을 중단시킬 수 있습니다. 반면 defer는 모든 HTML이 파싱된 후 실행되어 다른 작업을 방해하지 않습니다. 따라서 긴밀한 의존 관계의 스크립트 실행에는 defer가, 독립적인 스크립트에는 async가 적합할 수 있습니다.
3단계: 스크립트 최적화에 defer 활용
대규모 웹 애플리케이션에서는 여러 자바스크립트 파일을 효율적으로 관리하는 것이 중요합니다. defer 속성은 규모가 큰 프로젝트에서 병목 현상을 줄이고, 초기 로드 시간을 감소시키는 데 큰 도움을 줄 수 있습니다. 특히 SPA(단일 페이지 애플리케이션)에서, 처음에 필요한 스크립트는 defer로 로드하고 나머지는 필요 시 로드하는 전략을 사용할 수 있습니다. 이는 네트워크 트래픽을 줄이고, 사용자의 전반적인 경험을 향상시킬 수 있습니다.
3단계: 실제 사례 분석
실제 프로젝트에서 defer를 활용한 대표적인 예로 구글의 PageSpeed Insights에서 권장하는 자바스크립트 최적화 방안을 들 수 있습니다. 많은 기업이 이 권장 사항을 따름으로써 TTFB(첫 바이트 시간)와 FCP(최초 콘텐츠 보이기) 지표를 개선하고 있습니다. 예를 들어, 한 대형 전자상거래 웹사이트는 defer를 적용한 뒤 페이지 로딩 속도를 약 20% 개선했으며, 이로 인해 전환율이 유의미하게 상승했습니다.
3단계: 추가적인 웹 성능 개선 방법
defer 외에도 웹 성능을 최적화할 수 있는 다양한 방법이 있습니다. 예를 들어, 이미지의 크기 조정 및 최적화, CSS 압축, 캐싱 전략 활용, 서버 측 렌더링(SPR) 등의 방식이 있습니다. 이러한 방법들은 defer와 함께 사용할 때 더욱 강력한 효과를 발휘합니다. 따라서 웹 페이지의 효율성을 높이기 위해 다양한 최적화 기법을 조합하여 적용하는 것이 좋습니다.
이와 같은 defer DOMContentLoaded 활용 방법들이 웹 성능을 대폭 향상시키는데 도움을 줄 수 있습니다. 웹 개발이나 사이트 운영에 관여하고 있다면 이러한 방법들을 꼭 시도해 보고, 사용자 경험을 더욱 나아지게 만들어 보세요!