Disqus: mejorar la carga de tu web

A veces Disqus tarda un tiempo para cargar y esto puede aumentar el tiempo de carga de su blog o página web.

Para optimizar aún más la carga tu web, un ejemplo iferente de cargar disqus (con sus librerias js) «solo» al hacer scroll en la página. Por lo tanto si tienes una web donde hay que scrollear para llegar a los comentarios te puede interesar.

En este ejemplo es si tenéis instalado disqus en WordPress (aunque podéis emplearlo en cualquier otra web editando los enlaces y ignorando el punto 1)

1. Disqus te añade (al final del body de tu página) por medio de la función wp_footer() el script y js que necesita para ejecurtarse. Esto no nos interesa, queremos que solo cargue estos archivos al hacer scroll, para ello: abre el archivo funcions.php de tu theme y añade la siguiente función:

add_action( 'wp_head', 'quitar_disqus' );
function quitar_disqus() {
    remove_action( 'loop_end', 'dsq_loop_end' );
    remove_action( 'wp_footer', 'dsq_output_footer_comment_js' );
}

2. Por defecto los comentarios disqus cargan por medio de la función comments_template() de tu tema WP en el archivo single.php. Vamos a quitarla o comentarla y añadir el div donde va a cargar disqus al scrollear:

<?php// comments_template( '', true ); ?>
<div id="disqus_thread" data-disqus-shortname="aqui-tu-usuario-disqus" data-disqus-url="<?php the_permalink(); ?>"></div>

3. Por último ya solo queda añadir el script para que cargue disus solo cuando hagamos scroll. Para ello añade este codigo javascript al final de tu archivo footer.php por ejemplo:

<script>
$(document).ready(function(){

var disqus_div = $("#disqus_thread");
var disqus_load = false,
disqus_data = disqus_div.data(),
check = function(){
  if ( !disqus_load && $(window).scrollTop() + $(window).height() > disqus_div.offset().top ) {
    disqus_load = true;
    for (var key in disqus_data) {
      if (key.substr(0,6) == 'disqus') {
        window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
      }
    }
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  }
};
$(window).scroll(check);
check();

});
</script>