Comprensión de los elementos básicos de la web: los signos vitales de su sitio web

En mayo de 2020, Google lanzó Core Web Vitals, un conjunto de métricas para evaluar el rendimiento de un sitio web. Como resultado, algunos sitios experimentaron una disminución del tráfico; sin embargo, otros que se adaptaron rápidamente vieron beneficios significativos.

Este artículo tiene como objetivo desmitificar los Core Web Vitals y resaltar su importancia para los sitios web comerciales. Exploraremos cómo estas métricas pueden mejorar la experiencia del usuario y, en consecuencia, mejorar los resultados comerciales, como las tasas de conversión.

Así es como el equipo de Google enfatiza El valor de Core Web Vitals:

“Los propietarios de sitios no deberían ser expertos en rendimiento para comprender la calidad de la experiencia que brindan a sus usuarios. La iniciativa Web Vitals tiene como objetivo simplificar el panorama y ayudar a los sitios a centrarse en las métricas más importantes: Core Web Vitals”.

"Recomendamos encarecidamente a los propietarios de sitios que obtengan buenos Core Web Vitals para tener éxito con la Búsqueda y garantizar una excelente experiencia de usuario en general".

"Los principales sistemas de clasificación de Google buscan recompensar el contenido que proporciona una buena experiencia en la página".

yo trabajo en un empresa de desarrollo web , y en esta publicación, compartiré las ideas de mi equipo y las cosas que hacemos cuando trabajamos en los sitios web de los clientes. Además, incluyo estrategias prácticas para alinear su sitio web con los estándares de Google, garantizando una sólida presencia en línea. ¡Empecemos!

¿Qué son los Core Web Vitals?

Core Web Vitals, presentado por Google, son elementos clave que desempeñan un papel crucial a la hora de determinar la experiencia general del usuario de una página web. Son parte de lo que Google llama señales de "experiencia de página", que se utilizan para decidir qué tan bien clasifica una página en los resultados de búsqueda.

Estas métricas están diseñadas para brindar a los propietarios de sitios web una imagen clara de cómo los usuarios reales experimentan su sitio. Se centran en aspectos como la rapidez con la que se cargan las páginas, la estabilidad del diseño durante la carga y la rapidez con la que un sitio responde a las interacciones del usuario. Mejorar estos factores puede conducir a mejores posiciones en los resultados de búsqueda de Google, lo cual es crucial para cualquier negocio en línea.

Exploraré Core Web Vitals con más detalle en las siguientes secciones, ayudándolo a comprender cómo funcionan y cómo puede optimizar su sitio web para estas importantes métricas.

Historias de éxito de empresas que se preocupan por CWV

Para demostrar el punto de la sección anterior, también podemos abrir una cuenta de Google. Informe de vitales web principales y haga clic en " Lea estudios de casos adicionales aquí ". Este recurso nos cuenta historias reales de éxito de sitios web que solucionaron sus problemas de rendimiento y obtuvieron una gran ventaja. Echemos un vistazo a algunas de estas historias:

• Grupo Renault descubierto un vínculo significativo entre Largest Contentful Paint (LCP) y las tasas de conversión y rebote de su sitio web. Observaron que mejorar el LCP en tan solo un segundo podría disminuir la tasa de rebote hasta en 14 puntos porcentuales y aumentar las conversiones en un 13%.
• Farfetch experimentado un aumento del 1,3% en la tasa de conversión web con cada 100 ms de mejora en LCP.
• Prueba A/B de Rakuten 24 reveló que mejores web vitals llevaron a un aumento del 53,4% en los ingresos por visitante, un aumento del 33,1% en la tasa de conversión, un crecimiento del 15,2% en el valor promedio de los pedidos y una caída del 35,1% en la tasa de salida, entre otros beneficios.
• Carpe, al mejorar su LCP en un 52% y su cambio de diseño acumulativo en un 41%, sierra un crecimiento del 10% en el tráfico, un aumento del 5% en las tasas de conversión de la tienda en línea y un aumento del 15% en los ingresos.

Impacto en SEO

