Estudio PageSpeed.ONE: Impacto de los widgets de chat en la velocidad web

El chat en vivo es utilizado por el veinte por ciento de los operadores de tiendas en línea checas. Pero, ¿cómo afectan estos componentes a la velocidad del sitio web? Hemos analizado detalladamente los diez chats en vivo más populares y hemos descubierto información bastante interesante.

El resumen de nuestros hallazgos se presentó en nuestro programa en streaming "La velocidad importa". Presentamos el estudio en detalle en el texto siguiente.

Desde el punto de vista de la velocidad, los widgets de LimeTalk, Daktela o LiveAgent resultaron ser los mejores. Sin embargo, elegir el popular SmartSupp tampoco será un error en cuanto a rendimiento de carga.

Por otro lado, tenga cuidado con Manychat, Zopim, e incluso con el muy conocido Facebook Chat Plugin (también conocido como Messenger). Las diferencias en el impacto sobre la velocidad entre los chats son realmente significativas. Por cierto, uno de ellos puede reducir la puntuación de velocidad en la herramienta Lighthouse en 35 puntos de 100.

¿Cuáles son los servicios de chat en vivo más populares en la República Checa?#

Según el estudio de Reshoper de este año, aproximadamente una quinta parte de las tiendas en línea checas utiliza algún widget de chat. Los chats en vivo, por tanto, tienen un impacto significativo en la experiencia del usuario de una parte considerable de los checos que compran en línea.

Gracias a Filip Podstavec de Marketing Miner, obtuvimos datos actualizados en noviembre de 2020 sobre los chats web más utilizados en la República Checa. Smartsupp domina claramente entre ellos, pero el ranking completo de los diez primeros es el siguiente:

1. SmartSupp
2. Facebook Chat Plugin
3. Tawk
4. Zendesk/Zopim
5. FoxyDesk
6. Livechatoo
7. LimeTalk
8. Daktela
9. LiveAgent
10. Manychat

¿Cómo medimos?#

Nuestra metodología fue la siguiente:

• Insertamos cada chat en vivo según las instrucciones básicas del fabricante en una página completamente vacía, y también en una página más compleja – para estos fines elegimos la plantilla Landkit.
• Medimos cada página de prueba resultante durante varios días con pruebas sintéticas de la herramienta SpeedCurve emulando un dispositivo móvil lento Samsung Galaxy S4. Panel de resultados. Tabla de resultados.
• Las servicios más populares fueron sometidas a pruebas manuales por nuestro colega Michal Matuška en el navegador. Se enfocó en validar los resultados de las pruebas sintéticas y buscó también posibles mejoras, tanto para los propietarios del sitio web como para los autores de los widgets.

¿Qué medimos?#

Para poder comparar los resultados obtenidos, naturalmente, recurrimos a varias métricas de velocidad web disponibles.

Comencemos con los indicadores técnicos. En la imagen general, juegan un papel menos relevante, pero enseguida verán por qué nos centramos en ellos.

Datos transferidos#

El volumen de datos que descargan los widgets puede parecer una métrica menos importante desde la perspectiva actual.

Sin embargo, probablemente como operadores de sitios web, no querrían que sus usuarios descargaran un megabyte completo de datos adicionales solo para el servicio de chat. ¿Esto no puede suceder? Por favor, mantengan su atención un poco más.

Además, si los datos del chat en vivo se transfieren en un momento inadecuado, el navegador puede ralentizarse en la descarga de elementos mucho más importantes de su sitio web.

¿Cómo resultó?

• Destacó Limetalk, con solo 8 kilobytes transferidos (!).
• Por otro lado, gracias a los desarrolladores de Facebook, con Messenger se descargará más de un megabyte de datos en su web. En Manychat, el indicador incluso se detuvo en 1,1 MB.

Número de archivos descargados#

La cantidad de archivos, en tiempos de protocolos modernos como HTTP/2 y HTTP/3, no juega un papel tan importante, siempre que los archivos sean pequeños en términos de datos.

Pero nuevamente – es una cortesía de cada servicio mantener la cantidad de archivos descargados bajo control, ya que deben compartirse con los archivos de su sitio web.

• Excelentes resultados en esta área son de LimeTalk y Daktela (ambos con 5 archivos) o LiveAgent (7 archivos).
• Facebook descarga 42 archivos, Manychat incluso 49 archivos. Con tal cantidad, podríamos montar un sitio web bastante grande.

Es necesario mencionar que aquí juega un papel la estrategia de renderizado que los autores del chat han elegido. Algunos servicios descargan una gran cantidad de datos al principio, pero la "burbuja" de su chat está disponible bastante pronto. En otros, servicios más ahorrativos con los datos, la primera visualización tarda un poco más.

Pasemos a otro indicador. Aquí se pondrá serio, ya que lo consideramos un indicador importante del impacto en la velocidad.

Puntuación de Rendimiento de Lighthouse (LPS)#

No podíamos omitir la "puntuación de Lighthouse". Se compone de seis métricas importantes, proporcionando una imagen clara de la posible velocidad general del sitio web. Más sobre LPS.

