PageSpeed Insights에서 사이트 속도 확인을 하면 성능 진단 결과에서 '타사 코드의 영향 줄이기'를 볼 수 있습니다. 블로그 성능을 저하시키는 타사 코드에는 Google AdSense, Google Analytics, Google Fonts 등이 있습니다.
사이트 속도는 광고를 표시하기 위해 삽입한 애드센스 코드로 인해 애드센스 광고를 게시하기 전보다 애드센스 광고를 게시한 후 사이트를 로드하는 데 시간이 오래 걸리고 점수가 낮아지는데, 이 문제는 최상위 콘텐츠가 로드된 후에 애드센스 스크립트가 로드되도록 애드센스 스크립트를 비동기식으로 지연시키면 해결할 수 있습니다.
Lazyload AdSense 적용
기존 자동광고 애드센스 코드를 삭제하고 아래 코드의 형광펜 부분을 자신의 ca-pub으로 교체한 후 붙여넣으세요.
<script>/*<![CDATA[*/
var lazyadsense = false; window.addEventListener("scroll", function(){ if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) { (function() { var ad = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; ad.setAttributeNode(crs); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890xxxxxx'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyadsense = true; } }, true)
/*]]>*/</script>기존 광고 코드는 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890xxxxxx" crossorigin="anonymous"></script>와 같은 형태로 </head> 또는 </body> 앞에 삽입하였을 것입니다.
위 작업을 완료했다면 PageSpeed Insights로 사이트 속도를 확인해보세요. 성능 항목에서 '타사 코드의 영향 줄임' 부분에 애드센스 관련 항목이 표시되지 않고 성능의 점수가 20~30점의 향상한 것을 확인할 수 있습니다.
올바른 애드센스 광고 단위 작성
아래와 같이 광고를 추가하면 추가된 광고마다 애드센스 adsbygoogle.js가 로드되므로 블로그를 로드하는 데 시간이 오래 걸리고 태그 오류의 원인이 될 수 있습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-01234567890XXXXX"crossorigin="anonymous"></script>
<!-- Google Ads -->
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-01234567890XXXXX"
data-ad-slot="12345XXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>위 코드에서 형광펜으로 표시된 부분은 이미 추가했으므로 광고 단위에 붙어 있는 코드는 필요하지 않습니다. 각 광고 단위 삽입 시 표시된 부분을 삭제하고 추가하세요.