Velocidad de página y scripts de prueba social

Un widget de prueba social solo se gana su sitio si no hace más lenta la página a la que intenta ayudar. El script de Provedly pesa unos 6 KB comprimido con gzip, se carga de forma asíncrona, se renderiza en un Shadow DOM fuera de tu diseño y espera antes de dibujar nada. Este artículo explica exactamente qué pasa en la carga, qué significa para las Core Web Vitals y las pocas decisiones de tu parte que afectan al rendimiento.

Qué se carga y cuándo

<script
    src="https://provedly.app/w/widget.js"
    data-token="pp_…"
    async
    defer
></script>

1. El navegador descarga widget.js sin bloquear el análisis del HTML, gracias a async y defer.
2. El cargador solicita GET /api/w/{token}/config, que devuelve los ajustes y hasta 30 registros recientes en una sola respuesta.
3. Tras tu retraso inicial (3 segundos por defecto), se renderiza el primer aviso. Cada renderizado envía una impresión a /track.
4. Mientras la pestaña está abierta, una señal periódica (heartbeat) llama a /presence cada 30 segundos para el contador en vivo.

Esa es toda la huella de red: un script, una solicitud de configuración, una solicitud pequeña por cada notificación mostrada y un heartbeat cada 30 segundos. No se descargan fuentes, no hay imágenes a menos que uses avatares con imagen y no hay llamadas a terceros desde dentro del widget.

Core Web Vitals, una a una

Largest Contentful Paint. El script no bloquea el análisis ni el renderizado, y nada de lo que dibuja es candidato a LCP; un aviso aparece después de tu contenido principal y es pequeño. En la práctica, un widget bien instalado no tiene ningún efecto medible en el LCP. Si pones la etiqueta en <head> sin async defer, eso deja de ser cierto, así que no lo hagas.

Cumulative Layout Shift. El aviso, el contador y la barra son position: fixed dentro de un shadow root. Los elementos fijos no ocupan espacio en el flujo del documento, así que su aparición no mueve nada. La contribución al CLS es cero por construcción. La excepción es una barra en la posición "inline", que colocas en el flujo a propósito; reserva su altura si la usas.

Interaction to Next Paint. El trabajo del widget en el hilo principal es pequeño: analizar un script de 6 KB, renderizar unos pocos nodos DOM y un temporizador. No añade listeners de scroll ni de puntero a tu documento. El INP no se ve afectado a menos que tu página ya esté al límite.

Para qué sirve el retraso de 3 segundos

El retraso inicial por defecto existe por el visitante, no por el rendimiento, pero ayuda a ambos. Para cuando aparece el primer aviso, la página normalmente ha terminado de cargar, las imágenes han llegado y el visitante se ha situado. Una notificación que salta antes de que se pinte la imagen principal es molesta y, en conexiones lentas, compite por el ancho de banda. Mantén el retraso en 3 segundos o más; acortarlo no aporta nada.

Decisiones de tu parte que importan

Dónde va la etiqueta. Al final de <body> con async defer, o next/script con strategy="afterInteractive". No en <head> de forma síncrona.

Etiqueta directa frente a Tag Manager. GTM añade la carga del contenedor y la evaluación de activadores antes de que se solicite siquiera el script del widget. En una página lenta, eso retrasa el primer aviso más de lo que pretendes. Consulta instalar con Google Tag Manager, y cuándo no hacerlo.

Avatares con imagen. Si envías avatar_url en los registros, cada aviso puede descargar una imagen. Mantenlas pequeñas o usa un estilo de avatar sin imagen; de todos modos, los registros por webhook de Stripe y Shopify no llevan fotos.

Número de widgets. Un widget por página cubre los avisos y el contador en vivo. Una barra es un segundo cargador. No instales el mismo token dos veces; el cargador es idempotente, pero las etiquetas duplicadas siguen costando una solicitud.

GIF de cuenta regresiva para correos. Son un producto distinto: un GIF animado generado en el servidor para correos, de hasta 3 minutos y menos de 100 KB. No afectan en absoluto al rendimiento de tu sitio web, pero ten en cuenta que los clientes de correo los cargan al abrir el mensaje.

Medirlo tú mismo

Ejecuta Lighthouse o WebPageTest en una página dos veces, con y sin la etiqueta, y compara. La diferencia debería estar dentro del ruido normal entre ejecuciones. Si ves un empeoramiento real, revisa si la etiqueta está colocada de forma síncrona, si hay una etiqueta duplicada o si una CSP está provocando reintentos. El panel no informa de cifras de rendimiento; aquí la fuente de verdad son tus propias herramientas, y el widget está diseñado para pasar desapercibido en ellas.

Por qué el tamaño importa más de lo que parece

Varias herramientas de prueba social, a octubre de 2026 y según sus fichas, incluyen en un único script de cliente motores de pruebas A/B, editores visuales, capas de analítica y múltiples tipos de notificación. Cada función es una razón para que el paquete crezca. El widget de Provedly hace una sola cosa en la página: obtener la configuración, mostrar registros reales con sus etiquetas y contar la presencia con honestidad. Todo lo demás, incluida la página de verificación y el emparejamiento de atribución de los pedidos asistidos por la prueba, ocurre en el servidor. Mantener pequeño el cliente es una decisión de producto tanto como de ingeniería.

Preguntas frecuentes

¿El heartbeat cada 30 segundos gasta batería o datos en el móvil?

Un heartbeat es una solicitud diminuta cada 30 segundos mientras la pestaña está abierta. Está muy por debajo de lo que hace cualquier script de analítica o widget de chat, y se detiene al cerrar la pestaña.

¿Puedo retrasar el widget hasta que el visitante haga scroll?

El retraso inicial ya cubre el caso habitual. Si necesitas una carga activada por scroll, inyecta la etiqueta desde tu propio manejador de scroll usando el mismo src y data-token; el cargador funciona igual.

¿El app embed de Shopify pesa más que la etiqueta de script?

No. El app embed carga el mismo renderizador con el mismo aislamiento, y tiene la ventaja de que los pedidos llegan verificados sin código adicional en el cliente.

Instálalo, haz tu prueba de velocidad y quédate con el resultado que obtengas: empieza gratis.