Cómo cargar comentarios de Disqus de forma diferida

.entry-content a {
text-decoration: none!important;
}.btn:hover {
color: #222!important;
}

Hoy en día, la mayoría de los sitios web, ya sea en blogger o en wordpress, utilizan el sistema de comentarios disqus. WordPress también proporciona una funcionalidad integrada para el sistema de comentarios, pero la mayoría de los usuarios de wordpress también usan el sistema de comentarios disqus para eliminar el dolor de cabeza de desarrollar su propio sistema de comentarios local, lidiar con los comentarios de spam y administrarlos.Los comentarios son lo segundo que tiene un gran papel en nuestro sitio web. En muchos casos, todos los visitantes que visitan su sitio nunca ven los comentarios porque no se desplazan hacia abajo hasta donde están, pero los comentarios se cargan automáticamente, sin importar si el usuario quiere verlos o no, y lo mismo sucede con sistema de comentarios disqus que tiene un problema de desperdicio de ancho de banda y también ralentiza su sitio web.

Los comentarios de Disqus ralentizan su sitio:

El sistema de comentarios de Disqus generalmente aumenta el tamaño de su página web, lo que también ralentiza la carga de su página web porque el sistema de comentarios de Disqus descarga los archivos JavaScript y CSS necesarios del servidor de Disqus, lo que hace que su sitio web sea lento.

Después de la prueba, los expertos han notado que un sistema de comentarios disqus sin ningún comentario tiene un tamaño de página de 2,49 MB porque realiza un montón de solicitudes de red para JavaScript, CSS, imágenes y archivos de fuente que son necesarios y que se cargarán cuando se cargue este sistema de comentarios disqus.

Esta cantidad excesiva de solicitudes de red también tiene un gran impacto en la funcionalidad de su sitio web, ya que altera la funcionalidad normal de su sitio web y hace que su sitio web se cargue lentamente, lo que tiene un efecto muy negativo en su sitio web y su sitio web está desclasificado en el motor de búsqueda de Google.

Solución todo en uno:

La solución para todos los problemas que he discutido anteriormente, como la ralentización de su sitio web y demasiadas solicitudes y también el aumento del ancho de banda y el tamaño de la página, la solución es solo una y es la carga diferida.

Después de Lazy loading, sus comentarios de disqus se cargarán así.

Cómo cargar comentarios de Disqus de forma diferida

Ya publiqué el artículo sobre imágenes de carga diferida, anuncios de AdSense de carga diferida, videos de YouTube de carga diferida y esta vez también tengo una técnica para ti. comentarios de disqus de carga perezosa.

Te proporcionaré un pequeño JavaScript plugin que hace este trabajo sin importar dónde se encuentren los comentarios, arriba o debajo de la ventana gráfica, no se cargará si no hay ninguna razón para hacerlo.

