워드프레스 외부 스크립트 지연 로딩｜async·defer 안전 적용

워드프레스 외부 스크립트 지연 로딩은 광고, 방문 통계, 채팅, 영상 위젯을 무조건 늦추는 설정이 아닙니다. 어떤 스크립트가 첫 화면 렌더링과 사용자 입력을 방해하는지 측정하고, 의존 관계와 데이터 누락 가능성을 확인한 뒤 실행 시점을 나누는 작업입니다. 잘못 지연하면 메뉴가 멈추거나 광고가 비어 보이고 통계가 줄 수 있으므로 아래 순서대로 한 그룹씩 검증하세요.

먼저 결론: 주소가 외부라고 모두 늦추지 않는다

• Network에서 3rd-party 요청의 도메인, 시작 시점과 전송량을 기록합니다.
• 해당 요청을 잠시 차단해 화면과 기능 변화를 확인합니다.
• 독립 스크립트는 async, 실행 순서가 필요한 스크립트는 defer를 우선 검토합니다.
• 사용자 상호작용 후 실행은 광고·통계 누락과 버튼 지연을 별도로 검증합니다.
• 한 번에 한 도메인 또는 한 기능만 바꾸고 원복 기준을 남깁니다.

15분 진단: 지연 후보를 숫자로 고른다

크롬 개발자 도구에서 Network를 열고 캐시 사용 중지를 켠 뒤 페이지를 새로고침합니다. 필터에서 3rd-party requests만 표시하고 Domain, Initiator, Size, Waterfall을 확인하세요. 같은 도메인의 요청 수, 첫 요청 시작 시점, 전체 전송량과 로드 완료 시점을 기록합니다. Performance 패널에서는 긴 작업이 발생한 시간과 사용자가 클릭해도 반응하지 않는 구간을 함께 봅니다.

기록 항목	확인 위치	판단 질문	조치 후보
도메인·Initiator	Network	어느 플러그인이 넣었나?	불필요한 삽입 제거
전송량·요청 수	Network	첫 화면에 필요한가?	조건부 로드·지연
긴 작업	Performance	실행이 입력을 막는가?	실행 시점 변경
기능 변화	요청 차단	없어도 핵심 기능이 되는가?	제거 또는 대체

Chrome DevTools의 요청 차단으로 후보 URL이나 도메인을 잠시 막으면 스크립트가 없을 때의 변화를 확인할 수 있습니다. 차단 후 LCP 이미지나 메뉴가 빨라져도 실제 삭제 전에는 광고, 문의 폼과 전환 기록을 점검해야 합니다. 자체 자바스크립트가 큰 경우에는 JS 번들 크기와 코드 스플리팅 점검법으로 따로 분석하세요.

async·defer·상호작용 지연의 차이

방식	다운로드	실행 시점·순서	적합한 경우
기본 script	HTML 분석 중 요청	준비되면 분석을 막고 실행	초기 화면 필수 코드
async	HTML과 병렬	준비 즉시 실행, 순서 보장 없음	독립적인 측정 코드
defer	HTML과 병렬	분석 후 문서 순서대로 실행	DOM·의존 순서가 필요한 코드
상호작용 후	클릭·스크롤 뒤 요청 가능	조건 충족 후 실행	초기 화면에 불필요한 위젯

async는 다운로드가 끝난 순서대로 실행될 수 있어 앞선 라이브러리에 의존하는 코드에 위험합니다. defer는 문서 분석 후 순서를 보존하므로 의존성이 있는 여러 파일에 더 예측 가능합니다. 워드프레스 6.3 이상에서는 개발자가 wp_enqueue_script()의 strategy 인수로 defer나 async를 지정할 수 있으며, 워드프레스가 의존성 트리에서 가능한 전략을 계산합니다. 최적화 플러그인이 HTML의 모든 script 태그를 일괄 변경하는 방식은 이 의존 정보를 놓칠 수 있습니다.

안전한 적용 순서

1. 변경 전 Network 기록과 핵심 기능 체크리스트를 저장합니다.
2. 사용하지 않는 채팅·공유·위젯 스크립트는 지연보다 제거를 먼저 검토합니다.
3. 글에만 필요한 영상·댓글 코드는 해당 화면에서만 불러오도록 조건을 좁힙니다.
4. 독립 스크립트 한 개에 async 또는 defer를 적용합니다.
5. 초기 화면에 필요 없는 위젯만 상호작용 후 로드를 시험합니다.
6. 캐시를 비우고 새 시크릿 창에서 모바일과 데스크톱을 다시 측정합니다.