¿Cuál es el impacto de los chats en la métrica LPS en una página vacía?

• Excelentes resultados para LimeTalk, Daktela y LiveAgent – la puntuación de Lighthouse (medida a través de SpeedCurve) permanece en 100 puntos. También apreciamos los excelentes resultados de Livechatoo (99 puntos de cien) y SmartSupp (95 puntos).
• La vista del final del pelotón en esta métrica es bastante triste. Zopim reduce la puntuación de Lighthouse de una página vacía de cien a 67 puntos, Manychat incluso a 65 puntos de 100. Eso es realmente malo.

Aquí podríamos decir que conocemos a los ganadores y perdedores. Pero no es tan simple. Nos gustaría llamar su atención sobre otros factores importantes.

Comencemos con una métrica que, aunque es parte de la Puntuación de Rendimiento de Lighthouse, en el caso de componentes de terceros, la consideramos una de las más importantes.

Tiempo Total de Bloqueo (TBT)#

El "Tiempo Total de Bloqueo" indica el intervalo que el navegador necesita para procesar tareas complejas en JavaScript, durante el cual el usuario no podrá interactuar con la página ya renderizada. Más sobre TBT.

Veamos a los ganadores y perdedores en este indicador:

• En LimeTalk y LiveAgent, SpeedCurve midió un tiempo de bloqueo cero en todas las pruebas, lo cual es excelente. También obtuvo buenos resultados Livechatoo (10 ms), FoxyDesk (28 ms), Daktela (46 ms), y los resultados de Smartsupp (270 ms) tampoco son malos.
• Fuera de los límites aceptables desde nuestro punto de vista está Zopim (1,079 ms) y en el límite se encuentra Manychat (438 ms).

Para contexto – medimos en la emulación de un móvil, donde por ejemplo Google Analytics configurado normalmente consume alrededor de 100 ms de TBT.

En un mundo ideal, lo mejor sería que los componentes no tuvieran intervalos de bloqueo de la página durante el procesamiento de JavaScript mayores de 50 ms, que es precisamente lo que mide TBT. Pero como desarrolladores, entendemos que es una meta difícil de alcanzar.

Además de Zopim mencionado anteriormente, podríamos decir que los chats en vivo medidos tienen un impacto menos negativo en la interactividad del usuario de lo que esperábamos.

Velocidad de visualización del chat#

Como quizás vieron en el video, Michal Matuška, al examinar en detalle los widgets más populares en el navegador, también se centró en la velocidad de visualización. Los resultados fueron los siguientes:

Chat	Velocidad de visualización
SmartSupp	5 s
Facebook	7 s
Tawk	2,7 s

Tawk se muestra más rápidamente, pero es cierto que sus autores eligieron una estrategia de visualización rápida de la "burbuja" inicial, por lo que la inicialización de la ventana de comunicación en Tawk aún tarda un poco.

Apostaríamos que en interés de la mayoría de los operadores de sitios web está mostrar primero su contenido esencial y los herramientas de comunicación después, en segundo o tercer lugar.

Esta estrategia no es para todos, pero si la seguimos, la visualización posterior de SmartSupp o Facebook no debería ser un problema. Por el contrario, podría ser aconsejable reducir la prioridad o de alguna manera ralentizar a Tawk, que se descarga y se muestra rápidamente.

Y ahora llegamos al final, seguramente les interesa el veredicto final.

Evaluación General#

Primero, traslademos todos los resultados a la tabla.

	LPS	KB Descargados	Archivos	TBT en ms
SmartSupp	95	247	12	270
Facebook	78	1,052	42	319
Tawk	93	177	16	135
Zopim	67	554	15	1,079
FoxyDesk	87	517	30	28
Livechatoo	99	49	16	10
LimeTalk	100	8	5	0
Daktela	100	36	5	46
LiveAgent	100	27	7	0
Manychat	65	1,127	49	438

Tabla de resultados de las pruebas: LPS representa Lighthouse Performance Score, además está el número de kilobytes descargados, el número de archivos y el Total Blocking Time en ms. Explicaciones de métricas y análisis más profundo se encuentran en el texto arriba.

En cada criterio evaluado, buscamos dos o tres mejores y peores chats en vivo (marcados en rojo).

Cuantos más números verdes reciba un widget de chat, mejor. Por otro lado, debería tener cuidado con las herramientas de comunicación que tienen más de un número rojo.

Resumamos los resultados en algunas recomendaciones basadas únicamente en pruebas de velocidad:

• Le recomendamos encarecidamente que elija cualquier chat de la tríada LimeTalk, Daktela o LiveAgent. Especialmente el primero alcanza calificaciones realmente excelentes. Sin embargo, tampoco cometerá un error en cuanto a rendimiento de carga si elige SmartSupp, Tawk o Livechatoo. Aunque no destacaron, sus resultados no son nada malos.
• Por otro lado, nuestra investigación no resultó favorable para Manychat, seguido de Zopim y Facebook.