Este pequeño complemento también está disponible en Versiones vainilla y jQuery como la carga perezosa de Adsense plugin. Puede tomar los archivos desde aquí:

  • disqusloader.js: 779 bytes cuando se minimiza
  • jquery.disqusloader.js: 569 bytes cuando se minimiza
  • Debe incluir cualquier archivo js proporcionado anteriormente, según la versión que use, en su sitio web o incrustar el código en su sitio web.

    Para la versión jquery de este plugin asegúrese de haber agregado el archivo jquery en el código HTML de su sitio web. Si no lo ha hecho, agréguelo antes de usar la versión jquery.

    ¿Cuándo se cargarán los comentarios?

    El sistema de comentarios solo se cargará cuando esté en la ventana gráfica y el usuario vaya a ver los comentarios. Esta carga diferida del sistema de comentarios de disqus también tiene un gran impacto en su sitio web y hace que su sitio web sea más rápido.

    También puede implementar esta funcionalidad de comentario disqus de carga diferida en Blogger, así como en el sitio web de WordPress.

    Todo lo que tienes que hacer es seguir los pasos que te voy a decir y realizar las tareas que se enumeran.

    Código HTML:

    En primer lugar, debe agregar este código HTML donde desea mostrar los comentarios disqus, generalmente en la parte inferior de su página web.

    Inicialización:

    Entonces tienes que hacer la inicialización de esta pequeña carga diferida plugin para el sistema de comentarios disqus. Puede inicializar el plugin agregando cualquiera de los códigos javascript proporcionados a continuación. Depende de la versión de plugin tu usas.

    // vanilla
    disqusLoader( '.disqus', { scriptUrl: '//username.disqus.com/embed.js' });
    // jQuery
    $.disqusLoader( '.disqus', { scriptUrl: '//username.disqus.com/embed.js' });

    El nombre de usuario será su nombre corto disqus. Lo encontrará en su panel de disqus.

    Al inicializar este plugin debe proporcionar el nombre corto o el nombre de usuario de disqus.

    Opciones por defecto y su modificación:

    De forma predeterminada, los ajustes de configuración u opciones predeterminadas se enumeran a continuación. También puede modificar estas opciones de acuerdo con sus requisitos. También se proporciona una descripción para eso.

    var options =
    {
      scriptUrl: '//username.disqus.com/embed.js',
      /*
        @type: string (url)
        @default: none
        @required
        URL of Disqus' executive JS file. The value is memorized on the first function call
        and ignored otherwise because Disqus allows only one instance per page at the time.
      */
    
      laziness: 1,
      /*
        @type: int (>=0)
        @default: 1
        Sets the laziness of loading the widget: (viewport height) * laziness . For example:
        0 - widget load starts when at the least a tiny part of it gets in the viewport;
        1 - widget load starts when the distance between the widget zone and the viewport is no more than the height of the viewport;
        2 - 2x viewports, etc.
      */
    
      throttle: 250,
      /*
        @type: int (milliseconds)
        @default: 250
        Defines how often the plugin should make calculations during the
        processes such as resize of a browser's window or viewport scroll.
        250 = 4 times in a second.
      */
    
      /*
        @type: function
        @default: none
        Disqus-native options. Check Disqus' manual for more information.
      */
      disqusConfig: function()
      {
        this.page.title="Page Title";
        this.page.url="http://url.to/your-website";
        this.page.identifier="unique-identifier";
      }
    };
    
    // vanilla
    disqusLoader( '.disqus', options );
    
    // jQuery
    $.disqusLoader( '.disqus', options );

    Indicación de carga de comentarios:

    Como en el artículo anterior has visto que puedes indicar el proceso de carga de anuncios de AdSense así mismo también puedes hacerlo para este sistema de comentarios.

    La carga del sistema de comentarios disqus generalmente consta de dos partes:

  • Cargando el archivo embed.js
  • Carga de todos los activos y realización de otro tipo de solicitudes de red.
  • Para indicar la carga de comentarios disqus, tenemos que usar Función de devolución de llamada de JavaScript lo que ayuda a ocultar el elemento disqus cuando no está cargado y muestra un marcador de posición mientras los comentarios no están cargados.

    Para indicar el proceso de carga, debe usar este código HTML en lugar de usar el anterior.

    Loading comments...

    Ahora el código JavaScript para la funcionalidad de devolución de llamada y para mostrar el marcador de posición de carga de disqus.

    // vanilla
    disqusConfig: function()
    {
      this.callbacks.onReady = [function()
      {
        var el = document.querySelector( '.disqus-placeholder' );
        if( el.classList )
          el.classList.add( 'is-hidden' ); // IE 10+
        else
          el.className += ' ' + 'is-hidden'; // IE 8-9
      }];
    }
    
    
    // jQuery
    disqusConfig: function()
    {
      this.callbacks.onReady = [function()
      {
        $( '.disqus-placeholder' ).addClass( 'is-hidden' );
      }];
    }

    También necesitamos un poco de CSS para ocultar el marcador de posición Cargando cuando los comentarios estén completamente cargados.

    .disqus-placeholder.is-hidden { display: none; }

    Hemos terminado ahora que ha implementado con éxito la funcionalidad de carga diferida para el sistema de comentarios disqus en su sitio web.

    Conclusión y reflexiones finales:

    En conclusión, quiero decir que después de agregar esta funcionalidad de carga diferida en su sitio web, puede hacer que su sitio web se cargue más rápido, lo que lo ayuda a optimizar su sitio web para que Google pueda clasificar su sitio web en la lista de los 10 principales.

    Si tiene alguna pregunta o consulta relacionada con este artículo, deje sus comentarios a continuación. Intentaré resolver sus problemas lo antes posible.

    Entradas relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.