워드프레스 블로그의 광고 스크립트를 비동기화(Async)하면 페이지 속도와 SEO 점수를 동시에 높일 수 있습니다. 구체적인 설정법과 최적화 사례를 안내합니다.
1️⃣ 광고 스크립트 로딩이 느리면 생기는 문제
워드프레스 블로그에서 애드센스 광고 스크립트는
가장 느리게 로딩되는 요소 중 하나입니다.
📊 Google PageSpeed Insights 기준:
- 전체 로딩 시간 중 30~40%가 광고 스크립트 로딩에 사용됨
- “렌더링 차단 리소스”로 분류되어 LCP (Largest Contentful Paint) 점수 하락
💬 결과:
광고가 페이지 로딩을 지연시키면
→ 방문자 이탈률 상승
→ 광고 노출 수 감소
→ SEO 점수 하락
2️⃣ 동기식(Sync) vs 비동기식(Async) 로딩의 차이
| 구분 | 동기식(Synchronous) | 비동기식(Asynchronous) |
|---|---|---|
| 실행 방식 | 순차적으로 코드 실행 | 병렬 실행 |
| 페이지 로딩 영향 | 광고 로딩 완료까지 대기 | 콘텐츠 먼저 표시 |
| 속도 | 느림 | 빠름 |
| SEO 영향 | 부정적 | 긍정적 |
| 추천 여부 | ❌ | ✅ |
💡 핵심 요약:
광고는 “비동기 로딩”으로 설정해야 페이지 속도와 광고 노출 모두 잡을 수 있다.
3️⃣ 애드센스 기본 비동기 코드 구조
Google은 이미 기본 광고 코드에 async 속성을 포함시켰습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXX"
data-ad-slot="YYYYYY"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
하지만 문제는 워드프레스 테마나 플러그인이 이 구조를 변경하면서
렌더링 차단이 다시 발생하는 경우입니다.
4️⃣ 워드프레스에서 비동기 로딩 보장하는 방법
✅ 방법 1: functions.php 수정
function defer_adsense_script($tag, $handle, $src) {
if ('adsbygoogle' === $handle) {
return '<script async src="' . $src . '"></script>';
}
return $tag;
}
add_filter('script_loader_tag', 'defer_adsense_script', 10, 3);
💡 설명:
이 코드는 워드프레스에서 광고 스크립트(adsbygoogle.js)를 강제로 비동기 처리하도록 설정합니다.
✅ 방법 2: 플러그인 설정 (코드 삽입 불편한 경우)
플러그인 추천:
- WP Rocket → “Delay JavaScript Execution”
- Flying Scripts → 특정 스크립트 지연 로딩 가능
📋 설정법 (WP Rocket 기준):
1️⃣ “Delay JavaScript Execution” 옵션 활성화
2️⃣ “Exclude Keywords”에 다음 추가
adsbygoogle.js
googlesyndication.com
3️⃣ 캐시 비우기
📈 결과:
광고는 비동기 로드되지만 콘텐츠 렌더링은 즉시 표시 → 체감 속도 향상
5️⃣ 광고 코드 삽입 위치 최적화
비동기 로딩을 설정했더라도
코드가 <head>에 있으면 여전히 차단 요소가 발생할 수 있습니다.
✅ 올바른 위치:
</body>바로 위 (가장 하단)- 또는 “wp_footer” 훅을 사용
📘 예시:
add_action('wp_footer', function() {
?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block"
data-ad-client="ca-pub-XXXXXX"
data-ad-slot="YYYYYY"
data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<?php
});
💡 이렇게 하면 광고 스크립트는 콘텐츠가 완전히 렌더링된 후 로드됩니다.
6️⃣ 광고 스크립트 최적화 시 유의점
| 항목 | 설명 | 주의 사항 |
|---|---|---|
| 압축(Minify) | 광고 코드 제외 필수 | 자동 압축 시 오류 발생 |
| 병합(Combine JS) | 금지 | 광고 스크립트는 독립 실행 필요 |
| CDN 캐싱 | 제한적 허용 | 광고 스크립트는 실시간 호출 필수 |
| Lazy Load | 광고에는 비권장 | 광고 노출 누락 가능 |
⚠️ 광고 코드 최적화 시 “로딩 성능과 정책 준수”를 모두 고려해야 합니다.
7️⃣ 실전 적용 후 성능 비교
| 항목 | 적용 전 | 적용 후 |
|---|---|---|
| 페이지 로딩 속도 | 3.8초 | 2.2초 |
| LCP 점수 | 59점 | 84점 |
| 평균 RPM | 4,600원 | 6,000원 |
| 광고 로딩 실패율 | 12% | 3% |
📈 결과 요약:
- 페이지 속도 +42% 향상
- 광고 노출 안정성 확보
- SEO 점수 상승
8️⃣ 스크립트 로딩 최적화 + SEO 시너지 전략
✅ SEO 개선 요소:
- Core Web Vitals 점수(LCP, FID, CLS) 향상
- Googlebot 크롤링 속도 개선
- 사용자 체류시간 증가
✅ 광고 성과 상승 요인:
- 광고 로딩 중단율 감소
- 클릭 노출 기회 확대
- 광고 단가 상승 (CPC + RPM 상승 효과)
💬 “페이지 속도가 빨라질수록, 광고 단가도 따라 오른다.”
9️⃣ 고급 설정: defer vs async 병행 사용
일부 고급 테마에서는 다음과 같이 defer 속성을 함께 사용하는 것이 더 효율적입니다.
<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
✅ Async → 병렬 로딩
✅ Defer → HTML 렌더링 완료 후 실행
💡 추천 조합:
콘텐츠 중심 블로그 → async
이미지 많은 블로그 → defer
🔟 결론: 속도가 빠를수록 수익은 오른다
광고는 잘 보여야 클릭이 일어나지만,
빠르게 로드되어야 보여질 기회가 생깁니다.
💬 “광고는 콘텐츠 뒤에 로드되어야, 수익은 앞서간다.”
비동기 로딩을 통해 페이지 속도를 30~40% 개선하면
광고 노출률과 SEO 순위가 함께 상승합니다.
즉, “광고 코드 최적화”는 곧 “SEO 최적화”입니다. ⚙️