Core Web Vitals son cruciales para el SEO, ya que proporcionan métricas claras para la experiencia del usuario, un factor que Google ahora incluye en su algoritmo de clasificación. Esta integración subraya la necesidad de que los sitios web cumplan con estos estándares para un mejor posicionamiento en los resultados de búsqueda.

SEO (optimización de motores de búsqueda) es la práctica de mejorar un sitio web para mejorar su clasificación en los resultados de los motores de búsqueda, ayudando a atraer más visitantes y clientes potenciales.

Más allá del SEO, Core Web Vitals impacta el rendimiento general del sitio web. Los sitios web que obtienen una buena puntuación en estas métricas se cargan más rápido, brindan una interacción estable y mejoran la facilidad de uso, lo que genera una mayor participación del usuario y tasas de conversión.

Si bien son importantes, los Core Web Vitals son solo uno de los muchos factores en los criterios de clasificación de Google. Sobresalir en estas métricas puede mejorar la clasificación de búsqueda de un sitio, pero no garantiza una ubicación superior. Una estrategia de SEO integral debería considerar estos junto con otros factores.

En mayo de 2021, Google anunció que Core Web Vitals se convertiría en un factor de clasificación oficial. Esta actualización significa que los sitios web con mejores puntuaciones pueden obtener clasificaciones mejoradas y aquellos con puntuaciones bajas podrían enfrentar sanciones.

En resumen, el enfoque de Google en Core Web Vitals refleja su objetivo de optimizar la experiencia del usuario en los resultados de búsqueda. Es probable que los sitios web que funcionan bien en estas áreas brinden mejores experiencias de usuario, se alineen con los objetivos de Google y potencialmente obtengan clasificaciones de búsqueda más altas.

Ciclo de vida de las métricas CWV

El ciclo de vida de las métricas es un concepto crucial para las empresas que se centran en el rendimiento web. Este ciclo de vida avanza a través de etapas, lo que permite a las empresas tener tiempo para adaptarse a medida que las métricas evolucionan de experimentales a estables. Este proceso es clave para una planificación empresarial eficaz y estrategias de optimización de sitios web, ya que enfatiza la importancia de la retroalimentación de las partes interesadas y de los cambios graduales y bien comunicados para lograr previsibilidad y estabilidad.

Comprender las etapas del ciclo de vida ayuda a comprender las herramientas de medición y estar preparado para las actualizaciones entrantes.

Core Web Vitals tiene tres etapas de ciclo de vida:

• Etapa experimental

Aquí se desarrollan y prueban nuevas métricas. Esta etapa tiene como objetivo abordar los problemas de rendimiento web de manera efectiva, refinando las métricas existentes. También implica recopilar comentarios de una amplia comunidad para detectar cualquier problema y posiblemente ajustar la definición inicial de la métrica.

• Etapa pendiente

Las métricas que son prometedoras se perfeccionan aún más en función de los comentarios iniciales. Permanecen en esta fase durante al menos seis meses, lo que les da tiempo para adaptarse dentro del ecosistema. Las aportaciones de los desarrolladores y otras partes interesadas son cruciales durante esta etapa a medida que crece el uso de estas métricas.

• Etapa estable

Una vez que las métricas resultan efectivas y pasan la etapa Pendiente, entran en la fase Estable. Aquí, se finalizan y reciben soporte continuo, incluidas correcciones de errores y actualizaciones ocasionales. Cualquier cambio en estas métricas se comunica detalladamente a través de documentación oficial.

Criterios de evaluación de Google

Comprender cómo evalúa Google el rendimiento del sitio web es fundamental para garantizar que su sitio cumpla con los estándares que afectan su visibilidad y experiencia del usuario. Exploraremos los criterios de evaluación de Google y ofreceremos información para mejorar su presencia en línea.

Google utiliza métricas específicas con valores de umbral establecidos para medir el rendimiento del sitio web. Para la mayoría de las métricas, Google recomienda centrarse en el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio. Esto significa apuntar a objetivos de rendimiento para al menos el 75% de las visitas a su página en cada categoría.

Este enfoque garantiza que la mayoría de sus usuarios tengan una buena experiencia en su sitio. Considera factores como la velocidad de carga de la página, la interactividad y la estabilidad del diseño.