페이지별 조건부 로드는 모든 화면에서 파일을 받은 뒤 늦게 실행하는 것보다 전송량을 줄일 수 있습니다. 테마 파일을 수정하기 전에는 백업과 복구 방법을 준비하세요. 최적화 플러그인은 도메인 전체보다 정확한 파일 URL이나 식별자로 작은 범위부터 조정합니다.

광고·통계 스크립트는 속도와 데이터 모두 확인한다

광고 스크립트를 첫 클릭이나 긴 시간 뒤에 불러오면 광고 슬롯이 늦게 채워지고 레이아웃이 움직일 수 있습니다. 광고 자리의 크기를 미리 확보하고 실제 노출 여부를 확인하세요. 통계 스크립트를 늦추면 페이지를 빠르게 닫은 방문자가 기록되지 않아 적용 전후 방문 수와 이벤트 수가 달라질 수 있습니다. 숫자가 줄었다고 바로 장애로 판단하지 말고 수집 시작 시점이 바뀌었는지 비교해야 합니다.

쿠키 동의 도구가 있는 사이트는 동의 전후 네트워크 요청과 태그 실행 순서를 별도로 확인합니다. 동의 관리 코드, 광고 코드와 분석 코드를 한꺼번에 지연하면 원인을 구분하기 어렵습니다. 또한 최적화 플러그인의 캐시와 CDN이 예전 HTML을 전달할 수 있으므로 설정 변경 후에는 캐시 계층별 삭제와 방문자 화면 검증 순서를 적용하세요.

변경 후 통과 기준과 원복 기준

• 첫 화면의 LCP 이미지와 주요 문구가 더 늦어지지 않습니다.
• 모바일 메뉴, 검색, 댓글, 문의 폼과 영상 재생이 첫 클릭에 동작합니다.
• 브라우저 Console에 의존성 관련 오류가 새로 생기지 않습니다.
• 광고 슬롯이 비거나 크게 움직이지 않고 통계 이벤트가 중복되지 않습니다.
• 3회 측정 중앙값에서 긴 작업 또는 전송량이 실제로 감소합니다.

성능 점수만 올랐지만 기능 오류나 데이터 손실이 생겼다면 통과가 아닙니다. 마지막 변경을 원복하고 캐시를 지운 뒤 정상 여부를 확인하세요. 측정값의 흔들림은 PageSpeed 3회 측정 기록표를 사용하면 변경 효과와 일시적 차이를 구분하기 쉽습니다.

TIP

외부 스크립트를 파일명만으로 판단하지 말고 Initiator를 따라가세요. 같은 분석 도메인도 테마와 플러그인이 중복 삽입할 수 있습니다. 요청을 누가 시작했는지 확인하면 지연 대신 중복 태그를 제거하는 더 단순한 해결책을 찾을 수 있습니다.

자주 묻는 질문

외부 스크립트는 모두 defer로 바꾸면 되나요?

아닙니다. 문서 분석 전 실행이 필요한 코드나 인라인 코드와 연결된 스크립트는 동작이 달라질 수 있습니다. 의존 관계를 확인하고 한 파일씩 시험해야 합니다.

지연 시간을 몇 초로 설정해야 하나요?

고정된 정답은 없습니다. 첫 화면에 필요한 기능인지, 방문자가 언제 상호작용하는지와 데이터 누락 허용 범위를 기준으로 정합니다. 시간보다 클릭·스크롤·화면 진입 같은 조건이 적절한 경우도 있습니다.

공식 자료

• WordPress wp_enqueue_script 함수와 로딩 전략
• WordPress 플러그인 스크립트 등록 안내
• web.dev 외부 자바스크립트 최적화
• Chrome DevTools Network 분석 안내

마무리

워드프레스 외부 스크립트 지연 로딩은 주소가 외부라는 이유만으로 일괄 적용하면 안 됩니다. 요청의 주체와 비용을 기록하고 차단 시험으로 영향 범위를 확인한 뒤, 제거·조건부 로드·async·defer·상호작용 지연 중 맞는 방법을 선택하세요. 화면 기능과 광고·통계 데이터까지 통과해야 실제 최적화가 완료됩니다.