Pagespeed: Usar Disqus con Lazyload

Los que utilizan el sistema de comentarios Disqus en su blog, tarde o temprano habrán notado que a veces hay retrasos de carga causados por Disqus. La solución: Lazyload.

La idea básica: si se llega a un punto definido mientras se desplaza en un post, los comentarios se recargan. Si un lector no lee toda la entrada, los comentarios no se cargan en absoluto. Si un lector lee una entrada completamente, los comentarios se cargan a tiempo para que se muestren cuando se llegue al área de comentarios.

Este enfoque "perezoso" de las imágenes (también utilizado aquí en el blog) es bien conocido, porque las imágenes que no se muestran de esta manera no se transfieren. Con una adaptación del guión de Disqus este comportamiento también puede ser usado para el área de comentarios. Hay diferentes enfoques, pero yo uso una variante que requiere jQuery - para la funcionalidad de la caja de luz esta librería javascript ya está incluida, así que no hay nada que cargar adicionalmente.

Plugin Edit Disqus

Para usar Lazy Load, el plugin Disqus debe ser adaptado, más precisamente el archivo disqus-comment-system/comments.php. Comienza a editar en WordPress seleccionando el submenú "Editor" en el menú "Plugins" y luego el correspondiente plugin de la lista en la esquina superior derecha. Al final de la comentarios.php se incluye un Javascript, que se sustituye por el siguiente código:

<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>

Particularmente importante es Línea 5Allí se define qué elemento HTML desencadena la recarga de disqus, elegí "Mensajes similares" o la clase CSS "related_post_title", ya que todavía se encuentra mucho antes de la sección de comentarios y mucho después del comienzo de la publicación. Dependiendo del tema puede ser necesario usar un ID diferente (entonces con # delante) o una clase CSS diferente allí.

Discute Lazy-Load en la práctica

La ventaja de Lazyload es obvia: sólo se cargan los datos que realmente se necesitan. Esto es bueno para el tiempo de carga de la página, que a su vez puede traer ventajas en Google - y por supuesto una mejor usabilidad. Además: como Disqus no funciona sin Javascript no hay más desventajas al usar jQuery.

Sin embargo, también hay desventajas: por ejemplo, el reconocimiento de la marca de carga no siempre funciona de manera fiable y con todos los navegadores. Como resultado, puede ocurrir que no se muestre ningún comentario. Aquí en el blog dejaré la función activada por el momento y veré cómo funciona. Si quieres saber más sobre Lazy Load and Disqus puedes encontrar varios ejemplos de guiones e instrucciones en la red, por ejemplo. aquí o en Github.com.