블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기
블로그에 플러그인들이 추가되면서 속도가 눈에띄게 느려지고 있습니다..
현재 이 블로그 속도에 영향을 많이주는 플러그인은
- 구글 플러스 플러그인
- 페이스북 좋아요 플러그인
- Addthis 플러그인
- Disqus 플러그인
- 구글 애드센스
등이 있습니다.
좋아요류 플러그인들은 차차 제거할 계획이고, 애드센스는 어쩔 수 없이 둬야겠습니다.
Addthis와 Disqus는 버리긴 아까우니 로딩시점을 변경하여 블로그 속도를 개선해보고자합니다.
이번 포스트는 먼저 Disqus부터 손볼것입니다.
이 블로그는 현재 댓글 영역을 탭으로 구분고 있는데요, Disqus가 활성화된 탭이 아니더라도 Disqus코드가 로딩되는데 시간이 걸립니다.
따라서 평소에는 로딩되지 않다가, 디스커스 탭을 활성화 했을 때 로딩을 시킬것입니다.
Disqus 로딩 스크립트 함수화
Disqus 코드의 구조는 다음과 같을겁니다.
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '자신의 디스커스 shortname'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
빨간색 부분이 디스커스 로딩스크립트 부분입니다.
이 부분을 다음같이 바꿔서 loadDisqus라는 함수를 선언합니다.
<script type="text/javascript">
var b = 0;
function loadDisqus() {
if (b == 0) {
var disqus_shortname = '자기 Disqus Short name';
(function () {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();b++
}
};
</script>
자신의 코드를 참조해서 파란색부분을 수정해서 사용하세요. 주석부분은 삭제했습니다.
Disqus를 두번째 탭으로..
댓글 영역을 탭으로 적용하지 않으신 분들은 이전 포스트를 먼저 참조해주세요.
이미 티스토리댓글을 메인으로, 디스커스를 두번째 탭으로 설정하신 분들도 계실텐데, 그분들은 다음단계로 넘어가시면 됩니다.
순서 바꾸는 방법은 간단합니다.
<ul class="tabs">
<li class="active" rel="tab1">Disqus</li>
<li rel="tab2">티스토리 댓글:[$$_article_rep_rp_cnt_$$]</li>
</ul>
이 부분을
다음처럼 순서만 바꾸고 class="active"속성만 옮겨오시면됩니다. (tab번호는 아랫부분 코드와 일치해야해서 바꾸지 않았습니다.)
<ul class="tabs">
<li class="active" rel="tab2">티스토리 댓글:[$$_article_rep_rp_cnt_$$]</li>
<li rel="tab1">Disqus</li>
</ul>
onclick이벤트 추가하기
윗단계에서 disqus에 다음과같이 onclick 이벤트를 추가합니다.
<li rel="tab1" onclick="loadDisqus()">Disqus</li>
이제 잘 동작하는지 확인해보시면 됩니다.
버그
Disqus 탭을 여러번 클릭하게되면 중복로딩으로 에러가 발생합니다.
대부분 브라우저에서 에러가 나도 아무 문제 없으나, IE에서는 로딩이 되지 않거나 위치가 잘못되는 문제가 발생합니다.
여러번 눌러도 로딩스크립트가 한번만 실행되게 하면 되는데, 시간이 나면 적용해봐야겠습니다.
중복 로딩부분 수정했습니다.
