구글애드센스 광고 스크립트 지연 로딩으로 웹사이트 속도 향상시키는 방법

<!-- AdSense 지연 로드 구현 -->
<div id="adsense-container">
   <!-- 광고가 이곳에 로드됩니다 -->
</div>
<script>
// 페이지 로드 완료 후 AdSense 스크립트 로드
document.addEventListener('DOMContentLoaded', function() {
   // 약간의 지연 후 광고 로드 (2초)
   setTimeout(function() {
       loadAdSense();
   }, 2000);
});
// Intersection Observer를 사용한 대안 (스크롤 시 보이는 영역에 들어올 때 로드)
/*
document.addEventListener('DOMContentLoaded', function() {
   const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
           if (entry.isIntersecting) {
               loadAdSense();
               observer.disconnect(); // 한 번 로드 후 관찰 중단
           }
       });
   });
   
   observer.observe(document.getElementById('adsense-container'));
});
*/
function loadAdSense() {
   // 1. AdSense 스크립트 로드
   const adsScript = document.createElement('script');
   adsScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-83*****8963911';
   adsScript.async = true;
   adsScript.crossOrigin = 'anonymous';
   adsScript.onload = function() {
       // 2. 스크립트 로드 완료 후 광고 표시
       const adsContainer = document.getElementById('adsense-container');
       
       // 광고 요소 생성
       const adIns = document.createElement('ins');
       adIns.className = 'adsbygoogle';
       adIns.style.display = 'block';
       adIns.setAttribute('data-ad-client', 'ca-pub-83445*******63911');
       adIns.setAttribute('data-ad-slot', '1490*****682');
       adIns.setAttribute('data-ad-format', 'auto');
       adIns.setAttribute('data-full-width-responsive', 'true');
       
       // 컨테이너에 광고 요소 추가
       adsContainer.appendChild(adIns);
       
       // 광고 표시 요청
       (adsbygoogle = window.adsbygoogle || []).push({});
   };
   
   document.head.appendChild(adsScript);
}
</script>