En Internet existen un montón de herramientas que puedes utilizar para conocer el rendimiento de tu web, sobre todo para saber si tus estrategias SEO están funcionando para atraer usuarios y para vender.
Una de ellas es Web Vitals, una herramienta que te permite medir la calidad de tu experiencia de usuario. Está basada en algunas exigencias del algoritmo de Google en el momento del posicionamiento, por lo que puedes asegurarte de medir lo que realmente te interesa.
Lo mejor de este recurso digital, es que cumplen con funcionalidades muy completas y fáciles de interpretar. Su finalidad es garantizar que los propietarios de sitios, desde los más pequeños hasta los más grandes, puedan acceder a una herramienta de análisis de calidad, que muestra una serie de señales cuantificables.
¿Qué son las Core Web Vitals?
Antes de introducirte un poco más en lo que son las Core Vitals, debes entender que éstas forman parte del ecosistema de Web Vitals, que básicamente es un sistema de métricas que te permite conocer muchos datos de tu UX (User Experience o experiencia del usuario).
Con esto, puedes tener una mejor idea de lo que necesitas para cumplir con las expectativas de los algoritmos y lograr un mejor funcionamiento. Este recurso fue ideado por Google y tiene la finalidad de facilitar el proceso de análisis de tu sitio.
Puedes descargarla a través del sitio oficial o como una extensión para Chrome. Suele combinarse con otras Google Tools para ofrecerte una experiencia más completa, como Search Console, Pagespeed Insights o Chrome UX Report.
Con las Core Web Vitals tienes la oportunidad de recibir información instantánea sobre la velocidad de carga, la interactividad de los usuarios, entre otras métricas de diseño web.
Pero, eso no significa que tengas que aprender a utilizarlas todas. De hecho, una de las premisas de este proyecto es que no necesitas ser un experto en las demás estrategias de medición de UX o SEO que te ofrece Google, ya que aquí encontrarás datos suficientes.
Sin contratar a alguien que te ayude o que traduzca la información por ti, realmente podrás llevar todas las estadísticas de tu rendimiento digital por ti mismo.
En cuanto a las Core Web Vitals, que se traducen como Señales Vitales Principales, la herramienta tiene varios proyectos por implementar, pero estas son las más importantes por ahora. Son aplicables en todos los sitios y aparecerán en todas las herramientas de Google para una rápida visibilidad. Son apenas tres pautadas para el 2020-2021, pero cada una de ellas reflejan diferentes aspectos de los usuarios y cómo se relacionan con tu sitio.
Por ahora, Google está utilizando un documento bajo el nombre 2020 Core Web Vitals para las mediciones. Allí hace una clara diferencia y descripción de valores para cada una. No obstante, ha determinado que llegarán más datos o mejoras de estas 3 funciones. Sin más preámbulo échale un vistazo a lo que tienen para ofrecerte ahora mismo.
LCP o Largest Contentful Paint
Esta es la primera métrica que podrás observar. Analiza el rendimiento de la carga de tu sitio, esto lo refleja en una media de segundos. Básicamente indica el tiempo que tarda tu sitio en terminar de cargar hasta el último elemento más grande. La carga normalmente «se esparce» empezando por el texto y por último las imágenes o los vídeos.
Este punto es importante porque gracias a esos formatos los usuarios pueden tener una mejor experiencia de navegación. Si tus elementos tardan demasiado tiempo en cargar no será beneficioso para tu posicionamiento.
De esta forma, la herramienta indica que lo ideal es una carga de menos de 2,5 s, el documento de Google menciona tres escenarios:
- «Bueno» para las cargas de menos de 2,5 s,
- «Necesita mejorar» para las cargas de más de 2,5 s, pero menos de 4,0 s
- «Pobre» para mayores a 4,0 s.
Algunos sitios se concentran en cargar los elementos interactivos primero, de forma que retengan la atención del usuario en la navegación, y después cargan lo demás. Sin embargo, existen varias razones de por qué un sitio puede tener una clasificación «pobre» en LCP. Aquí verás algunas.
Lentitud en el tiempo de respuesta del servidor: Cuanto más tarde el servidor en reproducir tus elementos en pantalla, más subirán tus segundos en la métrica.
Esto puedes solucionarlo cambiando de servidor a uno más rápido, pero algunos propietarios también utilizan TTFB o Time To First Byte, comandos para gestionar las respuestas del servidor como quieras, por ejemplo, hacer que cargue primero las páginas de HTML con caché. Aquí te dejo un post en el que hablo sobre los mejores hosting web.
Bloqueo del proceso en CSS y JavaScript: Los algoritmos suelen analizar tu sitio utilizando un «árbol DOM», si en las ramas u hojas de tu marcado HTML encuentra bloqueos, como etiquetas de Script u hojas de estilo de tipo externas, puede tardar un buen rato en cargar.
Para evitar esto es mejor cancelar o deshabilitar esas etiquetas (que no afecten el funcionamiento de tu sitio) para garantizar una carga más rápida.
Tiempo lento en la carga de recursos: Esta es una de las razones más comunes, pero también más fáciles de resolver. El problema está en que tus elementos, imágenes, videos, entre otros formatos, son muy pesados y cargan con lentitud. La mejor forma de resolverlo es comprimir imágenes y archivos de texto o activar un almacenamiento en caché para los usuarios que regresan.
Deficiencia en la reproducción desde el lado del usuario: Algunos propietarios desarrollan un sitio con una lógica de JavaScript en base a la reproducción del lado del usuario. Esto quiere decir que el usuario no podrá hacer nada en el sitio hasta que el contenido cargue por completo. Se corrige suprimiendo JavaScript crítico o técnicas de pre-renderizado.
FID o First Input Delay
La siguiente Core Web Vital tiene que ver con el nivel de interactividad. En español se traduce como Latencia de la primera interacción, así que es una métrica que también se traduce en el tiempo de respuesta de tu sitio después de que el usuario hace el primer clic.
En este momento se involucran procesos como input, select o textarea. Básicamente, tu sitio debe estar preparado en responder, como viste antes, algunos recursos deben estar completamente cargados antes de permitir al usuario hacer clic, lo que significa más tiempo de espera.
Es por eso que FID se tiene en cuenta al momento de la optimización SEO y para el posicionamiento, ya que la interacción es el primer contacto entre tu sitio y el usuario.
Según Google, un buen FID debe responder a menos de 100 milisegundos, al igual que la señal anterior, esta también se mide en niveles «bueno» (hasta 100 ms), «necesita mejorar» (hasta de 300 ms) y «pobre» (más de 300 ms). Igualmente, existen varias razones y soluciones para un FID pobre, son las siguientes.
Ejecución pesada de JavaScript: Naturalmente, si existe una ejecución pesada durante la carga de página el navegador no podrá responder a la interacción del usuario. Esto suele ser muy frustrante por que el usuario no obtendrá ninguna respuesta incluso si hace clic varias veces.
Para evitar esto, Google propone comprimir los archivos de JavaScript, deshabilitar los que no están en uso y minimizar rellenos polifónicos.
Rotura en las Long Task: El error anterior se desprende de una tarea larga en el JavaScript de una página, si se rompen o se bloquean pueden hasta generar atrasos de 50 ms.
La forma de resolver esto es muy fácil, hacer que esas tareas o Long Task se dividan en varias más pequeñas. Así mostrarás en pantalla lo que le interesa a tu usuario sin necesidad de cargar todo primero para que esté disponible en pantalla.
Poca optimización en interacción de página: Hay una serie de protocolos que debes seguir para optimizar la interacción con el usuario, esto debes hacerlo constantemente para garantizar un mejor rendimiento en FID cada vez. Algunas ideas de optimización son utilizar aplicaciones renderizadas del lado del usuario, crear recuperación de bloqueo en cascadas, eliminar etiquetas de análisis de terceros.
No utilizar un Web Worker: Se trata de un script que puede ejecutarse en segundo plano sin bloquear la página que el usuario está viendo, haciendo posible la interacción, aunque haya elementos que aún no responden. Esto minimiza el tiempo de respuesta al máximo, por lo tanto, mejora la métrica de FID sustancialmente.
CLS o Cumulative Layout Shift
Por último, tienes al responsable de la medición de la estabilidad visual, éste término se refiere a la estabilidad de los elementos en una página a medida que éstos van cambiando.
Normalmente, si ves que un sitio carga lento te darás cuenta que muchos elementos cambian de lugar varias veces, como si se estuvieran ajustando a la pantalla. Entonces, CLS mide la cantidad y frecuencia de esos cambios que afectan la visibilidad.
Los usuarios consideran molesto cada vez que un botón cambia de posición, deben localizar visualmente el elemento y genera frustración, por eso es un elemento muy importante cuando se habla de UX o experiencia del usuario.
Ésta cuenta las veces en las que ocurren esos cambios, la medida ideal es de 0.1, siendo ésta el máximo en el nivel de «bueno», en «necesita mejorar» el máximo es 0,25 y en «pobre» es mayor a 0,25. Algunos tips técnicos para mejorar esta métrica son los siguientes.
Optimizar el tamaño de las imágenes: Algunos sitios no se molestan en indicar o describir el tamaño o peso de las imágenes, lo que provoca un tipo de carga al azar, generando cambios sin límites. Para evitar acumularlos en tu CLS puedes indicar atributos en tu código, como los CSS Aspect Ratio Boxes, para indicar las dimensiones de las imágenes y vídeos.
Dimensionar los banners y anuncios: Si vas a incluir anuncios o banners en tu página tienes que asegurarte de dimensionar bien los elementos, pídele a tus anunciantes que realicen la publicidad con ciertas características, tamaño y peso recomendado, de forma que tu web no pierda el diseño y la buena experiencia de interacción con los usuarios.
Evitar contenido dinámico o pop ups: Últimamente, está de moda utilizar estrategias de atracción de tráfico menos invasivas. Los pop ups o contenido dinámico, como las ventanas emergentes de suscripción al boletín, suelen contarse como cambios en la métrica de CLS. Si las evitas, mejorarás tu tráfico, conversiones y un rango de cambios más bajo.
Limitar las animaciones: Una de las razones de por qué las animaciones han desaparecido de los sitios es debido a que alteran la estabilidad de página al máximo, cada vez que un elemento se mueve es contabilizado en la métrica. Además, es molesto a la vista de los usuarios y suelen distraerlos de lo que realmente les interesa.
Cómo afectan las core web vitals al SEO
Para el año 2021 Google anunciará la puesta en marcha de estos aspectos como unos de los puntos más importantes para el posicionamiento. Es decir, que, si no los tienes en cuenta, o no los implementas en tus estrategias de SEO, te será muy difícil conseguir los principales puestos de la página de resultados del buscador.
Normalmente, la empresa realiza el anuncio 6 meses antes de su implementación en algoritmos, de forma que los propietarios de sitios web puedan prepararse.
De esta forma, se incluirán en la evaluación junto a otras tendencias de SEO como el mobile-friendly o la velocidad de carga. La empresa no indica en qué medida afectarán estas nuevas herramientas, pero ya que sigue las tendencias de mejorar la experiencia del usuario, probablemente tenga un efecto relevante en el posicionamiento web. Aunque después de ver los efectos, prácticamente nulos, del mobile first indexing, es normal que los SEO tengamos nuestras dudas sobre sus efectos.
Todos estos cambios se enfrascarán bajo un nuevo término page experience o experiencia de página. Más adelante se incorporarán otras mediciones que formarán parte del futuro del desarrollo web, así como de los cambios en el mercado digital.
Pasos para instalar Web Vitals en Chrome
Como has leído al principio del post, Web Vitals está disponible como extensión para Google Chrome. No obstante, esta versión sigue en fase alfa, por lo que no basta con ir a la webstore de Chrome para descargarlo, es necesario seguir una serie de pasos que verás a continuación.
Igualmente, también está disponible como archivo instalable en bibliotecas JavaScript, todo lo que debes hacer es lo siguiente.
- Primero descarga la extensión en la Webstore. Accede a chrome://extensions desde el navegador o simplemente selecciona menú en los puntos verticales de la esquina superior derecha, selecciona Más herramientas y después Extensiones.
- Ahora, descarga este archivo ZIP del laboratorio de GitHub.
- Utiliza la herramienta que quieras para descomprimir el archivo.
- Finalmente, activa el modo desarrollador en la página de extensiones de Chrome, arrastra la carpeta del ZIP y suéltala.
- Ahora, habilita la extensión, ya estará listo.
Si quieres probarla ve hasta cualquiera de las herramientas de tool master, como Search Console, Lighthouse o Pagespeed Insights.
Para saber si funciona, abre cualquier sitio, como la URL de tu home. Verás que el ícono de la extensión se encuentra en tu barra de herramientas en color gris, si pasa a color verde significa que tienes un nivel «bueno» en las métricas, si es amarillo, entonces es un nivel «mejorable» y si es rojo es «pobre» en cuanto a experiencia del usuario.
Haz clic sobre ese icono si quieres obtener más datos, desde allí también tienes la opción de configurar.
¿Qué son las Core Updates de Google?
Verás este término muy asociado a las Web Vitals en los próximos meses. Para ser más exactos, las Core Updates son actualizaciones profundas que representan cambios importantes en la indexación de los sitios.
Por ejemplo, la implementación de nuevos algoritmos o nuevas reglas en cuanto al posicionamiento. La función de estas actualizaciones es hacer que el buscador evolucione y adapte sus resultados a las nuevas tendencias de los usuarios, en fin, mejorar su servicio.
Sin embargo, estos cambios suelen significar un giro de 180° para los mercados digitales, tal como lo fue el algoritmo de Panda en sus tiempos. De hecho, las Web Vitals forman parte del próximo Update de Google. Por eso, es necesario que te prepares, te adaptes y modifiques tu forma de hacer SEO, incluso antes de que estos cambios lleguen.
¿Cómo afectará este algoritmo al posicionamiento web?
Este nuevo Update 2020-2021 afectará directamente a la forma en cómo se presenta el contenido, más que nada a favor de las tendencias del uso de los dispositivos móviles.
Así que debes tener un diseño responsive lo antes posible, así como una calidad altísima en los contenidos que publicas. Para garantizar que sigues una buena tendencia en contenido revisa todas las sugerencias en la página de support de Google, así como las optimizaciones en tendencia del último año.
Por el momento, puedes realizar análisis de tu posicionamiento constantemente, ya que esta gran actualización viene acompañada de pequeños cambios diarios que pueden afectar a los rankings.
También puedes implementar esos cambios nombrados en las sugerencias de cada Core Web Vital para que no te pille desprevenido el anuncio de las fechas de implementación oficial.
Y tú, ¿cómo crees que afectarán las core web vitals al posicionamiento web?
Y recuerda, si necesitas ayuda con el SEO no dudes en contactarnos.
Consultor de marketing digital. Especialista SEO, SEM y de diseño web. Entre mis aficiones están el ciclismo, la natación y los videojuegos.