Vitales de la web: velocidad de página y señales de UX para SEO

Qué son los Vitales de la Web Core

Los Vitales Web son un conjunto de métricas específicas y medibles que Google utiliza para evaluar la experiencia del usuario en el mundo real en las páginas web. Introducidos como señales de clasificación en 2021 y actualizados desde entonces (sustituyendo First Input Delay con Interaction to Next Paint en 2024), se centran en tres aspectos de la experiencia de la página que más importan a los usuarios: qué tan rápido carga el contenido principal, qué tan rápido responde la página a la interacción del usuario y qué tan estable visualmente es la página durante la carga.

Estas métricas no son teóricas: se miden utilizando datos de usuario reales del Informe de experiencia del usuario de Chrome (CrUX), que agrega datos de rendimiento anónimos de los navegadores Chrome. Esto significa que sus puntuaciones de Core Web Vitals reflejan cómo los visitantes reales experimentan su sitio, no solo cómo se desempeña en una prueba de laboratorio.

Pintura Contenta (LCP)

LCP mide cuánto tiempo tarda el elemento de contenido visible más grande (típicamente una imagen de héroe, encabezado o bloque de texto) en terminar de renderizar. Es un proxy para la velocidad de carga percibida, ¿cuándo siente el usuario que la página se ha cargado? El objetivo es menos de 2,5 segundos.

Problemas comunes de LCP

Tiempos de respuesta lentos del servidor, bloqueo de JavaScript y CSS, imágenes no optimizadas (formato demasiado grande y incorrecto) y carga lenta de recursos desde servidores de terceros son las causas más comunes de un LCP deficiente.

Cómo mejorar LCP

Optimiza el tiempo de respuesta del servidor (considera actualizar el alojamiento o agregar una CDN). Precarga recursos críticos como imágenes y fuentes de héroe. Utilice los formatos de imagen modernos (WebP, AVIF) y las imágenes de tamaño de manera adecuada. Minimice los recursos de bloqueo de renderizado al diferir CSS y JavaScript no críticos. Implementar la carga lenta para las imágenes por debajo de la página para que el navegador priorice el contenido que los usuarios ven primero.

Interacción con la siguiente pintura (INP)

El INP mide la capacidad de respuesta de una página a las interacciones del usuario (clics, toques, pulsaciones de teclas) durante todo el tiempo que la página está abierta. Se informa de la peor latencia de interacción observada, lo que refleja la rapidez con la que la página responde a las acciones del usuario. El objetivo es menos de 200 milisegundos.

Problemas comunes de INP

Las tareas JavaScript de larga duración que bloquean el hilo principal, los controladores de eventos pesados, el tamaño excesivo del DOM y los cálculos de diseño sincrónico durante las interacciones del usuario contribuyen a las puntuaciones INP deficientes.

Cómo mejorar el INP

Divide las tareas largas de JavaScript en trozos más pequeños utilizando técnicas como requestIdleCallback o setTimeout para devolver el control al navegador. Minimizar la complejidad de los controladores de eventos. Reducir el tamaño del DOM. Utilice los trabajadores web para cálculos pesados que no necesitan acceder al DOM. Optimizar scripts de terceros que se ejecutan en la interacción.

Cambio de diseño acumulativo (CLS)

CLS mide la estabilidad visual: cuánto cambia inesperadamente el diseño de la página a medida que se carga el contenido. ¿Alguna vez has estado leyendo un artículo y el texto salta porque un anuncio o una imagen se cargan sobre él? Eso es un cambio de diseño, y es frustrante para los usuarios. El objetivo es inferior a 0,1.

Problemas comunes de CLS

Las imágenes y anuncios sin dimensiones específicas, el contenido inyectado dinámicamente por encima del contenido existente, las fuentes web que hacen que el texto se refluya cuando se cargan (FOUT / FOIT) y los widgets de terceros de carga tardía son las causas más comunes.

Cómo mejorar CLS

Siempre especifique atributos de ancho y alto en imágenes y videos (o use CSS aspect-ratio) para que el navegador reserve espacio antes de cargar. Reserva espacio para anuncios y embeds. Uso font-display: swap con precarga de fuente para minimizar los cambios de diseño relacionados con la fuente. Evite insertar contenido por encima del contenido existente a menos que sea activado por una interacción del usuario.

Medición de Vitales de la Web

Datos de campo vs. datos de laboratorio

Los datos de campo provienen de usuarios reales (Informe Chrome UX, Consola de búsqueda de Google, sección de datos de campo de PageSpeed Insights). Los datos de laboratorio provienen de cargas de página simuladas (Lighthouse, datos de laboratorio de PageSpeed Insights, WebPageTest). Google utiliza datos de campo para la clasificación, pero los datos de laboratorio son útiles para diagnosticar y depurar problemas específicos. Siempre priorizar los datos de campo al evaluar su rendimiento real.

