5분만에 티스토리 로딩 화면 만드는 방법(애드센스 광고 느리게 뜰 때)

애드센스 광고가 느린 속도로 뜰 때 해결할 수 있는 방법,

애드센스를 달고 보니 티스토리 글이 로딩되고 몇초가 지난 후에야 애드센스 광고가 로딩된다는 사실을 알게 됐다

상단 애드센스 광고가 노출되기도 전에 밑으로 죽죽 내려버린다면 상단 애드센스는 노출이 전혀 안되는 셈이다

문제를 해결하기 위해 몇가지 방법들을 생각해 보다 발견한 해결책 중 가장 그럴듯 하면서

내 티스토리를 하나의 브랜드로서 알릴 수 있는 긍정적인 효과까지 줄 수 있는 방법은

티스토리에 0.8초 정도의 로딩 화면을 넣는 방법밖에 없다

이 포스팅을 누른 여러분들도 슈가는 설탕 로고가 손을 흔들고 있는 gif 이미지를 분명히 봤으리라

움직이는 gif 이미지로 지루하지 않게 애드센스 광고가 뜨는 시간 동안 글을 잠시 가려주는 것이다

1. gif 이미지 업로드

스킨 편집 - html 편집을 누르면 나타나는 창에서

상단 탭중 이미지 업로드를 클릭하면 하단에 추가 버튼이 있다

추가 버튼을 클릭해서 넣고 싶은 로딩 이미지를 일단 업로드 해야 된다

이미지를 업로드 하고 나면 알맞은 이미지 주소가 나타나는데 이 이미지 주소를 코드에서 사용해야 한다

images/sugar.gif가 내가 업로드한 이미지의 주소로 코드에서 경로값으로 사용할 때는 ./images/sugar.gif의 식으로 사용한다

스킨 편집 - html 편집에서

<body> 코드 바로 아래에 다음 이미지에서 블럭친 코드를 넣어준다(스크립트 + 코드)

중간에 초록색 글씨로 보이는 800이라는 숫자가 로딩이미지를 보여주는 시간이다
800은 0.8초를 말한다
가령 1초로 설정하고 싶다면 1000을 1.5초는 1500을 800이라는 숫자 대신 넣어주면 된다
하단 img 태그 내부에 있는 width는 이미지 크기(너비)를 말한다 width="500" 부분은 삭제해도 상관없다
나는 애초에 이미지를 너무 크게 만들어버려서 width로 이미지 크기를 조정해 준 것이다
이미지 경로는 앞에 이미지 업로드에서 본 이미지 주소 앞에 ./ 만 붙이면 된다

html 코드를 넣어줬다면 이미지가 정중앙에 똑바로 잘 나타날 수 있도록 css를 조정해줘야 한다

css탭 제일 하단에다 블럭 친 코드를 넣어주면 된다

css까지 저장한 후 확인해 보면 로딩화면이 정상적으로 출력되는 걸 확인할 수 있다

도움이 된 글
https://websiteseo.tistory.com/ [애드센스 광고가 웹 사이트 속도 보다 느린 문제로 웬 페이지 로딩 동기화 시도]
스크립트는 위 블로그에서 전적으로 가져왔으며, html코드와 css는 보다 간단하게 일부 수정했다

로딩 이미지 크기를 500px 로 맞춰놨더니 모바일에서 로딩 이미지가 제대로 나오지 않는다

그래서 모바일에서 이미지 크기를 변경하는 css를 추가해줬다

블럭 친 코드만 추가해 주면 된다

2166줄 코드는 pc로 볼 때는 로딩 이미지 너비를 500px로 설정하겠다는 코드이고

2168~2169줄 코드는 모바일에서 볼 때는 이미지 너비를 50%로 줄이겠다는 의미의 코드다