Cabe destacar nuevamente que no consideramos otros parámetros además de la velocidad aquí, pero asumimos que lo hará al elegir el componente adecuado.

Análisis en profundidad de los tres más importantes en el navegador#

Además de las mediciones de Martin en SpeedCurve, Michal realizó un análisis detallado de la descarga y renderizado de las tres herramientas de chat más populares directamente utilizando las herramientas de desarrollo en el navegador Chrome.

Las mediciones se realizaron a través de Lighthouse en Chrome (Versión 86.0.4240.183 (Official Build) (x86_64)) y en una ventana de incógnito, en vista móvil.

SmartSupp#

El chat se muestra aproximadamente alrededor del quinto segundo. Podría mejorarse el flujo de descarga de los archivos necesarios para su funcionamiento. Esto permitiría que el chat se mostrara más rápidamente. Consideramos que el encadenamiento de archivos es innecesario. Cada enlace eliminado aquí significa un avance significativo.

Encadenamiento de archivos al descargar SmartSupp.

El tiempo de ejecución del JavaScript en el navegador es de alrededor de 380 ms, lo que consideramos un buen resultado.

Facebook Chat Plugin#

El chat se muestra aproximadamente alrededor del sexto segundo. La sugerencia de mejora para Facebook es definitivamente el tamaño de los datos ya mencionado. Hay muchos datos transferidos en grandes archivos, JavaScript que debe descargarse y ejecutarse. Esto retrasa la visualización. Los datos transferidos también ralentizan la transferencia de otros recursos en los que depende el sitio web.

Dado el volumen de datos, la mejor manera de ayudar al implementar el Facebook Chat es a través de la técnica de carga diferida, que mencionamos en el texto a continuación.

Tawk#

El chat se muestra aproximadamente alrededor del tercer segundo. El flujo de descarga es casi ejemplar:

El flujo de descarga de archivos del widget Tawk realmente parece una cascada. Fuente: Chrome DevTools.

Aquí probablemente no tenemos nada que agregar. Nos sorprendieron solo tres referencias a fuentes de Google. Además, parece que es un enlace al mismo archivo:

Las múltiples solicitudes al mismo archivo empañan un poco la excelente impresión de Tawk. Pero es un detalle que, en operación normal, gracias al almacenamiento en caché HTTP, no se manifestará.

El tiempo de ejecución en sí se procesa alrededor de 300 ms, lo que nuevamente es muy bueno.

Unas notas sobre SmartSupp y LiveAgent#

Nos alegraron mucho los buenos resultados de dos productos locales – el checo SmartSupp y el eslovaco LiveAgent.

Smartsupp, hasta hace poco, no era un campeón en cuanto a la velocidad web, pero al pasar a una nueva versión del widget, los números de muchos de nuestros clientes han mejorado significativamente.

Implementación de la nueva versión del widget de SmartSupp en uno de nuestros clientes, una tienda en línea mediana.

Estuvimos en contacto con ambas empresas y debemos decir que no toman la velocidad a la ligera.

Queremos motivarlos también a ustedes. Si por alguna razón utilizan uno de los chats más lentos, no duden en ponerse en contacto con los autores. Pero eso ya apunta a recomendaciones generales que hemos dejado para el final.

Otro software checo – FoxyDesk – también obtuvo resultados decentes, pero preferiríamos que descargara menos archivos y datos.

Recomendaciones generales para desarrolladores, comercializadores y propietarios de sitios web#

Para finalizar, les damos recomendaciones generales, sin importar qué herramienta de chat en vivo utilicen.

Elija el chat en vivo también según la velocidad#

Agregue la velocidad a los parámetros para elegir el chat en vivo. Como se puede ver en nuestro estudio, muchos de ellos afectan significativamente la velocidad de su sitio web.

Mida el impacto de los componentes de terceros#

Mida el impacto de los componentes de terceros. Usamos el análisis de terceros en SpeedCurve, pero también puede ayudarle mucho el análisis de terceros de un simple Lighthouse. Más sobre análisis de componentes de terceros y optimización de JavaScript de terceros en web.dev.

En monitoring PLUS ofrecemos la posibilidad de medir el impacto total de los componentes de terceros mediante la métrica 3PBT.

Comuníquese con los autores de los widgets#

¿Observa un impacto negativo del widget en la velocidad de renderizado inicial de la página? Primero, escriba a los autores, es posible que simplemente aún no hayan comenzado a abordar el problema.

Considere la carga diferida del widget#

Considere la técnica de carga diferida del chat.

Widget optimizado en Smarty.cz.

La técnica de carga diferida (lazy loading) consiste en reemplazar el chat en vivo con un símbolo de marcador de posición, generalmente una imagen.

El verdadero widget de chat se carga más tarde. La primera opción es activarlo mediante una acción del usuario, como un clic en el marcador de posición o al acercar el cursor. La segunda opción es descargarlo después de un cierto tiempo, para que los archivos del widget no ralenticen la descarga y ejecución de elementos más importantes de la página.

Si necesita ayuda optimizando el chat en vivo o la velocidad del sitio web, no dude en contactar a PageSpeed.ONE.