블로그에 플러그인들이 추가되면서 속도가 눈에띄게 느려지고 있습니다..

    현재 이 블로그 속도에 영향을 많이주는 플러그인은

    • 구글 플러스 플러그인
    • 페이스북 좋아요 플러그인
    • 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를 두번째 탭으로..

    댓글 영역을 탭으로 적용하지 않으신 분들은 이전 포스트를 먼저 참조해주세요.

     - 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에서는 로딩이 되지 않거나 위치가 잘못되는 문제가 발생합니다.


    여러번 눌러도 로딩스크립트가 한번만 실행되게 하면 되는데, 시간이 나면 적용해봐야겠습니다.

    중복 로딩부분 수정했습니다.

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 늘비오는거리
      2014.06.06 20:30 신고

      글 잘 보았습니다.
      따라 적용해보았는데, 디스커스 탭을 처음 클릭 했을때는 이상없지만, 다른 탭 클릭 후 다시 리로드 하게 되는 순간 에러가 발생하더군요. 아마도 중복된 호출로 인해 문제가 발생하는 부분이 있는 것 같습니다.

      크롬과 파이어폭스는 에러가 발생해도 다시 보여주는데까진 이상이 없었고, IE 8은 재로드시 화면을 페이지의 상단으로 옮기는 문제, IE 11은 재로딩이 실패합니다.

      디스커스 측에서는 ajax 용 코드를 따로 마련해 둔거 같더군요.

      • BlogIcon 뭐하라
        2014.06.06 21:11 신고

        아 IE에서는 미처 테스트해보지 못했네요.
        ajax를 이용하는 방법은 아직잘 알지못해서.. 공부하고 적용해봐야겠급니다 감사합니다

      • BlogIcon 늘비오는거리
        2014.06.07 00:49 신고

        아! 한가지더...
        구글에서 검색해보니 ajax 예제가 있긴 있습니다.
        http://www.paulund.co.uk/ajax-disqus-comment-system

        문제는 이런식으로 ajax를 사용하든, 지금 구현하신 자바스크립트 로드를 동적으로 구현하면 댓글 내용이 검색엔진의 인덱싱에서 제외되네용.'ㅇ';

      • BlogIcon 뭐하라
        2014.06.07 08:12 신고

        정보 감사드립니다. disqus댓글도 검색이되는줄 몰랐었네요;.
        다시한번 고민해봐야겠습니다

      • BlogIcon 뭐하라
        2014.06.18 20:21 신고

        시간이 오래지났지만.. 간단히 한번만 실행되도록 본문 내용 수정했습니다.

    • BlogIcon God's Note
      2014.12.02 23:00 신고

      안그래도 페이지 로딩속도가 늦어서 고민하던 도중에 disqus 로딩을 댓글 작성할 때 이루어지는 방법을 찾고 있었는데 뭐하라님의 이 게시글 덕분에 해결되었습니다. 정말 감사합니다.

      • BlogIcon 뭐하라
        2014.12.02 23:06 신고

        지금보니 글이 되게 어수선한데.. 적용하셨다니 능력자시군요!

    • BlogIcon 인생베팅CGV
      2017.12.23 01:36 신고

      와 정말 조금 빨라지긴 하네요! 신기하네요 감사해요!

티스토리 툴바