El motor de búsqueda más potente del mundo “Google” pretende mejorar aún más la experiencia de los usuarios con un nuevo conjunto de métricas llamado Core Web Vitals. Las actualizaciones se anunciaron a principios de 2020, pero se espera que se empiecen a aplicar en algún momento de 2021.
Para refrescar los fundamentos de la optimización de los motores de búsqueda, Google publica una lista de señales o factores que utiliza para clasificar las páginas en las SERP. Estas señales son patrones de comportamiento que Google utiliza para evaluar las webs y decidir si merecen un lugar destacado en las páginas de resultados.
Los patrones pueden ser positivos o negativos, dependiendo de cómo interactúan los usuarios con el sitio web. Existe una interacción positiva si un usuario navega por sus páginas y se suscribe a un boletín informativo. Pero si apenas se desplaza por tu página de inicio y se va a otro sitio web, eso es obviamente una interacción negativa.
Las señales de clasificación de Google se centran principalmente en el usuario. Algunos de los factores más importantes son la calidad del contenido, la velocidad de carga de la página y la facilidad de uso en dispositivos móviles, todo ello orientado a mejorar la experiencia del usuario.
Asegurar una experiencia de usuario óptima es clave para el éxito a largo plazo de cualquier web. Tanto para el propietario de un negocio, como para el especialista de marketing o desarrollador Los Web Vitals pueden ayudarte a cuantificar la experiencia de tu sitio e identificar oportunidades de optimización.
Información general
Web Vitals es una iniciativa de Google para proporcionar una guía unificada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web.
Google ha proporcionado una serie de herramientas a lo largo de los años para medir y generar informes de rendimiento. Algunos desarrolladores son expertos en el uso de estas herramientas, mientras que a otros les resulta difícil mantenerse al día con la enorme cantidad de herramientas y métricas disponibles.
Esta iniciativa de Google tiene como objetivo simplificar el panorama y ayudar a los webmasters a centrarse en las métricas que más importan, los llamados Core Web Vitals.
¿Qué son las Core Web Vitals?
Los Core Web Vitals son el subconjunto de Web Vitals que se aplica a todas las páginas web, todos los propietarios de sitios deben medirlos y aparecerán en todas las herramientas de Google. Cada uno de los Core Web Vitals representa una faceta distinta de la experiencia del usuario, que se puede medir y reflejar la experiencia real de un resultado indispensable centrado en el usuario.
Las métricas que componen los Core Web Vitals evolucionarán con el tiempo. El conjunto actual se centra en tres aspectos de la experiencia del usuario: carga , interactividad y estabilidad visual, e incluye las siguientes métricas:
Largest Contentful Paint (LCP)
Se refiere al tiempo para la carga del contenido más extenso, LCP por sus siglas en inglés, mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los 2,5 segundos desde que la página comienza a cargarse.
Puedes comprobar el LCP de tu sitio en Google Search Console.
Toma nota del LCP recomendado:
- 2,5 segundos o menos: Buena
- Más de 2,5 segundos a 4,0 segundos: Necesita mejorar
- Más de 4,0 segundos: Pobre
- Se recomienda analizar el percentil 75 de las cargas de páginas en todos los dispositivos para alcanzar el objetivo de “2,5 segundos o menos” para la mayoría de sus usuarios.
En el próximo lanzamiento de Core Web Vitals, habrá cinco elementos que se tendrán en cuenta para LCP. Es posible que se añadan otros elementos en el futuro.
- Elementos <img>;
- Elementos <image> dentro de un elemento <svg>;
- elementos <video> (se utiliza la imagen del cartel);
- Un elemento con una imagen de fondo cargada a través de la función url (en lugar de un gradiente CSS); y Elementos a nivel de bloque que contengan nodos de texto u otros elementos de texto.
- Una página con muchas imágenes de alta resolución es probable que tenga un LCP deficiente. En este caso, es posible que tengas que cambiar el tamaño de las imágenes o eliminar algunas de ellas.
El tamaño del elemento, como el tamaño de la imagen, que se reporta para LCP es normalmente el tamaño visible para el usuario dentro de la ventana gráfica de lo que se muestra en la pantalla. Si una imagen ha sido redimensionada a partir de su tamaño intrínseco (tamaño basado en el contenido de un elemento, si no se le aplicaron factores externos), el tamaño que se informa es el tamaño visible o el tamaño intrínseco, el que sea menor.
Consejos de optimización para la pintura de mayor contenido (LCP)
- Elimina los elementos de la página con tamaños grandes. Comprueba en cada página si hay elementos que ralentizan el LCP.
- Opta por imágenes responsive que se adapten dinámicamente al tamaño de la ventana del navegador.
- Establece una carga asíncrona o “Lazy Load” que posponga la inicialización de los elementos de la página hasta el momento en que se necesiten. Las imágenes sólo se cargarán cuando el usuario interactúe con la página.
- Elimina los scripts innecesarios de terceros, que ralentizan una página una media de 34 milisegundos.
- Elimina las partes innecesarias de tu código mediante la modificación del CSS. Esto reduce el tamaño del archivo y acelera el tiempo que un navegador descarga y ejecuta el código.
First Input Delay (FID)
Se refiere al tiempo hasta que se puede realizar la primera interacción con la página web, FID por sus siglas en inglés, mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.
First Input Delay es un Core Web Vital que mide el tiempo que transcurre desde que un usuario real interactúa con tu página hasta que el navegador puede empezar a procesar los eventos. Estas interacciones pueden ser hacer clic en un enlace, elegir una opción de menú o escribir una dirección de correo electrónico en un campo.
Si tu página sólo contiene contenido, como una entrada de blog, las interacciones medibles son el desplazamiento de la página o el acercamiento y alejamiento. Pero esencialmente, el FID se refiere a las interacciones en las que un usuario introduce datos en un campo de una página.
Sus datos FID están disponibles en Search Console.
A continuación se muestra la clasificación de la puntuación FID de tu sitio web:
- 100 milisegundos o menos: Bueno
- Más de 100 milisegundos a 300 milisegundos: Necesita mejorar
- Más de 300 milisegundos: Pobre
- Aspire a tener una puntuación FID de 100 milisegundos o menos. Un buen umbral para medir es el percentil 75 de las cargas de páginas, segmentado entre dispositivos.
Tenga en cuenta, sin embargo, que Search Console puede no tener datos de FID en sus páginas, ya que no todas las interacciones son relevantes para el FID. El FID sólo mide el retraso en el procesamiento de eventos, por lo que sólo debe considerar el retraso de entrada.
¿Qué causa el retardo de entrada (o latencia de entrada)?
Los usuarios experimentan un retraso de entrada cuando una página tarda demasiado en responder a eventos o interacciones. La razón más común es que el navegador está ocupado analizando y ejecutando un gran archivo JavaScript. Los elementos HTML, como los campos de texto y los desplegables de selección, tienen que esperar a que se completen las tareas del hilo principal antes de responder a las interacciones del usuario.
Consejos de optimización para el retraso de la primera entrada (FID)
- Reduce el tiempo de ejecución de JavaScript. El JavaScript que tarda demasiado en ejecutarse conlleva varios costes, como los de red, los de análisis y compilación y los de ejecución. Como se ejecuta en el hilo principal, retrasa tu Tiempo de Interacción (TTI).
- Reduce el impacto del código de terceros. El JavaScript de terceros son scripts incrustados en tu sitio web que no son de tu autoría o que se sirven desde servidores de terceros. Para no afectar al rendimiento de sus páginas, audita y limpia regularmente los scripts de terceros redundantes.
- Minimiza el trabajo del hilo principal. El hilo principal del proceso de renderización suele encargarse de la mayor parte del trabajo de convertir tu código en una página con la que los usuarios puedan interactuar. Si el hilo principal está ocupado, como cuando ejecuta un JavaScript de gran tamaño, es posible que tus páginas no responden inmediatamente a las interacciones del usuario.
Cumulative Layout Shift (CLS)
Se refiere a el cambio acumulativo en el diseño, CLS por sus siglas en inglés, mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.
El tercer Google Core Web Vital es el cambio de diseño acumulativo que mide la estabilidad de una página mientras se carga. La estabilidad visual ayuda a garantizar que no se produzca un movimiento inesperado del contenido de la página, como que los textos y los enlaces se muevan o cambien de lugar mientras se carga una página (o cambio de diseño).
La inestabilidad se produce cuando los recursos se cargan de forma asíncrona o los elementos del DOM se inyectan dinámicamente en la página por encima de los elementos existentes. Las imágenes, los anuncios, las incrustaciones y los iframes sin dimensiones también pueden provocar un CLS deficiente.
CLS analiza todas las puntuaciones de cambios de diseño individuales para cada cambio de diseño inesperado durante la vida de una página. Los cambios de diseño sólo se producen cuando los elementos existentes cambian tu posición inicial. Además, un cambio afecta negativamente a la puntuación de CLS sólo si el usuario no se lo espera. Si un cambio de diseño es iniciado por el usuario o se produce en respuesta a la interacción del usuario, como hacer clic en un enlace, la puntuación CLS no se ve afectada.
Puedes comprobar tu puntuación CLS en Search Console o PageSpeed Insights:
- 0,1 o menos: Buena
- Más de 0,1 a 0,25: Necesita mejorar
- Más de 0,25: Pobre
- Deberías esforzarte por tener una puntuación CLS de menos de 0,1 o para garantizar a los usuarios una buena experiencia en la página.
Consejos de optimización para el cambio de diseño acumulativo (CLS)
- Incluye atributos de tamaño en las imágenes y los elementos de vídeo para garantizar que el navegador del usuario pueda asignar la cantidad correcta de espacio que ese elemento utilizará en una página. También puedes reservar el espacio necesario con cuadros de relación de aspecto CSS.
- Evita insertar contenido sobre el existente, excepto en respuesta a la interacción del usuario. Recuerda que un cambio de diseño está bien siempre que el usuario lo espere. Reserva suficiente espacio en la ventana gráfica para evitar que los elementos de la página se desplacen de forma sorprendente.
- Guarda espacio estático para para reducir el desplazamiento de los anuncios. Reserva el mayor tamaño posible para los anuncios, pero asegúrate de que llenan el espacio; de lo contrario, te arriesgas a tener un espacio negro.
- Elige las animaciones de transformación en lugar de las animaciones de las propiedades que desencadenan los cambios de diseño. Ten en cuenta que algunas propiedades CSS provocan cambios en el diseño cuando se modifican. Estas propiedades incluyen la anchura y la altura, el margen y la familia de fuentes.
- Deja espacio suficiente para las incrustaciones con un marcador de posición o un recurso. Las incrustaciones, como los vídeos de YouTube y las publicaciones en las redes sociales, suelen ocupar mucho espacio, lo que provoca cambios de diseño cuando se cargan.
Herramientas para medir los Core Web Vitals
El Chrome User Experience Report (Informe de experiencia del usuario de Chrome) recopila datos de medición de usuarios reales y anónimos para cada Core Web Vital.
Estos datos permiten a los webmasters evaluar rápidamente el rendimiento sin tener que instrumentar manualmente los análisis en sus páginas, y potencian herramientas como PageSpeed Insights y el informe de Core Web Vitals de Google Search Console.
| LCP | FID | CLS | |
| Chrome User Experience Report | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (Core Web Vitals Report) | ✔ | ✔ | ✔ |
Evolución de los Web Vitals
Los Web Vitals y los Core Web Vitals son los mejores indicadores disponibles que los desarrolladores tienen en la actualidad para medir la calidad de la experiencia en la web, pero estos KPIs no son perfectos y se debe mejorar mucho sus sistema de medición.
Los cambios en estas métricas tendrán un impacto de gran alcance; por ello, los desarrolladores deben esperar que las definiciones y los umbrales de Core Web Vitals sean estables y que las actualizaciones ocurran con un previo aviso y una cadencia anual predecible.
Puntos clave
Si mejora la experiencia del usuario en tu sitio web, fomentará la navegación. Las Google Core Web Vitals “son un conjunto de métricas, centradas en el usuario, que cuantifican aspectos clave de la experiencia del usuario”. Éstas sirven de guía para mejorar aún más la experiencia de la página y, en última instancia, te ayudan a alcanzar tus objetivos de optimización web.
Al explorar estas nuevas Web Vitals, recuerda estos puntos principales:
- Puedes mejorar el LCP o la métrica relativa a la velocidad de carga eliminando los elementos de gran tamaño y los scripts innecesarios de terceros. Quita cualquier elemento, especialmente de JavaScript, que ralentice tu LCP.
- Mejora tu puntuación FID o el tiempo que transcurre antes de que el usuario interactúe realmente con tu página reduciendo el tiempo de ejecución de JavaScript, limpiando los scripts de terceros y minimizando el trabajo del hilo principal.
- Puedes mejorar tu CLS o la métrica de la estabilidad visual estableciendo atributos de tamaño en los elementos de la página, reservando espacio para los anuncios y las incrustaciones, y eligiendo animaciones de transformación que eviten los cambios de diseño.
- Al realizar cambios en tu sitio web, coloca siempre la experiencia del usuario en el top de tus prioridades. Al fin y al cabo, las señales de clasificación de Google se centran en el usuario.