홈페이지 첫 화면이 하얗게 잠깐 멈췄다가 뜬다면, head에 들어간 script 태그가 화면 그리기를 막고 있는지부터 보시는 게 좋습니다.
대부분은 defer나 async 속성 하나로 개선되지만, 둘을 잘못 고르면 슬라이더나 메뉴가 동작하지 않는 문제가 생깁니다.

1. async와 defer, 실행 시점이 다릅니다

두 속성 모두 파일은 HTML을 읽는 동안 함께 내려받습니다. 차이는 언제, 어떤 순서로 실행하느냐입니다.

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와 모바일에서 한 번씩 눌러 보세요.