애드센스 로딩 속도 광고 빨리 나오게 하는 방법에 대해서 알아보겠습니다. 자신의 웹사이트를 방문하는 방문자의 입장에서 컨탠츠에 관심이 있고 광고에는 관심이 없는 경우가 많습니다. 특히나 광고가 늦게 뜨면 빈 여백으로 남게 되는데, 이런 것이 페이지 속도를 늦추고 수익에 영향을 가져옵니다. 이에 대해서 알아보겠습니다
애드센스 로딩 속도
사실상 웹페이지 로딩 속도보다 느린 애드센스의 로딩 속도를 개선하는 방법에서 확실한 방법은 없습니다. 웹페이지의 최적화와 광고는 다르기에 서버 반응 속도가 달라 발생하는 조회 가능 수치를 개선을 해야 합니다
이는 웹페이지에 관련 스크립트를 구현해 웹페이지 로딩을 인위적으로 조절하여서 광고와 콘텐츠를 어느 정도 동기화 할 수 있는 것으로 페이지가 로딩된다는 기대와 함께 지연 대기 시간을 짧게 느껴지게 만드는 효과가 있습니다
코드
<body>
<!--로딩 대기-->
<div id="loadOverwrapper">
<div class="loader"></div>
</div>
웹페이지의 <body>가 시작하는 부분에 추가하면 되겠습니다
애드센스 광고 빨리 나오게 하는법
<!--로딩 대기-->
<script> function rmLoadOverwapper({
document.querySelector("#loadOverwrapper").style.display="none";
}
try {
document.querySelector("iframe[onload*='google']").onload=function(){ rmLoadOverwapper();
}
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
catch(err) {
setTimeout(function(){
rmLoadOverwapper();
}, 2500);
}
</script>
</body>
를 </body> 앞에 다음 스크립트를 넣어줍니다.
/* 로딩 사이클 애니메이션*/
. loader {
margin: 5% auto;
height: 100px;
width: 100px;
border: 6px solid #fff;
border-right-color: #c30;
border-top-color: #c30;
border-radius: 100%;
-webkit-animation: spin 800ms infinite linear;
animation: spin 800ms infinite linear;
}
@-webkit-keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
마지막 CSS 페이지에 넣어주고 저장 후 확인해 봅니다
티스토리