Las herramientas que verifican el cumplimiento de Core Web Vitals utilizan este criterio del percentil 75 para determinar si un sitio pasa. Cumplir con estos estándares en las métricas de Core Web Vitals garantiza un buen rendimiento para la mayoría de los usuarios, ya sea en dispositivos móviles o de escritorio.

Distinguir entre datos de campo/laboratorio

Comprender los matices de los datos de campo y de laboratorio es esencial para cualquiera que desee optimizar el rendimiento del sitio web y, en última instancia, generar mejores resultados comerciales. Conocer las fortalezas y limitaciones de cada tipo de datos es clave para desarrollar un sitio web que funcione bien en todos los escenarios de usuario.

datos de laboratorio

Los datos de laboratorio se recopilan en un entorno controlado, lo que los hace ideales para la depuración. Proporciona condiciones consistentes para las pruebas, lo que puede ayudar a identificar y solucionar problemas de rendimiento. Sin embargo, es posible que no siempre represente experiencias de usuario del mundo real debido a su naturaleza controlada.

Ventajas:

• Ideal para depurar problemas.
• Las condiciones de prueba consistentes permiten una resolución de problemas específica.

Desventajas:

• Puede que no refleje los obstáculos del mundo real.
• Limitado a la hora de capturar la gama completa de experiencias de usuario.
• Herramientas como Lighthouse y WebPageTest se utilizan habitualmente para recopilar datos de laboratorio.

Datos de campo

Los datos de campo se recopilan de usuarios reales en sus entornos naturales, lo que ofrece información sobre las experiencias reales de los usuarios en diversas condiciones. Ayuda a comprender el rendimiento de su sitio web en el mundo real, pero puede ofrecer métricas limitadas en comparación con los datos de laboratorio.

Ventajas:

• Proporciona un fiel reflejo de las experiencias de los usuarios.
• Útil para comprender el rendimiento en diferentes dispositivos y condiciones de red.

Desventajas:

• Conjunto limitado de métricas.
• Menos detallado para propósitos de depuración específicos.

Para una optimización eficaz del sitio web, es fundamental equilibrar los datos de laboratorio y de campo. Los datos de laboratorio ayudan a identificar y resolver problemas específicos en un entorno controlado. Los datos de campo, por otro lado, ofrecen información sobre cómo los usuarios reales interactúan con su sitio web en distintas condiciones. Los desarrolladores deben utilizar datos de campo para guiar sus parámetros de prueba, como el tipo de dispositivo y las conexiones de red, para garantizar que las pruebas reflejen las experiencias reales de los usuarios. Este enfoque ayuda a crear un sitio web que funcione bien para la mayoría de sus usuarios en escenarios del mundo real.

Repasando cada una de las métricas clave

Las métricas de rendimiento web son herramientas cruciales que se utilizan para evaluar la eficacia y la experiencia del usuario de un sitio web. Estas métricas se clasifican ampliamente en tres tipos: estables, pendientes y experimentales. Cada categoría juega un papel vital al ofrecer una comprensión integral del rendimiento de un sitio web desde diferentes perspectivas.

Métricas estables

Pintura con contenido más grande (LCP)

LCP es una métrica de rendimiento vital que se centra en la velocidad de carga de una página web desde la perspectiva del usuario. Mide el tiempo que tarda el elemento de contenido más grande de una página, como una imagen o un bloque de texto, en cargarse completamente y volverse visible después de que un usuario navega a la página.

La importancia de una buena puntuación LCP radica en su impacto directo en la experiencia del usuario. Los usuarios generalmente esperan que las páginas web se carguen rápidamente y un LCP lento puede generar frustración y hacer que los usuarios abandonen la página.

Para los especialistas en marketing y propietarios de empresas, optimizar para lograr un LCP eficaz (orientación en 2,5 segundos o más rápido) es crucial. Un LCP más rápido ayuda a retener visitantes, reducir las tasas de rebote y mejorar el rendimiento general del sitio web para lograr sus objetivos comerciales, ya sean ventas, generación de clientes potenciales o intercambio de información.

Retraso de la primera entrada (FID)

