Desde mayo de 2021, los Web Core Vitals son un importante factor de posicionamiento SEO para Google. Esto no implica que la calidad del contenido haya dejado de ser importante, sino que el SEO técnico cobra relevancia.
Las Web Core Vitals son señales que muestran el rendimiento y usabilidad de las páginas web, y para conocerlas es preciso primero analizar cuál es el comportamiento de los sitios web con respecto a esta métrica. Herramientas como Google Search Console o PageSpeed Insights, ambas gratuitas, muestran datos reales sobre errores y problemas de velocidad.
En estas Core Web Vitals actúan algunos indicadores de referencia, impuestos por Google, uno de ellos es LCP, Largest Contentful Paint. Este parámetro se considera la métrica más importante para medir la velocidad de carga de una web, y con él se controla el rendimiento de carga y el tiempo que tarda en aparecer en la ventana del navegador el contenido visible más grande.
¿Cómo optimizar la métrica LCP, y con ello, las Web Core Vitals?
Un primer apunte interesante es contar con un hosting rápido que sea capaz de garantizar tiempos de carga rápidos, especialmente útiles en portales de ecommerce. A esto hay que sumar bloqueos de renderizado por Javascript y CSS.
Cuando se cargan elementos de Javascript en una página, o al iniciarse algún nuevo componente en la pantalla, se consumen recursos que requieren un determinado tiempo de carga. Esto acaba siendo perjudicial para el LCP.
En este caso, la carga de recursos está muy ligada a las imágenes. Si estas se colocan al inicio de la página, hasta que no se descarguen por completo, con todo su peso, no se visualizará nada más del contenido, lo que acaba bloqueando el renderizado.
Estos problemas de LCP es solucionan con la optimización del server. Los CDN, que permiten alojar recursos como archivos CSS o Javascript, son bienvenidos, así como el cacheo de recursos para que el server responda de manera más rápida ante estos recursos y ofrezca el contenido de manera ágil a los usuarios.
¿Qué papel juega el CSS en las Web Core Vitals?
Con las Core Vitals se pone fin, de manera definitiva, a otras métricas que han quedado obsoletas y que solo servían para reflejar el tiempo de carga del DOM, sin representar la carga real de la página. Los datos LCP se ven afectados por el tiempo de respuesta del servidor, por la precarga de los recursos más importantes y por la optimización de las imágenes.
Además, el CSS juga también un papel importante, como ya hemos anunciado anteriormente. Renderizar bloqueando Javascrpit y CSS ayuda a optimizar esas Core Vitals. Antes de que el navegador pueda mostrar el contenido, este necesita analizar el HTML y a medida que lo va recibiendo, lo lee y lo procesa.
Pero cuando se enfrenta a un fichero o a etiquetas Javascript, comienza a ejecutar estas etiquetas. Las hojas de estilo y los scripts son recursos de bloqueo que retrasan el LCP. La solución para estas situaciones pasa por minimizar el CSS, aplazar todo aquel que no sea crítico e implementar CSS crítico en línea.
Para estas tareas es aconsejable rodearse de profesionales que dominen la terminología y la puesta en marcha de estas herramientas. La agencia SEO Latevaweb en Barcelona es experta en asuntos de SEO y optimización web.
¿Qué otros parámetros determinan el estado de las Web Core Vitals?
Junto a LCP, que marca cuál es el tiempo de carga del elemento más grande y potente en una web, los otros dos parámetros que determinan las Core Vitals son el FID y el CLS. El FID, o First Imput Delay, es la métrica que controla cuál es la primera impresión de un usuario sobre la web.
Este parámetro registra qué tiempo pasa desde que el usuario hace clic por primera vez en una página hasta que el navegador ofrece una respuesta a esa interacción.
El FID mejora con la optimización de Javascript y CSS, poniendo fin a las tareas largas que perjudican a la web y mediante el uso acertado, y limitado, de scripts de terceros, pues algunos de estos pueden no aportar nada al contenido web.
Por su parte, el CLS es Cumulative Layout Shift, o lo que es lo mismo, la situación que se produce cuando un elemento visible del contenido ya renderizado cambia de posición. Si se producen muchos episodios de este tipo es que la web no está respondiendo de manera eficaz, y posiblemente tampoco rápido, perdiendo así usabilidad.
Estos usos optimizados han de ir de la mano de rapidez en la navegación. Para la última opción aparecen como herramienta interesante los Speed test de Google.
CSS, HTML, Web Core Vitals, FID, LCP, métricas, renderización, SEO… todos estos términos pueden sonar a desconocidos, pero son vitales para que cualquier proyecto web funcione y sea atractivo de cara a los internautas, que son quienes acaban convirtiéndose en clientes potenciales.