애드센스 광고를 넣으면 속도가 떨어집니다.
특히 요즘 web vital 때문에 더 민감하게 받아지고,
구글은 JS 코드가 헤드에 들어가면 자사 광고라도
냉정하게 점수를 먹입니다.
지금까지 바닥을 기던 SEO (CLS) 향상시키면서,
애드센스 넣고 속도 향상 시키는 법 공유 해드리겠습니다.
(참고로 자동광고를 하시는 분들은 효과가 없을 것입니다.)

Adsense 코드

<style>
.abc{ display:block; }
@media(min-width: 0px) {.abc{display:inline-block; width: 336px; height: 280px; } }
@media(min-width: 768px) {.abc{display:inline-block; width: 336px; height: 280px; } }
@media(min-width: 980px) {.abc{display:inline-block; width: 728px; height: 182px; } }
</style>
                                <center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle abc" data-ad-client="ca-pub-00000000000" data-ad-slot="0000000000" data-language="ko" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위에 코드를 설명 드릴께요.

@media(min-width: 0px) {.abc{display:inline-block; width: 336px; height: 280px; } }
이것은 모바일 코드입니다. 넓이와 높이는 좋아하는 사이즈로 넣으시면 되세요.

@media(min-width: 768px) {.abc{display:inline-block; width: 336px; height: 280px; } }
태블릿 코드입니다.

@media(min-width: 980px) {.abc{display:inline-block; width: 728px; height: 182px; } }
PC 코드입니다.

중간에 당연히 ‘ 애드센스 AD ‘ 넘버와 ‘ slot 넘버 ‘ 넣으셔야 합니다.

위와 같이 코드를 적용하면, 장점이 있습니다.

헤더에 이미 광고사이즈를 배정을 해주었기 때문에 CLS 속도가 빨리진다는 것!!!!!

많이~~~~~~빨리질 것이라고 생각하고 전 이미 속도 테스트 해보았습니다.
(자동광고 시 구글에서 페이지 이동에 대하여 좋지않는 점수를 주게 됩니다.)

요새 애드센스 재미 붙여서,
더 좋은 내용 있으면 공유 드릴께요~