FID es una métrica que se utiliza para medir el tiempo desde la primera interacción de un usuario con un sitio web (como hacer clic en un enlace o tocar un botón) hasta el momento en que el sitio responde a esa interacción. Esta métrica es esencial para evaluar la capacidad de respuesta de un sitio web. Un FID más bajo significa que el sitio reacciona rápidamente, lo que proporciona una mejor experiencia de usuario. Los sitios deben aspirar a un FID de 100 milisegundos o menos para garantizar la capacidad de respuesta.

Como Core Web Vital estable, FID cuantifica la experiencia que tienen los usuarios con páginas que no responden. Es fundamental asegurarse de que la página sea utilizable. En particular, FID será reemplazado por Interaction to Next Paint (INP) como Core Web Vital en marzo de 2024.

Cambio de diseño acumulativo (CLS)

CLS es una métrica estable de Core Web Vitals que mide la estabilidad visual de un sitio web. Calcula el alcance de los cambios de diseño inesperados durante y después del proceso de carga de una página. Para una experiencia de usuario óptima, el objetivo es mantener CLS lo más bajo posible, idealmente en 0,1 o menos.

Los cambios en el diseño de una página web a menudo ocurren debido a la carga asincrónica de elementos o adiciones dinámicas a la página. Estos cambios pueden alterar la experiencia del usuario, lo que podría provocar clics accidentales y dificultades para interactuar con el sitio. Un diseño estable es particularmente crucial para mantener una experiencia de usuario perfecta y fomentar la interacción del usuario.

La importancia de CLS va más allá de la experiencia del usuario. Afecta directamente las tasas de conversión, ya que es menos probable que los usuarios interactúen o realicen compras en sitios web inestables. Además, dado que Google incluye CLS en sus Core Web Vitals para SEO, una puntuación CLS deficiente puede afectar negativamente la visibilidad de un sitio web en los motores de búsqueda.

Primera pintura con contenido (FCP)

FCP es una métrica clave de rendimiento web que mide el tiempo que transcurre desde que un usuario navega a su página hasta que el primer contenido es visible en la pantalla, ya sea texto, una imagen u otro elemento. Sirve como un indicador temprano de la velocidad de carga de la página, proporcionando la primera señal a los usuarios de que la página se está cargando.

Un FCP rápido asegura a los visitantes que la página está respondiendo, lo que puede reducir las tasas de rebote y mejorar la satisfacción del usuario. Desde una perspectiva de SEO, Google incluye FCP entre sus métricas de experiencia de usuario para los rankings de búsqueda. Mejores puntuaciones de FCP pueden conducir a una mejor clasificación en los motores de búsqueda, generando más tráfico orgánico a su sitio. Un sitio web que carga contenido rápidamente tiene más probabilidades de retener visitantes y lograr sus objetivos comerciales en línea.

Tiempo total de bloqueo (TBT)

TBT es una métrica de laboratorio para medir la capacidad de respuesta de carga de un sitio web, cuantificando específicamente el tiempo en que la página no es interactiva antes de que se vuelva completamente interactiva. Un TBT bajo es crucial para la usabilidad, ya que mejora la experiencia del usuario en el sitio web.

La métrica mide el tiempo total desde la primera pintura con contenido (FCP) hasta el tiempo de interacción (TTI), donde el hilo principal está bloqueado, lo que impide una respuesta de entrada oportuna. Esto es similar a experimentar retrasos en una tienda física, lo que refleja la frustración que los usuarios pueden sentir en línea cuando un sitio web tarda en responder a interacciones como clics o desplazamiento.

Métricas pendientes

Interacción con la siguiente pintura (INP)

La interacción con Next Paint (INP) reemplazará el retardo de la primera entrada (FID) como elemento central de la web en marzo de 2024. INP mide el tiempo desde la interacción de un usuario con una página web hasta que el navegador responde visiblemente, centrándose en la capacidad de respuesta y la interactividad. de la página.

La importancia de INP radica en su impacto en la experiencia del usuario. Una puntuación INP más baja significa un sitio más receptivo, lo que mejora la participación del usuario. Esto es particularmente importante para páginas web dinámicas y complejas. Una mejor capacidad de respuesta, indicada por una buena puntuación INP, puede conducir a mejores tasas de conversión y satisfacción del cliente, algo crucial para el crecimiento empresarial.