Herramientas

El informe de Google Search Console Core Web Vitals muestra el estado de todo el sitio. PageSpeed Insights proporciona datos de campo y de laboratorio para URL individuales. Lighthouse (en Chrome DevTools) ofrece mediciones de laboratorio detalladas y recomendaciones específicas. La extensión Web Vitals Chrome muestra las puntuaciones CWV en tiempo real mientras navegas. Herramientas de terceros como Screaming Frog y SEMrush pueden auditar CWV en todo su sitio.

Principales Vitales Web y Rankings SEO

Los Web Vitals son parte del sistema de clasificación de experiencia de página de Google, que también incluye compatibilidad móvil, HTTPS y la ausencia de intersticios intrusivos. La experiencia de página es una señal de desempate: cuando dos páginas son similares en calidad de contenido y relevancia, la que tenga mejor experiencia de página probablemente tendrá un rango más alto. No es un factor dominante que anula la calidad del contenido, pero puede ser la diferencia entre la posición cuatro y la posición siete.

La implicación práctica es que los Vitales Core Web son más importantes para las consultas competitivas donde las pequeñas diferencias de clasificación tienen un impacto significativo en el tráfico. Es poco probable que arreglar el CWV deficiente tome una página mediocre de la página cinco a la página uno, pero puede darle a una página fuerte la ventaja que necesita para superar a competidores igualmente fuertes.

Un enfoque práctico

Empieza por revisar tus Vitales de la Web Central en Google Search Console. Identifique páginas o plantillas de página que no cumplan con una o más métricas. Enfócate en la métrica que afecta primero a la mayoría de las páginas. Implementar correcciones, implementar y supervisar los datos del usuario real durante las próximas semanas para verificar la mejora. CWV no es una solución única, sino una práctica de rendimiento continua, especialmente a medida que agrega nuevo contenido, características e integraciones de terceros que pueden revertir sus puntajes.

Scripts de terceros y su impacto

Los scripts de terceros son a menudo los mayores asesinos de rendimiento en los sitios web modernos. Las herramientas de análisis, etiquetas publicitarias, widgets de redes sociales, widgets de chat, herramientas de prueba A / B y píxeles de seguimiento cargan JavaScript que compite por el hilo principal del navegador. Cada script aumenta el peso de la página, aumenta el tiempo de renderizado y puede causar cambios de diseño y retrasos en la interacción.

Auditoría del impacto de terceros

Utilice el panel Red de Chrome DevTools y el resumen de terceros de Lighthouse para identificar qué scripts externos se están cargando, cuántos datos transfieren y cuánto tardan en ejecutarse. Puede encontrar scripts de herramientas que ya no usa, etiquetas de seguimiento duplicadas o scripts que se pueden cargar de forma asíncrona en lugar de bloquear el procesamiento de la página.

Estrategias de mitigación

Cargue scripts de terceros no críticos con el atributo async o defer para que no bloqueen la representación de páginas. Utilice un administrador de etiquetas para controlar cuándo se cargan los scripts y en qué páginas. Implementar la carga perezosa para widgets de chat y incrustaciones sociales para que solo se carguen cuando el usuario se desplaza hacia ellos o interactúa con un disparador. Elimina cualquier script que ya no necesites. Para los scripts restantes, evalúe si el valor comercial que proporcionan justifica su costo de rendimiento.

Optimización de imagen en profundidad

Las imágenes son a menudo los recursos más pesados en una página web y la causa más común de los puntajes LCP pobres. Una estrategia de optimización de imagen integral aborda el formato, las dimensiones, la compresión y el comportamiento de carga.

Formatos modernos

WebP proporciona tamaños de archivo significativamente más pequeños que JPEG y PNG con calidad comparable. AVIF ofrece una compresión aún mejor, pero tiene menos soporte para el navegador. Utilice el elemento imagen o la negociación de contenido para servir formatos modernos a los navegadores que los admiten mientras vuelve a JPEG para navegadores más antiguos. La mayoría de los CDN y servicios de optimización de imágenes manejan la conversión de formatos automáticamente.

Imágenes responsive

Sirve imágenes de tamaño adecuado para cada dispositivo. Una imagen de héroe de 3000 píxeles de ancho que se muestra en una pantalla móvil de 375 píxeles de ancho de banda desperdicia en píxeles que nunca se ven. Utilice los atributos srcset y sizes para indicar al navegador qué archivo de imagen descargar según el ancho de la ventana de visualización. Esta optimización única puede reducir drásticamente la transferencia de datos en dispositivos móviles.

