티스토리 블로그 빠르게 로딩시키기(애드센스,애드핏 최적화)

---

안녕하세요. 취미 사진가 나라입니다.

지난 포스팅에서 제 티스토리 로딩 속도 문제로 최적화 작업하는 내용을 리뷰 하였었는데요. 

이번에는 그 두 번째 이야기입니다.

블로그의 페이지도 사실 알고 보면 파일을 인터넷 등에서 로딩하여 읽고 화면에 표시해 주는 것인데요.

이 파일의 용량을 줄여주면 아무래도 로딩이 빨라지지 않을까요??

네.. 바로 이러한 생각을 시작으로 최적화 두 번째 이야기를 해보려 합니다.

---

우선 제 블로그의 상태를 점검해 봐야겠습니다.

구글서치콘솔

위 이미지는 Nara's BLOG의 구슬 서치 콘솔 내용 중 일부인데요.

색인 생성 범위 등은 정상인데, 핵심적인 웹 지표에서 모바일에 오류가 188개나 보입니다. 

보고서 열기로 들어가 보니...

CLS 문제

CLS 문제로 모바일에서 0.25 초과했다는 내용인데 그 영향을 받은 페이지가 188개나 된다는 내용입니다.

그래프를 보더라도 오래전부터 진행되고 있는데 계속 증가세입니다. 아무래도 발행되는 포스팅 글 수가 있으니 자연스레 증가하는 것으로 보입니다.

유효성 검사를 실시하여 정상범위에 들어오면 오류가 있다는 숫자가 줄어들기는 하지만... 이제는 계속 실패만 하고 있습니다.

모바일에서 로딩이 느리다는 이야기인데.... 어떻게 해야 좀 더 개선이 될지를 고민하다가.... 

반응형 스킨을 사용하는 제 티스토리 블로그의 HTML 파일과 CSS파일의 내용을 최대한 간소하게 만들어 주면 좋겠다는 생각으로...

우선 티스토리 스킨 편집에서 html 편집의 내용을 살펴봤습니다.

https://validator.w3.org/

The W3C Markup Validation Service

위 html 오류 검사를 통해서 html의 오류 및 경고를 다시 체크해 봤는데요..

여기서 경고 내용 중에 "자바스크립트 리소스에는 형식 특성이 필요하지 않습니다."가 가장 많더군요..

html 오류 검사

저 내용이 무슨 내용이냐 하면.. <script type="text/javascript">에서 type="text/javascript"가 필요하지 않다는 내용입니다. 

예전에는 이것을 지정해야 했는데, 요즘 브라우저들이 이걸 그냥 인식해서 필요가 없는가 봅니다.

어쨌든... 이제 알았으니.. 제 html 내용에서 type="text/javascript"을 모조리 지워 줬습니다.

---

그리고.... 불필요한 자바스크립트 파일을 줄이면 좋을 것 같은데.. 중복된 자바스크립트를 확인해 보니

구글 애드센스와 카카오 애드 핏의 자바스크립트였습니다.

보통 티스토리 블로그에 광고를 여러 개를 달게 되는데요.

구글 애드센스나, 카카오 애드 핏 모두 하나의 광고 코드씩 제공하고 있습니다. 여러 개 설치 용 코드를 주지 않고 있죠.

예를 들면...

구글 애드센스의 경우는

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 상단반응형 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="구글 애드센스 코드"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

카카오 애드 핏의 경우

<ins class="kakao_ad_area" style="display:none;" 
 data-ad-unit    = "카카오애드핏 코드" 
 data-ad-width   = "320" 
 data-ad-height  = "100"></ins> 
<script async src="//t1.daumcdn.net/kas/static/ba.min.js"></script>

 

이러한 식으로 광고 별 코드를 제공하고 있습니다.

여기서 주목할 만한 건 바로 <scrpit>입니다. 

자바스크립트가 html 안에 많으면 많을수록 페이지 로딩이 느려진다고 하는데... 이러한 광고가 바로 블로그 로딩을 느리게 한 원인인 샘인 것이죠.

그럼 이걸... 줄일 수는 없을까....

네~있습니다.~ 

구글 애드센스부터 설명해 볼게요.

각각의 광고 소스를 메모장에 복사 후에 하나의 광고를 제외한 나머지는 모두 <ins>..... </ins>까지만 남기고 다 삭제합니다.

즉, 광고 하나를 제외한 나머지의 광고에서 <script>는 다 지우는 거죠.

티스토리 플러그인을 통해서 광고를 넣으려는 칸에

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 상단반응형 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="애드센스 코드"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     
<!--adsence 실행 스크립-->	
<script>jQuery(function($){$('.adsbygoogle').each(function(){(adsbygoogle=window.adsbygoogle||[]).push({});});}); </script>
<!--adsence 실행 스크립 끝-->

이러한 식으로 넣으세요.

맨 위에는 애드센스 광고 소스에 있던 스크립트 내용을 그대로 넣고... <ins>..... </ins> 내용을 그다음에 넣고..

그리고 마지막에 

<!--adsence 실행 스크립-->	
<script>jQuery(function($){$('.adsbygoogle').each(function(){(adsbygoogle=window.adsbygoogle||[]).push({});});}); </script>
<!--adsence 실행 스크립 끝-->

이 스크립트 내용을 넣습니다.

구글 애드센스에서 (adsbygoogle = window.adsbygoogle || []). push({}); 문구가 없으면 광고가 안 나오거든요.

그런데 저렇게 수정해서 넣어주면... 그다음부터의 광고 기재하는 곳은 애드센스 광고 코드의 <ins>.... </ins>만 넣어주면 광고가 나온다는 사실~ 

