Docs Overtracking

logo-overtracking.png

Guía de Métricas

Métricas #

En el apartado de Métricas de Overtracking tienes toda la información que necesitas para analizar y mejorar el rendimiento de tu sitio web. Estas métricas son esenciales no solo para la velocidad de carga de tu página, sino también para la experiencia general de los usuarios. En esta guía, te ayudamos a interpretar cada métrica, a entender su importancia y a optimizarla para garantizar una web rápida, fluida y eficiente.

Al igual que en el resto de apartados, puedes cambiar el periodo seleccionado por defecto (1), añadir filtros por país, dispositivo, ruta o métrica(2) o exportar los datos(3) en .csv o .pdf
Gráfica de las core web vitals

Gráfico de Core Web Vitals #

El gráfico de Core Web Vitals (CWV) te muestra la evolución diaria de las métricas clave que Google utiliza para evaluar la experiencia de usuario en tu sitio. Este conjunto de métricas se centra en la velocidad de carga, la interactividad y la estabilidad visual de tu web. Estas son las métricas principales que monitoreamos:

  • TTFB (Time to First Byte): Mide el tiempo que tarda el servidor en enviar el primer byte de datos al navegador del usuario. Un TTFB bajo es esencial para que los usuarios reciban una respuesta rápida desde tu servidor.
  • LCP (Largest Contentful Paint): Esta métrica mide el tiempo que tarda en mostrarse el elemento de contenido más grande de la página, como una imagen o un bloque de texto. Un LCP rápido mejora la primera impresión del usuario sobre tu sitio.
  • FID (First Input Delay): Mide el tiempo que tarda el navegador en responder a la primera interacción del usuario (como un clic). Un FID bajo es crucial para garantizar una experiencia interactiva y evitar abandonos.
  • FCP (First Contentful Paint): Indica el tiempo que tarda en mostrarse el primer contenido significativo de la página (como un logotipo o texto). Un FCP rápido ayuda a que los usuarios no perciban que la página está «vacía» durante mucho tiempo.
  • INP (Input Responsiveness): Evalúa la capacidad de respuesta del navegador ante las interacciones del usuario en general. Un INP bajo significa que el usuario experimenta una interacción fluida con la página.
  • CLS (Cumulative Layout Shift): Mide la cantidad de movimiento inesperado de los elementos en la página durante la carga. Un CLS bajo significa que los elementos no «saltan» mientras el usuario intenta interactuar con la página.
  • TBT (Total Blocking Time): Indica cuánto tiempo el navegador estuvo bloqueado y no pudo responder a las interacciones del usuario. Un TBT bajo garantiza que la página responde rápidamente a las acciones del usuario.

Tabla de medias de Core Web Vitals por dispositivo #

La tabla de medias de CWV por dispositivo te ofrece una visión clara de cómo los usuarios experimentan tu sitio web desde diferentes plataformas: ordenadores, móviles y tablets. Dado que cada tipo de dispositivo varía en potencia, velocidad de conexión y tamaño de pantalla, es común ver diferencias en las métricas de rendimiento. Al comparar estas métricas, puedes identificar áreas de mejora específicas para cada tipo de dispositivo y optimizar la experiencia de usuario en todas las plataformas.

Ejemplos de análisis por dispositivo: #

  • LCP más alto en móviles: Si las métricas muestran que el LCP (Largest Contentful Paint) es significativamente mayor en móviles que en ordenadores, esto podría indicar que tus imágenes o vídeos no están optimizados para dispositivos móviles. En este caso, es recomendable reducir el tamaño de las imágenes o implementar cargas diferidas (lazy loading) para mejorar el tiempo de carga.
  • FID alto en tablets: Si la métrica FID (First Input Delay) es alta en tablets, es posible que haya demasiado JavaScript ejecutándose en el hilo principal, lo que genera retrasos en la capacidad de respuesta. Reducir el JavaScript y optimizar su ejecución mejorará esta métrica.

Tabla de medias de Core Web Vitals por país #

Esta tabla te permite comprender cómo varía el rendimiento de tu sitio web en diferentes ubicaciones geográficas. Factores como la infraestructura de internet, la velocidad de conexión y las traducciones de contenido pueden afectar las métricas de CWV en cada país.

Ejemplos de análisis por país: #

  • TTFB alto en una región específica: Si detectas que el TTFB (Time to First Byte) es alto en un país en particular, podría indicar que tu red de entrega de contenido (CDN) no está funcionando correctamente en esa región. Esto afecta negativamente la velocidad de carga inicial y es un aspecto clave a optimizar.
  • CLS alto en países con diferentes idiomas: Si el CLS (Cumulative Layout Shift) es elevado en un país donde se habla un idioma diferente al principal, esto podría indicar que las traducciones no están bien optimizadas o que el contenido no tiene un diseño adaptado, lo que causa movimientos inesperados durante la carga.

