Carga un chat widget con Core Web Vitals perfectos

¡Cómo cargar un chat widget de la manera correcta!

Lo he dicho una y otra vez. Algunos scripts son más importantes que otros. Nadie en la historia de internet se ha molestado porque un chat widget no se haya cargado en los primeros 500ms de la carga de la página. Ese momento en el que la página todavía está en blanco.

No tendría sentido, ¿verdad?, cargar un chat widget antes de que el contenido principal de la página haya comenzado a cargarse. No, tendría mucho más sentido cargar primero las partes más importantes (tu logo, tu imagen principal, tus hojas de estilo, tus fuentes, quizás algunos scripts súper importantes que manejan la navegación y la conversión)

Desafortunadamente, esta no es la forma en que la mayoría de los sitios web hacen las cosas. A diario veo scripts poco importantes (como scripts de chat) cargarse con la mayor prioridad inmediatamente al inicio de la carga de la página.

En este artículo explicaré cómo cargar correctamente un script de chat y cómo esto afecta métricas importantes como Largest Contentful Paint e Interaction to Next Paint.

Contexto: cómo funcionan los chat widgets

Un chat widget generalmente funciona cargando un pequeño script en tu página. Ese script cargará algunos estilos e inyectará un iframe en tu página. Un iframe es una pequeña página web aislada dentro de una página web. Y ese iframe se encargará de todo lo necesario para chatear con tus clientes.

¿Cómo afectan los chat widgets a los Core Web Vitals?

Los chat widgets afectan a los Core Web Vitals de varias maneras:

1. Afectan al First Contentful Paint y al Largest Contentful Paint al competir por los recursos de red tempranos.

2. Afectan al Interaction to Next Paint al bloquear el hilo principal y, a veces, al actualizarse lentamente después de una interacción.

3. Pueden causar layout shifts cuando no se renderizan correctamente en la página

Problemas de Largest Contentful Paint causados por chat widgets

Un chat widget puede afectar los Core Web Vitals cuando compite por recursos de red. Los archivos JavaScript generalmente se ponen en cola para descarga antes que las imágenes. Esto significa que, en el peor de los casos (cuando el script de chat es render blocking), el navegador tiene que esperar a que el script de chat se descargue y ejecute antes de poder continuar con cualquier otra cosa.

Incluso cuando el script de chat es deferred, puede impactar las métricas de pintado de varias maneras. Primero déjame explicar qué hacen los scripts deferred. El navegador puede descargar scripts deferred en paralelo y puede continuar renderizando hasta el evento DomContentLoaded. Después de eso ejecutará los scripts. El problema es que para visitantes recurrentes, el elemento LCP probablemente no se habrá cargado en el evento DomContentLoaded, pero el script de chat (en caché) se ejecutará causando un retraso en las métricas de LCP.

Problemas de Interaction to Next Paint (INP) causados por chat widgets.

Un chat widget puede y va a impactar el Interaction to Next Paint de 2 maneras. La primera es bloqueando el hilo principal por un corto tiempo mientras el chat widget ejecuta sus scripts o comprueba actualizaciones. Así es como funcionan las cosas. Todo lo que 'añades a una página' ralentizará la página un poco. 

La segunda manera en que puede causar problemas de INP es por código mal escrito (y créeme, hay algunos chat widgets con código bastante pobre). Cuando se trata de chat widgets, 'más popular' no significa 'mejor codificado'. Cuando el código pobre tarda mucho en actualizar la presentación, automáticamente obtendrás problemas de INP. Supongo que algunos proveedores de chat necesitan mejorar su juego. Esta parte, desafortunadamente, está fuera de mi control. Si has elegido un chat widget 'mal codificado', no hay forma de que yo pueda mejorar ese código. 

Problemas de Layout Shift (CLS) causados por chat widgets

A veces los chat widgets causan un layout shift. Hay 3 sospechosos habituales que busco al verificar layout shifts relacionados con chat widgets.

• Layout shifts que ocurren cada vez que se carga el chat
• Layout shifts que ocurren en una 'apertura de chat' retrasada
• Layout shifts que ocurren cuando se carga un historial de chat (visitante recurrente del chat)

Cómo solucionar problemas de Core Web Vitals causados por scripts de chat

<script>
<script>

Solucionar problemas de Cumulative Layout Shift causados por chat widgets

<style>
/*ocultar chat widget por defecto*/
.chatwidget{opacity:0}
/*mostrar chat widget después de la clase .showchat en body*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');})
<script>

¡Eso es todo! Buena suerte acelerando tu chat widget