La optimización para INP es clave para hacer que un sitio web sea más fácil de usar, garantizar respuestas más fluidas y rápidas a las interacciones de los usuarios y contribuir al éxito de un negocio en línea.

Métricas experimentales

Tiempo hasta el primer byte (TTFB)

TTFB es una métrica de rendimiento web que mide la rapidez con la que el navegador de un usuario recibe el primer byte de datos de su servidor después de solicitar una página. Este tiempo comienza cuando un usuario hace clic en un enlace o escribe una URL y finaliza cuando los datos comienzan a llegar.

TTFB es esencial tanto para la percepción inicial de la velocidad de su sitio como para la experiencia general del usuario. Un TTFB más bajo ayuda a crear la sensación de un sitio de carga rápida, lo que mejora la satisfacción del usuario. Es menos probable que esta respuesta rápida provoque que los usuarios abandonen el sitio prematuramente y es más probable que los mantenga interesados durante sesiones más largas. Si bien no es un factor directo en el algoritmo de clasificación de Google, TTFB contribuye a la velocidad general del sitio, lo cual es importante para el SEO.

Mejorar TTFB requiere centrarse en los tiempos de respuesta del servidor y la eficiencia de la red. La optimización de estos aspectos garantiza una entrega de datos más rápida al usuario, algo crucial para una experiencia positiva y mantener la participación en su sitio. Para la mayoría de los sitios web, apuntar a un TTFB de 0,8 segundos o menos es ideal para garantizar una interacción del usuario receptiva y eficiente.

Métricas obsoletas

Tiempo de interacción (TTI)

Time to Interactive (TTI) se eliminó de Lighthouse 10 debido a su variabilidad causada por solicitudes de red atípicas y tareas largas. Este cambio refleja la evolución continua de las métricas de rendimiento web, a medida que el enfoque cambia hacia medidas más confiables y consistentes de la experiencia del usuario.

La transición a métricas como Pintura con contenido más grande (LCP), Tiempo total de bloqueo (TBT) e Interacción con la siguiente pintura (INP) marca una tendencia hacia métricas que representan con mayor precisión la experiencia del usuario en las páginas web. Estas métricas más nuevas se ven favorecidas por su capacidad de proporcionar una evaluación más estable y precisa de cómo los usuarios interactúan y experimentan un sitio web.

Con la eliminación de TTI de herramientas clave de rendimiento como Lighthouse 10, hay una clara indicación de que la comunidad de rendimiento web valora las métricas que ofrecen un mejor equilibrio entre precisión y coherencia. A partir de 2024 y en adelante, la TTI se considera menos relevante en comparación con estas métricas más nuevas y representativas.

Herramientas para medir el rendimiento del sitio web

Permítanme compartirles las principales herramientas que utilizamos en Anadea cuando trabajamos en los sitios web de los clientes.

Extensión Web Vitals para Chrome

La extensión Web Vitals para Chrome ofrece una forma sencilla de medir las métricas clave de CWV con un solo clic. Proporciona comentarios instantáneos sobre las métricas de carga, interactividad y cambio de diseño, alineándose con los métodos de medición de Chrome y los utilizados en otras herramientas de Google como el Informe de experiencia del usuario de Chrome, Page Speed Insights y Search Console.

Una vez instalada, la extensión muestra una insignia ambiental en su navegador. Esta insignia tiene tres estados visuales para indicar el estado de desempeño:

• Discapacitado (gris)
• Pasando (verde)
• Una o más métricas fallan (rojo)

Simplemente navegue hasta el sitio web que desea evaluar y la insignia mostrará el estado actual de Core Web Vitals.

Al hacer clic en la insignia, podrá acceder a un informe detallado.

Este informe combina sus datos locales de Core Web Vitals con datos de usuarios reales del campo a través de la API Chrome UX Report (CrUX). Esta función proporciona información contextual, lo que le ayuda a comparar sus experiencias individuales con las de otros usuarios de escritorio en la misma página, ofreciendo una vista completa del rendimiento del sitio web.

Información sobre la velocidad de la página (PSI)

PageSpeed Insights (PSI) es una herramienta de Google para analizar la experiencia del usuario de una página web tanto en dispositivos móviles como de escritorio. Ofrece recomendaciones de mejoras y proporciona datos de laboratorio y de campo sobre una página.

