Lo más importante al momento de tener o crear un sitio web, es asegurar que el usuario tenga una buena experiencia en nuestro sitio web. Los web vitals nos ayudan a identificar las oportunidades de mejora en nuestro sitio web y también los errores. La importancia que tienen los core web vitals aplica para cualquier tipo de sitio web.
¿Qué son los core web vitals?
Los core web vitals se aplican a todas las páginas web, y todos los dueños de las páginas deben medir estos y aparecerán en todas las herramientas de Google. Existen diferentes tipos de core vitals, y cada uno representa una experiencia diferente al usuario.
Estos tipos de core vitals o métricas evolucionan con el tiempo. El conjunto de métricas actual (2022) se centra en tres aspectos: carga, interactividad y estabilidad visual. A continuación te explicamos cada una de ellas:
- Largest Contentful Pain (LCP): LCP se refiere a aquellas páginas que su tiempo de carga o apertura es muy alto. O sea que en simples palabras, tu página es muy lenta, lo que le dificulta la experiencia al usuario. Un buen LCP se considera de menos de 2,5 segundos.
- First Input Delay (FID): FID hace referencia a el retraso o demora de la primera entrada. En simples palabras, el FID mide la interactividad de tu sitio web. En simples palabras, mide cuánto tiempo tarda en cargar la acción de un usuario al momento de hacer el primer click en la página. Para darle al usuario una buena experiencia, las páginas deben tener un FID mínimo de 100 milisegundos.
- Cumulative Layout Shift (CLF): CLF se refiere al cambio acumulativo en el diseño. Prácticamente mide la estabilidad visual de tu página web. Para darle una buena experiencia al usuario, las páginas deben tener un CLF de 0,1 como mínimo.
Cada una de estas métricas sirven para asegurarnos de que el objetivo recomendado se está alcanzando. Existe un umbral muy bueno para medir todas estas métricas y se divide en cargas de páginas en dispositivos móviles o computadoras. Es normal que las velocidades de carga en dispositivos móviles sean más lentas, esto es porque normalmente el uso de datos móviles es más lento y por lo tanto no logran cargar la página tan rápido.
Herramientas gratuitas para medir core web vitals
Los core web vitals son de mucha importancia para Google. Como consecuencia se comprometió a aflorar estas métricas en todas sus herramientas populares. A continuación te mostraremos cuáles son las herramientas gratuitas compatibles con los core web vitals y en las que te puedes apoyar.
- Chrome user experience report: El informe de experiencia del usuario de Chrome junta todos los datos de medición de usuarios reales y anónimos para cada tipo de métrica.
Cuando te arroja estos datos, te permite hacer una rápida evaluación del rendimiento y lo mejor es que no tienes que hacer los análisis de páginas manualmente. Esto va a potenciar herramientas como Page Speed Insights y el informe de core web vitals de Google Search Console.
- JavaScript: Cada métrica de los core web vitals puede ser medida desde JavaScript con el uso de APIs estándares de la web. La forma más fácil de medir los web vitals es utilizando la biblioteca de JavaScript de web-vitals.
Esta mide la métrica de una manera que coincide con la forma en que son informadas a cada una de las herramientas de Google.
- LightHouse: La medición en lighthouse es la mejor manera de probar el rendimiento de las funciones de tu sitio o página web. Es una muy buena manera de detectar regresiones de rendimiento antes de que pasen.
Es muy sencillo medir los core web vitals en lighthouse, solamente tienes que estar en la página que deseas auditar, hacer click derecho y seleccionar inspeccionar.
Una vez en la pestaña de inspección, haz click en la opción >> de la barra superior de opciones, seleccionar lighthouse, aplica los filtros necesarios y da click en “analyse page load”.
¿Cómo mejorar los core web vitals para SEO?
Optimizar LCP
Uno de los objetivos del SEO también es mejorar la experiencia del usuario, y eso es algo que en los buscadores se centra en los últimos años.
Para la métrica de LCP lo ideal es mantener menos de 2,5 segundos. Lo que recomendamos hacer para optimizar el LCP es reducir el tamaño de las imágenes y su calidad, ya que esto es lo que más pesa de las páginas. otros puntos son:
- Usa videos en lugar de GIF animados.
- Optimiza tu servidor
- Pon en caché a los archivos
- Usa lazy loading
- Comprime las imágenes
Optimizar FID
El retraso de la primer entrada puede llegar a suceder porque las imágenes y scripts se bajan sin orden. Esto hace que la descarga de la página web se pause y empiece de nuevo. En consecuencia hace que la página no responda bien cuando los usuarios quieran navegar o interactuar con tu sitio web.
Para solucionar este problema, tienes que ordenar la manera en que los archivos se le presentan al navegador para que la descargue. Esto se logra usando atributos HTML para controlar el orden en que se descargan los scripts, imágenes y omitiendo los scripts necesarios.
- Recomendamos reducir el impacto de códigos de terceros
- Reducir el tiempo de ejecución de JavaScript
- Minimizar partes de código sin usar
- Mantener peticiones bajas y el tamaño de transferencia al mínimo.
Optimizar CLS
Cuando el usuario por ejemplo está en tu sitio web y está leyendo un artículo en tu sitio web y de la nada se mueve de donde estaba y se va a otro párrafo, puede hacer que se sienta frustrado y se vaya de tu sitio web. Así que mantener un CLS óptimo es sumamente necesario.
Algunas formas de optimizar el CLS son:
- Siempre incluye los atributos de tamaño en las imágenes y video.
- Jamás pongas contenido sobre otro existente. Excepto en respuesta a una interacción del usuario.
- Prevenir Text(FOUT) usando rel=“preload” en el link para descargar esta fuente.
Plugins de core web vitals para WordPress
A continuación te daremos una lista de los mejores plugins para WordPress que te ayudarán a optimizar la velocidad, organización y carga de tu sitio web. Es muy fácil de instalarlos y también de usarlos:
La importancia de los core vitals
Como pudiste aprender, la importancia de los core web vitals es algo sumamente importante para Google y para los usuarios. De nada sirve tener un sitio web si tiene problemas como los que mencionamos anteriormente.
Muchas veces creemos que cuando se crea un sitio web, es sinónimo de que tu empresa genera confianza y una buena imagen. Pero si tienes problemas de core vitals, tu imagen como persona o empresa puede salir muy perjudicada. Es muy importante que intentes mantenerte al día acerca de las métricas de tu sitio web. Una vez que detectes los problemas no olvides darles una correcta resolución.
Esperamos que este artículo te haya ayudado a entender qué son los core vitals y cómo optimizarlos. Si no tienes tiempo para detectar problemas y optimizarlos, con mucho gusto podemos ayudarte a hacerlo. ¡Contáctanos para obtener más información!