애드센스 반응형 플러그인

제 경우는 총 4개의 애드센스 광고가 있는데.. 스크립트 2개만 사용하여 표출되고 있는 상태입니다.

그런데....

반응형 스킨인 제 블로그에서는 이렇게 플러그인에 스크립트를 넣어줘야 티스토리 앱에서도 광고가 보이더군요. 

그냥 html 편집에 스크립트 파일만 </body> 앞에 넣어봤는데... 티스토리 앱에서는 안 보여서 저렇게 등록하였습니다.

---

자~!! 그러면 카카오 애드 핏도 살펴봐야겠죠??

애드 핏은 반응형 등록이 없어서... 모바일과 PC 따로따로 해줘야 하는데요..

편의상 모바일로 설명드려 보면...

위 애드센스와 똑같아요.. ^^

카카오 애드핏

카카오 애드 핏 광고 소스에서 <ins>~</ins> 부분을 제외하고, 스크립트 내용 하나만 맨 위에 있으면 됩니다.

위 플러그인 기준으로 보면 기존에는 

<script async src="//t1.daumcdn.net/kas/static/ba.min.js"></script>

이 스크립트 내용이 각 광고 소스마다 붙어 있어야 했는데... 위 예시처럼 맨 위칸에 하나만 붙여놓고 나머지 칸의 광고 소스에서는 지우면 됩니다.

---

애드센스와 애드 핏 최적화... 결론적으로 이야기하면... 스크립트 내용이 중복되니 하나씩만 달자입니다.

단, 애드센스의

<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

 의  경우는 jQuery 이용해서 각각의 광고 소스에 붙이게 끔 수정을 해주면 됩니다.

<!--adsence 실행 스크립-->	
<script>jQuery(function($){$('.adsbygoogle').each(function(){(adsbygoogle=window.adsbygoogle||[]).push({});});}); </script>
<!--adsence 실행 스크립 끝-->

---

이렇게 제 블로그 html 편집과 애드센스, 애드 핏의 소스를 통해서 자바스크립트의 불필요한 부분을 삭제하였는데요.

그밖에 html과 css의 내용을 압축할 수 있는 방법이 하나 더 남아 있습니다.

http://htmlcompressor.com/compressor/

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

이 사이트를 이용하면 되는데요.

html 압축하는 방법은, 티스토리 관리자 페이지의 스킨 편집에서 html 편집의 내용을 복사하여

소스에 붙여 넣기를 합니다.

그리고 오른편 메뉴의 코드 유형을 x/html로 정하고, (표시 옵션)을 눌러 (숨기기 옵션)을 봅니다.

드래그 앤 드롭 샤셋 은 유니코드(UTF-8) 지정합니다.

나머지 "HTML 태그 및 공간"에서 "따옴표를 벗지 마십시오."는 꼭 체크해야 하고 나머지는 필요하신 것만 체크하시면 됩니다.

저는 "모든 X/html 주석 보존"을 하나 더 추가로 체크하였어요. 주석 작업을 해 둔내 용이 지워지면 나중에 html 수정이 어려울 것 같아서요..

그리고 아래 녹색 버튼 "압축"을 누릅니다.  

그다음 압축된 내용을 복사해서, 다시 티스토리 html 편집의 기존 내용을 삭제하고 붙여 넣기 하면 됩니다.

CSS도 위와 같은 방법으로 위 사이트에서 코드 유형을 css로 지정 후 압축하시고 티스토리 css편집에 기존 내용 삭제하고 붙여 넣기 하시면 돼요.

---

이렇게 해보니 티스토리 로딩 속도가 눈에 띄게 빨라졌다... 하는 건 없습니다...  구글 페이지스피드 인사이트에서 권고하는 내용도 있었기에... 수치가 조금 개선되는 정도로 보시면 될 것 같아요.

---

이전 포스팅에서는 티스토리 블로그의 html의 오류를 최대한 잡아 수정을 하였고, 오프 스크린 이미지 지연 로딩을 통해 조금이나마 개선을 시켰다면, 이번에는 html의 불필요한 문구를 제거하고, 자바스크립트도 중복되는 것을 삭제하고 작동하게 하여 html과 css를 압축까지 진행하였습니다.

그렇다면... 이제 구글 PageSpeed Insights로 다시 점검해보겠습니다.. 얼마나 개선되었을까요??

앞서 최초 테스트 때에는 모바일이 9, 데스크톱이 49 였습니다. 

PageSpeed Insights

모바일 50. 데스크톱 93으로 큰 폭으로 개선되었습니다.

하지만 이 수치는 변동이 잦아서... 여러 번 측정해서 그중 가장 잘 나온 점수를 보여드린 것입니다.

모바일을 크게 개선시키지는 못했지만... 최초 모바일이 9 였는데... 50이라는 숫자가 얼마나 어려운 건지 알 수 있을 것 같습니다.

사실 이보다 더 중요한 것은.. 이미지 용량을 낮춰 등록하는 것이 가장 큰 효과 큽니다.

2020/08/28 - [Review(리뷰)] - 티스토리 최적화 와 오프스크린 이미지 지연하기

티스토리 최적화 와 오프스크린 이미지 지연하기

---

※ 내용이 다소 이해하기 어렵고, 정석이 아닐 수 있습니다..

하나하나 부딪쳐 가며 해보고 깊은 지식 없이 작성한 내용임을 밝혀 둡니다.

아울러, 방문자 분들이 제 블로그에서 사진 로딩이나 기타 이용 시 불편함이 많이 없었으면 합니다.