스크립트 때문에 홈페이지 첫 화면이 늦게 뜰 때, async와 defer 고르는 기준
홈페이지 첫 화면이 하얗게 잠깐 멈췄다가 뜬다면, head에 들어간 script 태그가 화면 그리기를 막고 있는지부터 보시는 게 좋습니다.
대부분은 defer나 async 속성 하나로 개선되지만, 둘을 잘못 고르면 슬라이더나 메뉴가 동작하지 않는 문제가 생깁니다.
💡 속성 하나로 왜 속도가 달라질까요?
브라우저는 HTML을 위에서부터 읽다가 일반 script 태그를 만나면 파일을 받고 실행할 때까지 그 아래 내용을 그리지 않습니다. 채팅 상담 위젯, 분석 태그, 광고 픽셀, jQuery 플러그인이 head에 줄줄이 있으면 그만큼 첫 화면이 늦어집니다. 유지보수 의뢰로 들어오는 사이트를 보면 이런 태그가 열 개 넘게 쌓여 있는 경우도 드물지 않습니다.
1. async와 defer, 실행 시점이 다릅니다
두 속성 모두 파일은 HTML을 읽는 동안 함께 내려받습니다. 차이는 언제, 어떤 순서로 실행하느냐입니다.
| 구분 | 실행 시점 | 실행 순서 |
|---|---|---|
| 속성 없음 | 만나는 즉시 (화면 멈춤) | 적은 순서 |
| defer | HTML을 다 읽은 뒤 | 적은 순서 보장 |
| async | 다운로드가 끝나는 즉시 | 보장 안 됨 |
2. 서로 의존하는 파일은 defer
jQuery를 먼저 불러오고 그 위에서 동작하는 슬라이더 플러그인처럼 순서가 중요한 파일은 defer가 맞습니다. 여기에 async를 붙이면 플러그인이 jQuery보다 먼저 실행되는 순간이 생겨, 새로고침할 때마다 될 때도 있고 안 될 때도 있는 골치 아픈 오류가 됩니다.
<!-- head 안에서 그냥 불러오면 화면 그리기가 멈춥니다 -->
<script src="/js/jquery.min.js"></script>
<script src="/js/slider.js"></script>
<!-- defer : HTML을 다 읽은 뒤, 적은 순서대로 실행 -->
<script src="/js/jquery.min.js" defer></script>
<script src="/js/slider.js" defer></script>3. 혼자 동작하는 외부 태그는 async
구글 애널리틱스, 네이버 분석, 광고 픽셀처럼 다른 코드와 엮이지 않는 태그는 async로 두면 됩니다. 대부분의 업체가 제공하는 설치 코드에 이미 async가 붙어 있으니, 복사할 때 빠뜨리지 않았는지만 확인하시면 됩니다.
<!-- 다른 코드와 상관없는 분석·광고 태그는 async -->
<script async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXX">
</script>4. 적용 전에 꼭 확인할 점
- 본문 중간에
document.write를 쓰는 오래된 코드는 defer·async와 함께 쓰면 안 됩니다. - HTML 안에 직접 적은 인라인 스크립트에는 두 속성이 적용되지 않습니다. 이 코드가 jQuery를 쓴다면 함께 정리해야 합니다.
type="module"스크립트는 따로 적지 않아도 defer처럼 동작합니다.- 바꾼 뒤에는 메뉴, 슬라이더, 팝업, 문의 폼을 PC와 모바일에서 한 번씩 눌러 보세요.
"빠른 첫 화면은 큰 공사보다 태그 정리에서 시작되는 경우가 많습니다."
나눔웹은 유지보수 점검 때 head 안의 스크립트를 하나씩 확인해,
기능은 그대로 두고 화면이 먼저 보이도록 순서를 다듬습니다.
