Java Script, jQuery : 클릭 이벤트 표시 Disqus

웹 사이트의 로딩 속도를 높이고, 이미지를 압축하고, 웹 호스트를 개선하고, 웹 사이트 코드를보다 효율적으로 만들기 위해 할 수 있는 일이 많이 있습니다. 그러나 이 디자인과 관련하여 한 가지 선택은 각 페이지가 처음로드 될 때 만드는 HTTP 요청의 양을 줄이는 것입니다.

각 페이지에서 HTTP 요청의 양을 조사 할 때 Disqus에서 많은 양의 HTTP 호출이 발생하는 것을 알았습니다. 이것은 모든 웹 사이트에 배치 할 수 있는 주석 시스템이며, 페이지에 몇 줄의 Javascript를 포함시키기만 하면 어떤 사이트에도 쉽게 추가 할 수 있습니다. 사이트에서 Wordpress를 실행중인 경우 Wordpress 플러그인 만 다운로드하면 되므로 사이트에 포함하기가 훨씬 쉽습니다.

Java Script, jQuery : 클릭 이벤트 표시 Disqus

 

Disqus는 함께 제공되는 기능때문에 매우 인기를 얻었으며 자동으로 다음을 얻습니다.

- 스레드 댓글 및 답글
- 이메일 알림 및 회신
- 구독 및 RSS 옵션
- 집계 된 의견 및 소셜 언급
- 강력한 중재 및 관리 도구
- 전체 스팸 필터링, 블랙리스트 및 화이트리스트
- Disqus 커뮤니티 위젯 지원
- 대규모 토론 커뮤니티와 연결
- 노출 및 독자성 증가

Disqus 사용의 문제점은 페이지에 많은 양의 HTTP 요청을한다는 것입니다. 페이지에 대한 모든 의견, 댓글 작성자의 의견 및 아바타 스타일을 반환하고 사이트의 관련 기사에 대한 링크를 다시 제공합니다. 이 작업은 모두 자바 스크립트를 통해 수행되지만 사이트 속도에 영향을 줄 수 있습니다. 이 문제를 해결하기 위해 Disqus 주석 시스템을 표시하는 방식을 변경했습니다. 이를 페이지 로드 이벤트에 로드하는 대신 버튼을 클릭하여 Disqus를 표시합니다.

이를 위해 Disqus 스크립트에서 필요할 때 jQuery를 사용하여 ajax를 사용합니다. 여전히 페이지로드에서 동일한 양의 HTTP 요청을 작성하지만 필요할 때만 요청을 작성합니다. 블로그를 방문하는 사람 중 상당수가 페이지에 댓글을 남기지 않거나 페이지에 댓글을 남기려고 합니다. 많은 사람이 댓글을 달지 않을 경우 댓글 상자를 표시하는 이유는 주석이 필요할 때 간단히 표시하는 것이 더 효율적이기 떄문입니다.

 

 

Disqus를 표시하는 HTML

disqus 주석 시스템을 표시하는 HTML은 다음 코드를 추가하는 것만으로 매우 간단합니다.

 

<div id="comments" class="comments-area">
    <div class="showDisqus">Show Comments</div>

        <div id="disqus_thread"></div>
</div>

 

그러면 페이지에 주석 영역이 추가되고 showDisqus 클래스가있는 div가 Disqus를 표시하는 버튼으로 사용됩니다. disqus_thread의 ID를 가진 또 다른 div가 있습니다. Disqus는 페이지에 대한 모든 주석을 표시합니다. div disqus_thread가 이미 있으므로 Disqus Javascript를로드하자마자 이 div를 검색하여 주석 시스템으로 채웁니다.

 

$j=jQuery.noConflict();

$j(document).ready(function() {
    $j('.showDisqus').on('click', function(){   // click event of the show comments button
        var disqus_shortname = 'enter_your_disqus_user_name';  // Enter your disqus user name

                // ajax request to load the disqus javascript
        $j.ajax({
             type: "GET",
             url: "http://" + disqus_shortname + ".disqus.com/embed.js",
             dataType: "script",
             cache: true
         });

            $j(this).fadeOut();  // remove the show comments button
    });
});

 

위의 jQuery를 사용하여 Disqus Javascript를로드하고 show Disqus 버튼의 클릭 이벤트에서 Javascript를 가져 와서 스크립트의 데이터 유형으로 반환하기 위해 ajax 호출을 한 다음 Show Disqus 버튼을 페이드 아웃합니다. 스크립트가 로드되면 Disqus div를 검색하여 주석으로 채 웁니다.

위와 같은 클릭 이벤트에서 Disqus를 로드 할 때 발생하는 문제는 검색 엔진이 주석을 색인 할 수 없다는 것입니다. 따라서 검색 엔진에서 사이트의 주석을 색인화하려면이 주석을로드하는 방법을 사용하지 않아야합니다. 그러면 Disqus의 HTTP 요청이 페이지로드에서 클릭 이벤트로 전환되고 페이지로드 속도에 큰 차이가 생깁니다.