블로그 로딩 속도 개선 - 본문상단광고 노출을 부탁해::어나일언덕

이글을 보고 있다는 것은 당연히 블로그를 운영하고 있다는 것일 테지요.

블로그를 왜 하냐고 묻는다면 많은 사람들이 치킨 값이라도 벌어보려고 라고 대답할겁니다. 뭐 개중에는 정말로 순수하게 글을 남기고 싶어하는 사람도 있을테고요.

하지만 이글을 보고 있다면 분명 전자의 대답을 할거라고 확신합니다.

애드센스에서 링크 광고 완전 중단을 발표했죠.

내년 3월이면 그렇게 되는데 이 블로그도 본문 중간 링크 광고가 수익의 상당부분을 차지해서 걱정이 많습니다. 게다가 아직 3월이 아닌데도 며칠 전부터 기존의 링크광고 노출수가 엄청나게 줄어드는 사태가 발생하여 벌써부터 수익에 영향을 주고 있습니다.

어쩔 수 없이 다른 광고에서 이를 벌충 기대를 할 수 밖에 없는데 그래도 수익이 높은 광고는 가장 먼저 눈에 띌 확률이 높은 본문 상단 광고 입니다.

하지만 본문 상단 광고는 블로그 페이지 로딩이 늦으면 블로그를 아래로 휙휙 내려버려서 자칫 노출은 되어도 블로그를 방문한 사람의 눈에 보이지도 못하는 운명에 처하기 쉽다는 단점이 있습니다. 눈에 들어와야 눌러볼 기회라도 생길텐데 말이죠.

본문 상단 광고 노출을 보장 하기 위해서는 빠른 블로그 로딩 속도가 뒷받침 되어야 합니다.

그리하야!!
내 블로그는 왜 로딩이 느려서 상단광고 노출이 잘 안되는지 파악하는 방법에 대해 알아보겠습니다.

티스토리 블로그 로딩 속도 측정 방법

우선 크롬(Chrome)이나 엣지(Edge) 브라우저가 필요 합니다. 윈도우를 사용하는 분이라면 당연히 엣지 브라우저는 있을테고 아니라면 보통 크롬을 자주 사용하니 이 단계에 대한 설명은 필요 없을 듯하고

크롬이나 엣지 브라우저를 시크릿 모드로 실행하는 것을 권장하는데 왜냐하면 제대로된 로딩 속도 테스트를 위해서는 캐시를 다 지워야 하기 때문에 애초부터 일반 모드에서 하면 캐시를 다 지워버려서 캐시야 다시 모이면 되긴 하지만 캐시 저장을 안하는 모드에서 하는게 속편합니다.

혹시 항상 시크릿 모드로 실행하는 방법이 궁금하다면 아래 링크를 확인!!

브라우저별 항상 시크릿 모드 시작 설정 방법 크롬(Chrome), 엣지(Edge), 웨일(Whale) 익스플로어(Explore

인터넷 방문 기록을 남기기 싫어하는 사람을 위한 브라우저별로 항상 시크릿 모드 시작하도록 하는 방법 입니다. 개인 정보 보안 유지를 중요하게 생각하는 요즘 시대!! 중고 자동차 가격이 궁

annihill.tistory.com

시크릿 모드(단축키 : Ctrl+Shift+N)를 켜서 실험하려는 블로그의 주소를 입력하고 F12를 눌러 개발자 모드로 들어갑니다.

오른쪽 화면에서 [Network] 탭을 선택 후

왼쪽 화면에서 새로고침 버튼에 마우스 우클릭 [캐시 비우기 및 강력 새로고침]을 선택 하면

오른쪽 아래에 결과값이 나오며 Time을 눌러 시간을 많이 잡아먹는 요소들을 볼 수 있습니다.

실험 결과는 거의가 애드센스 광고 로딩 시간이 차지 하였습니다.

결론적으로 광고 노출이 잘되게 블로그 로딩 속도를 줄이려면 광고를 줄여야 한다는 모순이 발생하였네요.

광고 이외에 많은 시간을 차지하는 것이 폰트 CSS 관련한 것이었는데 광고를 없애는 것은 말이 안되기에 이 로딩 속도를 조금이나마 줄여 보는 방법에 대해 알아 보았습니다.

CSS 압축하기

블로그 관리 화면에서 [꾸미기] -> [스킨편집]

스킨편집 화면에서 [HTML 편집] - > [CSS]를 선택 해줍니다.

CSS 편집창에서 Ctrl+A 로 전체 선택을 해서 Ctrl+C로 복사를 한 후

혹시 모르니 백업부터 하시길 권장 합니다.

아래 링크로 갑니다.

https://htmlcompressor.com/compressor/

HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.

Choosing the correct Code Type makes the compression of your code more safe and effective. Choosing the wrong option may lead to fewer optimizations or errors. There are 3 main groups, x/html, CSS and JavaScript. Select JavaScript when you want to compress

htmlcompressor.com

Source 창에 복사한 CSS 코드를 붙여 넣고