Como ya bien sabrás, el éxito a largo plazo de cualquier sitio web depende de que se garantice una experiencia de usuario de alta calidad. Web Vitals te ayudará a evaluar la experiencia de tu sitio y a encontrar posibilidades de desarrollo, independientemente de la temática de tu página web.
¿Quieres saber cómo influirán los Core Web Vitals en la posición de tu sitio web? ¡Sigue leyendo!
¿Qué es exactamente Web Vitals?
Web Vitals es una iniciativa de Google que tiene como objetivo ofrecer una guía uniforme de métricas de calidad,las cuales son fundamentales para ofrecer una gran experiencia web.
A lo largo de los años, Google ha proporcionado una serie de herramientas para medir e informar sobre el rendimiento. Y aunque algunos desarrolladores son especialistas en el uso de estas herramientas, hay muchos otros que luchan para mantenerse al día con la gran cantidad de opciones que hay.
Y la realidad es la siguiente, y es que no debería ser necesario que los propietarios de los sitios sean expertos en rendimiento para comprender la calidad de la experiencia del usuario que ofrecen. Es por ello por lo que la iniciativa de Web Vitals intenta simplificar el panorama y ayudar a los sitios web a centrarse en las métricas más importantes, conocidas como Core Web Vitals.
¿Qué son los Core Web Vitals?
Se tratan de las nuevas medidas de Google para medir la experiencia del usuario. Si estás interesado en la optimización web, seguro que conoces términos como WPO (Web Performance Optimization) y el valor del diseño UX en el comercio electrónico. Los Core Web Vitals de Google están estrechamente relacionados con estos factores, pero su intención es llevar este proyecto un paso más allá.
En los últimos años, Google ha lanzado una serie de herramientas destinadas a mejorar la experiencia del usuario y a detectar problemas de velocidad de carga. Con el desarrollo e implementación de los Core Web Vitals, que se centran en tres factores clave, pretenden ofrecer unos estándares claros y unificados para una experiencia web excelente.
Anteriormente, Google tenía en cuenta ciertas características de optimización de la experiencia del usuario a la hora de priorizar una página. Sin embargo, hoy son más esenciales que nunca, ya que Google ha indicado que los nuevos indicadores del Core Web Vitals se utilizan como uno de los componentes claves en el posicionamiento web.
Métricas del Core Web Vitals
Los Core Web Vitals, como se ha dicho anteriormente, se basan en tres métricas: LCP (LargestContentful Paint), FID (First Input Delay), y CLS (Cumulative Layout Shift). Estos tres ejes analizan distintas características de un sitio web, y Google ha establecido los límites de los parámetros para definir los sitios web como rápidos, lentos o mejorables.
1) LCP – LargestContenful Paint
Descrito de forma sencilla, es el punto en el que se ha cargado el contenido principal de una página. Es posible que hayas oído mencionar términos como DOM o DOM Content Load por parte de tu equipo de desarrollo o de un SEO en el pasado. Eso es comparable, pero Google afirma que se trata de una estadística más directa basada en el tiempo de renderización de la imagen o el bloque de texto más grande visible.
Dicho de otro modo, si tu sitio tiene una imagen grande o un fondo de vídeo que tarda mucho en cargarse, tienes problemas, ya que el rendimiento de carga será superior a los 2,5 segundos máximos recomendados.
Del mismo modo, si tienes mucho JS o CSS que bloquea la renderización (otro tema popular de SEO & Dev), o si tu sitio está configurado utilizando la renderización del lado del cliente, probablemente tendrás que pasar algún tiempo en los próximos meses perfeccionando tu LCP para satisfacer los nuevos requisitos de Google.
Mejoras a realizar
A continuación, se indican algunas cosas que puedes realizar para aumentar el LCP de tu sitio web:
- Eliminar los scripts de terceros innecesarios: se ha demostrado que cada script de terceros ralentiza una página en 34 milisegundos.
- Actualizatu servicio de alojamiento web: en general, un mejor alojamiento equivale a tiempos de carga más rápidos (incluido el LCP).
- Configura la carga diferida: la carga diferida impide que las imágenes se carguen hasta que el usuario se desplace por la página. Como resultado, podrás alcanzar el LCP de forma más rápida.
- Eliminar los elementos grandes de la página: Google PageSpeed Insights puede notificarte si un elemento de tu página está ralentizando el LCP.
2) FID – First Input Delay
Cuando abrimos una página web en un navegador, normalmente esperamos que la página esté lista para recibir nuestras entradas en el momento en que vemos que un elemento visual, como un botón, una imagen o una barra de desplazamiento, se carga en la pantalla. Aunque parezca que el sitio web se está cargando, esperamos poder hacer clic en el botón o desplazarnos por la página. Sin embargo, cuando nuestra experiencia no está a la altura de nuestras expectativas y una página no responde a nuestras actividades, nos sentimos frustrados, como es lógico.
Y la realidad es que el navegador a menudo no puede responder porque está ocupado en procesar un gran JavaScript que controla una función en la página, ya que, el navegador no tiene los recursos necesarios para iniciar escuchadores de eventos que responderían a la entrada del usuario mientras está cargando este archivo.
El retraso en la primera entrada (FID), el cual debe durar como máximo 100 milisegundos, es un indicador centrado en el usuario que ayuda a cuantificar su descontento. Es fundamental recordar que el FID sólo mide el retraso en el procesamiento del evento iniciado por el usuario, no el tiempo de procesamiento del evento ni el tiempo que se tarda en realizar cambios en el diseño o el contenido de la página.
Mejoras a realizar
A continuación, se presentan algunas sugerencias para mejorar la puntuación FID de tu sitio web.
- Hay que minimizar el uso de JavaScript: los usuarios casi no pueden interactuar con un sitio web mientras el navegador está cargando JS. Como resultado, para el FID, minimizar o diferir el JS en tu sitio web es fundamental.
- Elimina los scripts de terceros que no sean absolutamente necesarios: los scripts de terceros (como Google Analytics, mapas de calor, etc.) pueden tener un impacto negativo en el FID, al igual que en el FCP.
- Utiliza la caché de tu navegador: esto acelera la carga del contenido de tu página. Además, hace posible que el navegador de tu usuario complete las tareas de carga de JS aún más rápido.
3) CLS – Cumulative Layout Shift
¿Has estado alguna vez en un sitio web en el que al desplazarte de repente todo se ha movido? Seguramente era casi como si el diseño se modificara cada vez que se cargaba algo en el sitio web, y todo sumaba mucho movimiento con el tiempo… ¿Cierto? ¡Pues lo has adivinado! Finalmente, este problema ha sido catalogado como una mala experiencia de usuario, además, se ha establecido que, para ofrecer una mejor experiencia de usabilidad, los sitios web deben mantener un CLS de menos de 0,1.
Mejoras a realizar
He aquí algunas medidas básicas que puedes tomar para reducir el CLS.
- Para cualquier medio (vídeo, fotos, GIFs, infografías, etc.), utiliza las dimensiones de atributos de tamaño establecidos: el navegador del usuario sabrá exactamente cuánto espacio ocupará el elemento en la página de esta manera. Y no se modificará sobre la marcha hasta que la página esté completamente cargada.
- Asegúrate de que todos los elementos publicitarios tengan un espacio dedicado: de lo contrario, pueden aparecer de forma inesperada en la página, desplazando la información a la izquierda, a la derecha o a un lado.
- Por debajo del pliegue, añade nuevos elementos de interfaz de usuario: de esta manera, no empujan hacia abajo el contenido que el usuario «espera» que permanezca en tu sitio web.
Cómo medir los Web Vitals
Puedes utilizar Search Console para evaluar los elementos vitales de la web de un sitio que ya está en funcionamiento, ya que Google ha incluido estos índices en el panel de control. En cada una de las URL indexadas, puedes ver cómo están tanto para escritorio como para móvil, y puedes comprobar página por página si hay algún problema.
Los índices pueden variar mucho según las circunstancias, e incluso pueden alterarse a medida que un usuario navega por un sitio web. Los resultados también diferirán entre un sitio en desarrollo o en pruebas y la versión de producción.
Hay una variedad de herramientas que pueden utilizarse para evaluar un sitio web:
- PageSpeedInsights. Proporciona datos sobre los Web Vitals y otras métricas que pueden utilizarse para ayudar a mejorar los sitios web problemáticos, centrándose en el tiempo de carga de la página.
- Extensión Web Vitals de Chrome. Este nuevo addon te da acceso a los índices y te permite ver cómo cambian a medida que interactúas con el sitio, para que puedas buscar problemas particulares como componentes de desplazamiento o retrasos en la carga de algunos objetos.
- WebPageTest. Desarrollada por los ingenieros de Chromium, esta herramienta independiente permite especificar una serie de criterios para analizar un sitio web. Dispone de una API RESTful.
- Google SearchConsole. Si tu sitio está dado de alta en SearchConsole, puedes comprobar desde aquí los Web Vitalspara ver cómo responde página por página y si hay algún grupo de páginas con problemas similares.
- Chrome Dev Tools. Chrome tiene una serie de herramientas para detectar y rastrear problemas, así como una amplia información para evaluar varias partes.