Carga perezosa

Añadir el loading="lazy" Atributo a las imágenes debajo del pliegue para que el navegador solo las descargue a medida que el usuario se desplaza hacia ellas. No cargue imágenes de forma perezosa en la ventana de visualización inicial (por encima del pliegue), ya que esto retrasa el LCP. Para la imagen del héroe o la imagen del contenido principal, utilice loading="eager" (u omitir el atributo por completo) y considere precargarlo con una etiqueta rel + precargar enlace para una representación más rápida.

Optimización de fuentes

Las fuentes web pueden causar dos problemas de rendimiento: la representación de texto retrasada (los usuarios ven un espacio en blanco donde el texto debe estar hasta que se cargue la fuente) y los cambios de diseño (reflujo de texto cuando una fuente web reemplaza a una fuente del sistema). Ambos problemas afectan a Core Web Vitals.

Uso font-display: swap en sus declaraciones de cara de fuente para mostrar texto inmediatamente en una fuente de reserva mientras se carga la fuente web. Precarga tus archivos de fuente más importantes con el enlace rel . preload para comenzar a descargarlos antes. Subconjunto de las fuentes para incluir sólo los caracteres que realmente utiliza (caracteres latinos, por ejemplo, en lugar de la gama completa Unicode). Anfitrión fuentes localmente en lugar de cargarlos desde Google Fuentes si desea el máximo control sobre el comportamiento de almacenamiento en caché y carga.

Vitales de la Web para aplicaciones de una sola página

Las aplicaciones de una sola página (SPA) creadas con React, Vue o Angular presentan desafíos únicos de Core Web Vitals. La navegación del lado del cliente no activa nuevas cargas de página, por lo que la medición tradicional de CWV captura solo la carga inicial de la página. Sin embargo, el rendimiento percibido por el usuario durante la navegación en la aplicación sigue siendo importante para la experiencia del usuario.

Para la carga inicial de la página, asegúrese de que el renderizado del lado del servidor (SSR) o la generación de sitios estáticos (SSG) para que el primer contenido significativo aparezca rápidamente sin esperar a que se ejecute JavaScript. Dividir el código de su aplicación para que los usuarios solo descarguen el JavaScript necesario para la vista inicial. Carga lenta de fragmentos de nivel de ruta para que las páginas posteriores se carguen a pedido. Monitoree sus métricas de usuario real de cerca porque las herramientas de laboratorio a menudo subestiman el impacto CWV de las aplicaciones JavaScript grandes.

Flujo de trabajo de optimización CWV para equipos

Mejorar Core Web Vitals a menudo requiere coordinación entre desarrolladores, diseñadores, equipos de contenido y marketing. Establecer un flujo de trabajo claro: marketing identifica las páginas de mayor prioridad (basadas en el tráfico, las conversiones y las puntuaciones actuales de CWV), el equipo de desarrollo diagnostica los problemas específicos utilizando herramientas de laboratorio y datos reales de usuario, los diseñadores ajustan los diseños y los activos para cumplir con los objetivos de rendimiento, y el equipo de contenido garantiza la optimización de la imagen y la estructura de contenido admite una carga rápida.

Establece presupuestos de rendimiento para cada plantilla de página: peso máximo total de página, tamaño máximo de JavaScript, número máximo de solicitudes y puntajes CWV objetivo. Integre las pruebas de rendimiento en su canal de implementación para que las regresiones se detecten antes de que lleguen a producción. Trate el rendimiento como una característica, no como una idea de último momento, al incluir los objetivos de CWV en los requisitos para cada nueva plantilla o característica de página.

El caso de negocios para los Vitales de la Web

Más allá de las clasificaciones SEO, mejorar Core Web Vitals tiene un impacto comercial directo. Las páginas más rápidas reducen las tasas de rebote, aumentan las páginas por sesión y mejoran las tasas de conversión. Múltiples estudios a gran escala de Google y otras compañías han demostrado correlaciones entre las mejoras en la velocidad de la página y los aumentos de ingresos. Si bien el impacto exacto varía según la industria y el modelo de negocio, la dirección es consistente: las páginas más rápidas, más receptivas y más estables visualmente funcionan mejor según cada métrica comercial.

Enmarcar las mejoras de CWV en términos comerciales cuando se aboga por recursos. En lugar de “necesitamos reducir nuestro LCP de 4.2 segundos a 2.4 segundos”, dice “mejorar la velocidad de carga de nuestra página para cumplir con los estándares de Google podría reducir nuestra tasa de rebote y mejorar las tasas de conversión, según los puntos de referencia de la industria para mejoras de velocidad en nuestra vertical”. La métrica técnica importa; el resultado del negocio motiva la inversión.