Orbit
Kapsule Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Web Vitals de Orbit
La pestaña Web Vitals informa sobre Core Web Vitals recopilados de los visitantes reales de tu proyecto en lugar de pruebas sintéticas, por lo que lo que ves es lo que la gente está experimentando realmente en sus propios dispositivos y conexiones.
Dónde está Web Vitals
Abre Orbit, haz clic en el proyecto y elige Web Vitals bajo el grupo Observability en la barra de pestañas del proyecto. La página se titula Web Vitals y explica su propio número principal: p75 es la puntuación utilizada para la experiencia de página.
Hasta que agregues el colector a tu sitio, la página no tiene nada que mostrar, así que comienza con la tarjeta de configuración en la parte inferior.
Agregar el colector
La tarjeta de configuración te proporciona una etiqueta de script de una línea para agregar al <head> de tu sitio:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
La línea exacta, con el slug de tu proyecto ya rellenado, está en la página. Cópiala de allí en lugar de escribirla.
El script recopila cinco métricas cuando los visitantes salen de cada página e informa de ellas en un único lote. No se captura información de identificación personal y no se establecen cookies, por lo que no añade un requisito de consentimiento por sí solo.
Los datos comienzan a aparecer aproximadamente treinta segundos después de la primera vista de página real. Si nada aparece después de eso, el script no se está cargando: verifica la pestaña de red de tu navegador en el sitio activo.
Hay una segunda copia del mismo colector ofrecida bajo Settings, en la tarjeta Web Analytics, que se carga desde el dominio del panel y va antes de la etiqueta de cierre </body>. Ambos funcionan y alimentan los mismos datos. Usa uno, no ambos, o cada vista de página se cuenta dos veces.
Las cinco métricas
| Métrica | Qué mide |
|---|---|
| LCP | Largest Contentful Paint: cuánto tiempo hasta que el contenido principal sea visible |
| INP | Interaction to Next Paint: qué tan rápido responde la página a la entrada |
| CLS | Cumulative Layout Shift: cuánto salta el diseño mientras se carga |
| FCP | First Contentful Paint: cuánto tiempo hasta que se dibuja algo |
| TTFB | Time to First Byte: cuánto tiempo tardó el servidor en comenzar a responder |
Los tres primeros son los Core Web Vitals propiamente dichos. FCP y TTFB son diagnósticos: te dicen si un LCP deficiente es un servidor lento o una página lenta.
Leer p75
Cada cifra en esta página es un p75, no un promedio, sobre las muestras en la ventana seleccionada. Tres cuartas partes de tus visitantes tuvieron una experiencia al menos tan buena; una cuarta parte la tuvieron peor.
Esa elección importa. Un promedio está dominado por las muchas visitas rápidas en conexiones buenas y oculta la cola. Un p75 no: si tu p75 LCP es de cuatro segundos, uno de cada cuatro visitantes espera más que eso.
Cada tarjeta de métrica lleva una calificación de Good, Needs improvement o Poor, más el recuento de muestras a partir del cual se calculó. Para LCP la página establece los límites directamente: bueno es 2500ms o menos, y pobre es más de 4000ms.
Trata con sospecha cualquier tarjeta con un pequeño recuento de muestras. Un p75 sobre una docena de muestras es ruido. Amplía la ventana con el selector en la parte superior de la página, o espera más tráfico, antes de actuar sobre él.
El gráfico de tendencias
El gráfico de tendencias traza el p75 diario para LCP y CLS en la ventana seleccionada, con los umbrales bueno y pobre marcados. El subtítulo te dice qué estás buscando: las líneas planas son saludables.
Un cambio de paso en un día específico es la señal útil, porque casi siempre se alinea con un despliegue. Haz referencia cruzada de la fecha con la pestaña Deployments, o marca el evento en la línea de tiempo del proyecto para que esté anotado la próxima vez: consulta Orbit Timeline Annotations.
Una deriva lenta hacia arriba durante semanas es un problema diferente, generalmente peso acumulado de página en lugar de un cambio único.
Top countries
Top countries muestra el volumen de muestras por país, derivado de encabezados edge. Está ahí para el contexto más que para análisis: un p75 que se ve pobre en general a menudo resulta estar bien para tu mercado principal y dominado por una audiencia más pequeña y más lejana.
Si la mayoría de tu tráfico está lejos de tu origen, eso es un argumento para cachear más agresivamente en el edge en lugar de optimizar aún más tu código.
Pages needing attention
La tabla Pages needing attention clasifica rutas por qué tan lejos su p75 está por encima del umbral bueno para cada métrica, con el recuento de muestras para cada fila.
Trabaja en esta tabla en lugar de intentar mejorar el sitio en general. Dos o tres plantillas generalmente representan la mayoría del problema, y arreglar una plantilla arregla cada página que la usa.
Las causas comunes, en el orden en que vale la pena verificarlas:
- Una imagen hero que no está dimensionada o precargada. Este es el problema de LCP más frecuente por un amplio margen.
- Un script de terceros bloqueando el hilo principal. Los widgets de chat, administradores de etiquetas y pilas de análisis son los sospechosos habituales, y dañan más a INP.
- Imágenes e inserciones sin dimensiones. Estos hacen que el diseño salte al cargar, que es exactamente lo que CLS mide.
- Una respuesta de origen lenta. Si TTFB es pobre, nada de lo anterior te salvará; la solución es cachear o una respuesta más rápida, no trabajo de front-end.
No hay muestras en esta ventana
Si la página dice que no hay muestras, una de tres cosas es verdadera:
- El colector no ha sido agregado o no se está cargando en las páginas que visitan las personas.
- Se agregó recientemente y nadie ha visitado aún.
- La ventana seleccionada es más corta que el tiempo desde tu último tráfico.
Amplía la ventana primero, ya que es gratis, luego verifica que el script esté presente en el HTML servido del sitio activo en lugar de solo en tu fuente.
Cuánto tiempo se mantienen los datos
Las muestras individuales se eliminan automáticamente una vez que tienen 30 días de antigüedad, mediante un trabajo nocturno. El selector de ventana te permite observar el historial retenido; no hay archivo más allá de él.
Si necesitas un registro a largo plazo, toma una captura de pantalla o anota los valores p75 en un momento dado, por ejemplo justo antes y justo después de un proyecto de rendimiento, para que tengas un antes y un después que puedas citar más tarde.
Vitals en la página de estado público
Si publicas una página de estado para el proyecto, puede mostrar el mismo resumen de Core Web Vitals a tus visitantes, junto con el tiempo de actividad y los despliegues recientes. Consulta Orbit Status Page.
A dónde ir a continuación
- Orbit Project Analytics para los números del lado de compilación y un resumen de vitals condensado.
- Orbit Timeline Annotations para marcar los despliegues e incidentes detrás de un cambio de paso.
- Website Speed para consejos generales de rendimiento.