Pagespeed: Disqus mit Lazyload verwenden

Wer das Disqus-Kommentar-System in seinem Blog verwendet, wird früher oder später gemerkt haben, dass es manchmal zu Ladeverzögerungen durch Disqus kommt. Die Lösung: Lazyload.

Disqus-LogoDie Grundidee: wird beim Scrollen in einem Beitrag ein definierter Punkt erreicht, werden die Kommentare nachgeladen. Wenn ein Leser nicht den ganzen Beitrag liest werden die Kommentare gar nicht geladen, wer einen Post komplett liest bekommt die Kommentare rechtzeitig geladen sodass sie dargestellt werden wenn der Kommentarbereich erreicht ist.

Bekannt ist dieser „Lazyload“-Ansatz von Bilder (wird auch hier im Blog verwendet), da so nicht angezeigte Bilder auch nicht übertragen werden. Mit einer Anpassung des Disqus-Scripts lässt sich dieses Verhalten auch für den Kommentar-Bereich nutzen. Zwar gibt es verschiedene Ansätze, ich verwende jedoch eine Variante die jQuery voraussetzt – für die Lightbox-Funktionalität ist diese Javascript-Bibliothek bereits eingebunden, es muss also nichts zusätzlich geladen werden.

Disqus-Plugin bearbeiten

Um Lazy Load zu verwenden muss das Disqus-Plugin angepasst werden, genauer die Datei disqus-comment-system/comments.php. Die Bearbeitung startet man in WordPress, in dem man im Menüpunkt „Plugins“ den Unterpunkt „Editor“ wählt und dann das entsprechende Plugin aus der Liste oben rechts. Ganz am Ende der comments.php ist ein Javascript eingebunden, welches mit folgendem Code ersetzt wird:

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
 var ds_loaded = false;
 var top = $(".related_post_title").offset().top; // WHERE TO START LOADING

 function check(){
  if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
   ds_loaded = true;
   (function() {
     var dsq = document.createElement('script'); dsq.type = 'text/javascript';
     dsq.async = true;
     dsq.src = 'https://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=<?php echo DISQUS_VERSION; ?>';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
  }
 }

 $(window).scroll(check);
 check();
});
/* ]]> */
</script>

Besonders wichtig ist Zeile 5: dort wird definiert, welches HTML-Element das Nachladen von Disqus auslöst, ich habe mich für „Ähnliche Posts“ bzw. die CSS-Klasse „related_post_title“ entschieden, da sie noch deutlich vor dem Kommentar-Bereich und deutlich nach dem Start des Beitrags befindet. Je nach Theme kann es nötig sein, eine andere ID (dann mit # vorweg) oder eine andere CSS-Class dort zu verwenden.

Disqus Lazy-Load in der Praxis

Der Vorteil von Lazyload liegt auf der Hand: es werden nur die Daten geladen, die wirklich benötigt werden. Das kommt der Seitenladezeit zu gute, was wiederum Vorteile bei Google bringen kann – und natürlich eine bessere Usability. Zudem: da auch Disqus selbst nicht ohne Javascript funktioniert gibt es keinen weiteren Nachteil durch den Einsatz von jQuery.

Es gibt jedoch auch Nachteile: so funktioniert die Erkennung der Lademarkierung nicht immer zuverlässig und mit jedem Browser. Dadurch kann es passieren, dass überhaupt keine Kommentare dargestellt werden. Hier im Blog werde ich die Funktion erst einmal aktiviert lassen und schauen, wie es sich auswirkt. Wer sich weiter mit Lazy Load und Disqus beschäftigen will findet im Netz verschiedene Script-Beispiele und Anleitungen, z.B. hier oder auf Github.com.

4 Kommentare

  1. Servus Falk – und wer das nicht verwendet, gibt es da auch eine Möglichkeit. Denn die verzögerte Ladegeschichte scheint mir sehr interessant
    LG stanko

  2. Prinzipiell kann man Lazy Load mit allen möglichen Elementen machen, die über zusätzliche Dateien geladen werden. Hier im Blog habe ich es wie gesagt auch noch für Bilder aktiviert, damit die nicht immer alle geladen werden müssen.

    Je mehr Bilder oder sonstige Elemente es gibt und je länger die Seite ist desto größer ist natürlich der Vorteil dieses Ansatzes.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.