PSI simula las condiciones de carga de la página para medir el rendimiento. Para dispositivos móviles, utiliza un dispositivo de nivel medio (Moto G4) en una red móvil, y para computadoras de escritorio, emula una computadora de escritorio con una conexión por cable. El entorno de prueba, incluidas las condiciones de la red, se basa en un centro de datos de Google y puede ver detalles como la ubicación en el bloque de entorno del Informe Lighthouse.

Usar PSI es sencillo: visite el sitio web de PSI, pegue la URL de la página que desea probar en el campo de entrada y haga clic en "Analizar". Luego, PSI proporciona estadísticas de Core Web Vitals para dispositivos móviles y de escritorio, clasificando la calidad de la experiencia del usuario como Buena, Necesita mejorar o Deficiente. Las puntuaciones de 90 o más se consideran buenas, entre 50 y 89 necesitan mejorar y por debajo de 50 son malas.

Un ejemplo del uso de PSI con una página web muestra resultados distintos para computadoras de escritorio y dispositivos móviles. El rendimiento del escritorio puede ser bueno, pero el rendimiento móvil puede variar debido a factores como las capacidades del dispositivo y las condiciones de la red. Por ejemplo, las imágenes de alta resolución que se cargan bien en una computadora de escritorio pueden causar una puntuación baja de Largest Contentful Paint (LCP) en dispositivos móviles debido a su tamaño. La optimización de la primera imagen para pantallas móviles puede mejorar las puntuaciones de LCP y First Contentful Paint (FCP).

Por ejemplo, ingrese a una página de anadea.info, escritorio:

El análisis muestra que el rendimiento de la página es bastante bueno para los usuarios de escritorio. Sin embargo, la ISP también destaca algunas áreas de mejora:

Tenga en cuenta que las comprobaciones móviles pueden revelar resultados diferentes a los de la computadora de escritorio. Es fundamental considerar seriamente la optimización móvil, ya que muchos usuarios acceden a Internet desde sus dispositivos móviles en lugar de hacerlo desde una PC.

La puntuación de "rendimiento" en dispositivos móviles a menudo no es tan buena como en computadoras de escritorio debido a las diferentes velocidades de Internet (Internet por cable versus Internet móvil). Para mejorar esto, debemos analizar qué está causando un rendimiento deficiente.

Dos métricas importantes son el tiempo total de bloqueo (TBT) y la pintura con contenido más grande (LCP). Esas dos métricas por sí solas componen el 55% de la puntuación de desempeño.

¿Cómo arreglar esto? Como ya sabemos sobre LCP, cuantifica cuánto tiempo tarda el elemento de contenido más grande (como una imagen o un bloque de texto) en una página en volverse completamente visible una vez que un usuario abre la página. En esta página, LCP es una imagen, probablemente tenga una resolución alta (para PC), lo cual es redundante para pantallas móviles pequeñas. La solución sería añadir una primera imagen más pequeña y mejor optimizada para las pantallas de los móviles: mejorará el LCP y probablemente también aumentará la puntuación FCP.

Entonces, el tiempo total de bloqueo (TBT) puede verse afectado por scripts pesados o innecesarios. Los diagnósticos de PSI pueden ayudar a identificar problemas como secuencias de comandos no utilizadas e interferencias de secuencias de comandos de terceros. Abordarlos puede mejorar las puntuaciones de TBT.

Si está interesado en saber cómo calcula Google la puntuación de "rendimiento", consulte la imagen a continuación.

El cálculo otorga un peso significativo a métricas como TBT, LCP y Cumulative Layout Shift (CLS), que en conjunto pueden afectar hasta el 80% de la puntuación. De esto, podemos concluir que monitorear y optimizar estas métricas es crucial para mantener un buen rendimiento tanto en la versión móvil como en la de escritorio de un sitio.

Línea de fondo

En conclusión, Core Web Vitals son cruciales para el éxito en línea de su negocio. Garantizan que su sitio web sea rápido, receptivo y agradable para los usuarios. Esto no sólo mejora la experiencia del usuario, sino que también ayuda a lograr mejores clasificaciones de búsqueda y mayores conversiones.