Widget de chat: 100% en PageSpeed

¿Cómo funciona un widget de chat?

Un widget de chat generalmente viene en forma de código JavaScript. Añade este código al HTML de tu página web. Sin tener que programar tú mismo, verás aparecer automáticamente un widget de chat en tu página.

El JavaScript que crea el widget de chat hace esto colocando 1, 2 o incluso 3 iframes en tu página. Un iframe es una mini página web incrustada en tu página. El chat no se ejecuta en tu sitio, sino a través del sitio del propio plugin de chat. Se establece una conexión entre el iframe y el servidor de chat que maneja todo el chat.

Impacto de un widget de chat en la puntuación de Lighthouse

Cargar el iframe del chat es a menudo un asunto relativamente costoso. Se debe cargar una nueva página de chat dentro de tu página. Esta página de chat a menudo requiere mucho JavaScript y eso toma tiempo para cargar y ejecutar. En general, eso tiene un impacto significativo en tu puntuación de Lighthouse. Por ejemplo: nuestra puntuación de Lighthouse bajó nada menos que 35 puntos:

1. Speed Index +3.6s
2. Time to Interactive +10.9s.
3. Total Blocking Time +1s.

Cómo mejorar la puntuación de Lighthouse con un widget de chat

Muchos webmasters piensan que un widget de chat simplemente ralentiza la página y que no se puede hacer nada al respecto porque tienen poco control sobre el widget de chat. Tienen parte de razón. El fragmento de JavaScript que tienes que pegar en tu sitio no causa directamente el retraso. El JavaScript inicia una serie de acciones en tu página. Esas acciones ralentizan la página web y, de hecho: tienes poca influencia sobre eso.

Es por eso que tenemos que ser inteligentes y solucionar el problema. No hay alternativa. Necesitaremos asegurarnos de que el widget de chat no obstaculice el renderizado de la página. El widget de chat debe ejecutarse después de que el 'hilo principal' de tu navegador haya terminado de cargar y renderizar la página. 

Logramos esto usando la función JavaScript setTimeout() y el evento de carga de página. El evento load se dispara cuando el HTML, CSS y JavaScript están cargados y analizados. La función setTimeout() ejecuta un comando dado después de un número de milisegundos. Este ejemplo: setTimeout(function(){alert('test')},4000) mostrará una alerta en tu navegador después de 4 segundos (o 4000ms).

Podemos usar el evento load y la función setTimeout para retrasar el renderizado del widget de chat a 1500ms después de que el HTML, CSS y los JavaScripts hayan sido analizados. En este momento estamos bastante seguros de que el hilo principal del navegador está inactivo.

. Primero tenemos que envolver el widget de chat en una función. Y luego llamar a esta función 1500ms después del evento load, cuando el hilo principal esté muy probablemente inactivo. Cuando implementamos esto para el plugin de chat de Facebook en esta página, eventualmente obtendrás este código

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

Puedes realizar este truco para cualquier plugin de chat que exista. Requiere algo de trabajo manual y no puedes usar plugins de WordPress, por ejemplo. ¿No puedes resolverlo? ¡Estaré encantado de ayudarte!

¿Hemos resuelto ahora todos los problemas de velocidad de página?

Cuando un widget de chat carga de la manera anterior, obtenemos una puntuación de Lighthouse del 100% para nuestro widget de chat. ¿Significa esto que hemos resuelto todos los problemas de velocidad de página?

Sí, en parte, pero no completamente. Usamos renderizado progresivo para cargar las partes más importantes de la página temprano durante la carga de la página, mientras empujamos las partes menos importantes (el widget de chat) al final del ciclo de carga. Métricas importantes como el LCP (Largest Contentful Paint) y el FCP (First Contentful Paint) mejoraron considerablemente porque eliminamos el widget de chat de la 'ruta de renderizado crítica'. Esto permite que el navegador salga del 'modo de bloqueo' antes, lo que reduce sustancialmente el tiempo de bloqueo inicial.

Después de eso se convierte en otra historia. Al empujar el widget de chat al final del ciclo de carga de la página, cae fuera de la medición de Lighthouse. Una vez que el widget de chat comienza a cargar, el hilo principal del navegador se bloqueará. La página deja de ser interactiva por un momento. El impacto de este comportamiento depende del widget de chat. La mayoría de los widgets de chat populares no bloquearán notablemente la página cuando se ejecuten más tarde.

Los widgets de chat están construidos de tal manera que causarán un retraso en la velocidad de la página por diseño. Para acelerar una página necesitamos tomar decisiones. Esas decisiones nunca son perfectas. Retrasar el widget de chat al final del ciclo de carga resultará en un LCP y FCP mucho más tempranos, por otro lado, algunas ganancias de velocidad están abiertas a la interpretación.