Última modificación el abril 22, 2021 by Cristian Vanegas
Hace un año Google anunció que los Web Core Vitals serían importantes al momento de decidir la posición de los sitios web en el buscador. Ahora es una realidad, ya que en el propio Search Console se encuentra en algunas cuentas esta sección dedicada a este factor determinante para el SEO.
¿Qué son las Web Core Vitals?
Básicamente las Web Core Vitals son aspectos que evalúan la experiencia de usuario, midiendo el tiempo en el que el usuario puede interactuar con el sitio web.
¿Por qué miden la velocidad de carga? Bueno, básicamente porque una buena experiencia de usuario busca evitar a toda costa la frustración, y si el contenido no se accede en el mejor tiempo posible, el usuario sencillamente saldrá de la web y buscará otra página que si le ofrezca el contenido con rapidez.
Los aspectos que evalúa los Web Core Vitals son tres, y de hecho si ya usabas Page Insights para medir la velocidad de carga de tu sitio web, es probable que ya los conozcas:
- LCP (Large Content Paint): Este mide la velocidad de carga teniendo en cuenta el elemento más grande de la página visitada. Es decir, mide qué tanto tarda en cargarse y renderizarse.
- FID (First Input Delay): Este aspecto te indica la cantidad de tiempo que tarda un usuario en interactuar con la página que esté visitando.
- CLS (Cumulative Layout Shift): Mide el tiempo que tarda en generarse cambios en el diseño de la web, siendo estos además los esperados por el usuario. Un ejemplo sería cuando un visitante de la web da clic en un botón y este genera un cambio en el diseño como mostrar una imagen, abrir un formulario o un cambio de texto. Aquí se mide qué tanto tarda en realizar el cambio y si este no genera resultados inesperados. Otro ejemplo serían los anuncios, pop ups y otros elementos intrusivos que generen cambios inesperados.
¿Cómo medir los Web Core Vitals?
En Google Search Console ya se encuentra una herramienta incorporada en la sección de Experience en donde también encuentras Page Experience y Mobile Usability.
Básicamente en la pestaña de Web Core Vitals podrás encontrar un reporte de cuáles son las URLs que tienen un buen desempeño en estos aspectos y cuáles no.
Pero si quieres revisar a detalle, puedes usar Google Page Insights y poner las URLs que te interesa revisar a detalle. Encontrarás un reporte así:
¿Cuáles son los valores ideales?
Como puedes ver en la imagen anterior, los valores de FCP, LCP y CLS están en verde, por lo que se consideran se encuentran en valores ideales. Pero, en caso de que aparezcan en amarillo o en rojo, significaría que requeriría mejoras importantes para lograrlo.
Estos serían los rangos ideales que deberías obtener:
- FCP: Por debajo de los 2.5 segundos el resultado seria ideal, por debajo de los 4 segundos aceptable pero requeriría mejoras, y más de ese valor se consideraría como mal resultado.
- LCP: Debajo de los 2.5 segundos es el ideal, hasta los 4 segundos es aceptable con necesidad de mejorar, y por encima de ese valor sería un mal resultado.
- CLS: Debajo de 0.1 es el ideal, hasta 0.25 es aceptable con necesidad de aplicar mejoras, y por encima de ese valor se considera un mal resultado.
¿Cómo mejorar los resultados de los Web Core Vitals?
Cada aspecto requiere de acciones clave para mejorar, y por ello a continuación te resumiré algunos aspectos que debes mejorar para tener unas métricas positivas.
FCP (First Content Paint)
Como lo que buscas es mejorar la carga del elemento más pesado de la página, Google recomienda, revisar en el informe de Page Insights la sección de Oportunidades. Por ejemplo:
- Asegurarse de que la fuente permanezca visible durante la carga (Esencial): Se puede lograr agregando la característica CSS «font-display».
- Eliminar recursos que bloqueen la renderización del contenido (Uno de los que más impactan en la métrica): CSS, Javascript y recursos externos pueden influir negativamente en la renderización. Procura usar solo códigos externos necesarios como el de Analytics, y agrega características Async o Defer al código que no sea crítico.
- Reducir la respuesta del servidor: Si tu sitio web está diseñado en WordPress, busca un Tema y Maquetador optimizados y solo usa los plugins necesarios. También influye la calidad de hosting que tienes contratado.
- Eliminar CSS innecesario: Agregar la característica Defer a el CSS.
- Permitir la compresión de texto: Publica el texto en gzip, deflate o brotli.
En este artículo en inglés encuentras a detalle cada aspecto.
LCP (Largest Content Paint)
En este aspecto se considera elementos, imágenes y bloques de texto, y el gran tamaño lo determina por lo que es visible para el usuario.
Para mejorar el LCP la clave está en optimizar los elementos como el CSS, las fuentes, las imágenes y el JavaScript.
Aquí encuentras más detalles sobre este tema.
CLS (Cumulative Layout Shift)
Esto está directamente relacionado con el diseño de experiencia de usuario del sitio web, y por ello es crucial que los elementos que conforman el sitio web no generen cambios inesperados que puedan entorpecer la experiencia.
En este caso, Google recomienda agregar atributos de tamaño a las imágenes y de anuncios si los usamos y reservar los espacios donde cargarán dichos anuncios, así como cuidar que los contenidos embebidos cuenten con dimensiones a la medida del diseño.
También se recomienda usar correctamente los pop-ups para evitar clics que el usuario no buscaba en un principio, y otra cantidad de aspectos que encontrarás mejor explicados en Web.dev.
Déjate guiar por un experto en el tema
Si todo lo que expliqué anteriormente te resultó complicado, lo mejor es que te asesores con un experto, ya que muchas de estas cosas solo puedes lograrlo contando con un buen Diseñador UI/UX o con expertos en el CMS en el que está construido tu sitio, como WordPress, Drupal o Joomla.