Límites recomendados y consejos para mejorar las CWV #

Las Core Web Vitals son las métricas esenciales que debes monitorear para mejorar la experiencia de usuario. A continuación, detallamos cada una y te damos sugerencias prácticas para optimizarlas.

TTFB (Time to First Byte) #

  • Valor recomendado: Menos de 200 ms (milisegundos).
  • Cifras demasiado altas: Más de 600 ms puede considerarse problemático.

Cómo mejorar el TTFB: #

  • Optimiza el código de tu servidor para que responda más rápidamente.
  • Usa una CDN (Red de entrega de contenido) para reducir la distancia entre tu servidor y los usuarios.
  • Considera migrar a un servidor más rápido o mejorar el actual.

LCP (Largest Contentful Paint) #

  • Valor recomendado: Menos de 2.5 segundos.
  • Cifras demasiado altas: Más de 4 segundos puede impactar negativamente la experiencia de usuario.

Cómo mejorar el LCP: #

  • Optimiza el tamaño de las imágenes, comprimiéndolas o usando formatos más ligeros (como WebP).
  • Implementa lazy loading para retrasar la carga de elementos fuera de la vista inicial del usuario.
  • Minimiza la cantidad de JavaScript y CSS que bloquea la carga.

FID (First Input Delay) #

  • Valor recomendado: Menos de 100 ms.
  • Cifras demasiado altas: Más de 300 ms puede causar frustración, ya que la página parecerá no responder.

Cómo mejorar el FID: #

  • Minimiza el uso de JavaScript en el hilo principal del navegador.
  • Usa técnicas como code splitting para cargar solo el JavaScript necesario en la primera interacción.
  • Evita el uso excesivo de polyfills que puedan ralentizar la página.

FCP (First Contentful Paint) #

  • Valor recomendado: Menos de 1.8 segundos.
  • Cifras demasiado altas: Más de 3 segundos puede considerarse lento, ya que el usuario tardará en ver el primer contenido.

Cómo mejorar el FCP: #

  • Minimiza el tamaño del HTML, CSS y JavaScript que se cargan inicialmente.
  • Usa formatos de imagen más ligeros y carga las imágenes de manera eficiente.
  • Implementa fuentes web optimizadas o usa fuentes del sistema para reducir el tiempo de carga inicial.

INP (Input Responsiveness) #

  • Valor recomendado: Menos de 200 ms.
  • Cifras demasiado altas: Más de 500 ms sugiere que la página es lenta al responder a interacciones.

Cómo mejorar el INP: #

  • Reduce el JavaScript que se ejecuta en el hilo principal.
  • Implementa técnicas de lazy loading para retrasar la carga de scripts y elementos secundarios.
  • Optimiza los polyfills que ralentizan la página.

CLS (Cumulative Layout Shift) #

  • Valor recomendado: Menos de 0.1.
  • Cifras demasiado altas: Más de 0.25 indica que los elementos de la página se mueven demasiado.

Cómo mejorar el CLS: #

  • Asegúrate de reservar espacio para imágenes y anuncios mediante dimensiones fijas o proporcionales en CSS.
  • Evita la carga de fuentes que causen reflujo de contenido. Usa font-display: swap para evitar cambios bruscos.
  • Minimiza los scripts y CSS que se cargan de manera asíncrona y afectan la disposición de la página.

TBT (Total Blocking Time) #

  • Valor recomendado: Menos de 300 ms.
  • Cifras demasiado altas: Más de 600 ms puede hacer que la página se sienta pesada y no responda a tiempo.

Cómo mejorar el TBT: #

  • Reduce la cantidad de JavaScript que se ejecuta en el hilo principal.
  • Implementa minificación y compresión en tus archivos CSS y JavaScript.
  • Utiliza una CDN para mejorar el rendimiento global del servidor y la entrega de archivos.

Estos son sólo algunos ejemplos de los problemas que podrían estar causando cifras altas en las métricas principales de tu web y algunos consejos generales para mejorarlos, pero puede que el problema venga de otra parte. Si identificas que alguna de estas métricas tiene cifras desmesuradas, te recomendamos que lo monitorices y lo estudies en profundidad para cerciorarte de qué es lo que está causando problemas y solucionarlo lo antes posible.

Scroll al inicio