페이지 로딩 속도 빨라지는 스크립트 설정 꿀팁 (Async, Defer)

자바스크립트 때문에 화면이 늦게 뜨면 방문자가 기다리지 못하고 나가버리거나, 검색 엔진 점수가 떨어질 수 있어요. Async와 Defer 속성을 잘 써서 스크립트 실행 순서만 조절해도 브라우저가 일을 훨씬 효율적으로 하게 되고, 결과적으로 검색 노출 순위도 좋아진답니다. 아래 내용을 참고해서 우리 사이트에 딱 맞는 비동기 로딩 방법을 찾아보세요.

자바스크립트 로딩 순서가 왜 중요할까요?

웹사이트 속도는 단순히 빠르면 좋은 정도가 아니라, 검색 엔진이 내 글을 읽어가고 순위를 매길 때 정말 중요하게 보는 부분이에요. 브라우저가 HTML 문서를 읽다가 스크립트 태그를 만나면, 그 파일을 다운로드하고 실행하느라 잠시 일을 멈추게 되거든요. 이걸 ‘렌더링 차단’이라고 하는데, 이러면 화면의 주요 내용이 늦게 떠서 노출 순위에도 안 좋은 영향을 줘요.

이런 문제를 해결하려면 자바스크립트를 불러오는 방식인 Async와 Defer를 상황에 맞게 잘 써야 해요. 둘 다 비동기 방식이라 파일을 따로 불러오긴 하지만, 실행되는 타이밍이 달라서 성격에 맞춰 구분하는 게 포인트예요. 무엇보다 사용자가 느끼는 속도를 높이는 게 핵심이랍니다.

로딩 방식별 특징과 추천하는 방법

로딩 방식	HTML 파싱 중단 여부	스크립트 실행 시점	주요 용도 및 장점
Default (일반)	예 (다운로드 및 실행 시)	즉시 실행	필수 실행 코드 (사용 권장 안 함)
Async	아니오 (다운로드 시)	다운로드 완료 즉시 실행	독립적인 외부 스크립트 (광고, 트래커)
Defer	아니오	HTML 파싱 완료 후	의존성 있는 스크립트, LCP 개선

Async 속성으로 독립적인 기능 가볍게 돌리기

Async는 자바스크립트를 비동기로 불러와서 문서를 읽는 도중에도 멈추지 않고 외부 파일을 가져와요. 다운로드가 다 되면 그때 바로 실행하는데, 이때만 잠깐 HTML 읽는 걸 멈추게 되죠. Async는 먼저 다운로드된 순서대로 실행돼서 다른 코드랑 순서가 꼬여도 상관없는 기능, 예를 들어 광고나 방문자 분석기 같은 걸 넣을 때 쓰면 아주 좋아요.

✔ Async 적용 예시 코드:

script async src="https://example.com/analytics.js"/script

기술적 장점: 외부 데이터를 불러올 때 막힘이 없어서 초기 반응이 빨라져요.
주의사항: 실행 순서가 뒤죽박죽일 수 있으니 라이브러리 의존성이 있는 코드에는 피하는 게 좋아요.

Defer 속성으로 사용자 경험 챙기기

Defer 속성은 HTML 문서를 다 읽고 난 뒤에 스크립트를 실행하도록 예약해두는 방식이에요. 페이지 로딩 속도에 거의 영향을 주지 않으면서도, 코드를 작성한 순서대로 실행해주기 때문에 기술적으로 가장 추천하는 방법이에요. 화면 내용이 먼저 보이니까 방문자 입장에서도 빠르다고 느끼고, 검색 노출 순위에도 긍정적인 영향을 줘요. 구글이 중요하게 보는 지표 점수를 올리는 확실한 방법이기도 하죠.

✔ Defer 적용 예시 코드:

script defer src="https://example.com/main-app.js"/script