Core Web Vitals: 5 formas para optimizar tu web

En mayo de 2020, Google anunció las Web Vitals. Se trata de un nuevo conjunto de métricas para medir la velocidad y la experiencia del usuario (UX) de los sitios web.

Dentro de estas Web Vitals, hay un subconjunto de métricas llamado Core Web Vitals. En este caso, se trata concretamente de un conjunto de tres métricas, del mundo real y centradas en el usuario. Cada una de las tres Core Web Vitals representa una faceta distinta de la experiencia del usuario (UX).

En 2021 Google va a utilizar las Core Web Vitals como un nuevo factor de posicionamiento SEO.

Un sitio web podría tener un posicionamiento deficiente a pesar de tener contenido de alta calidad y muchos enlaces entrantes.

¿Cuáles son los tres elementos de las Core Web Vitals?

Para el conjunto actual de Core Web Vitals, Google ha identificado tres puntos focales específicos:

• Carga
• Interactividad
• Estabilidad visual

Hay tres nuevas métricas correspondientes para medir estos tres puntos focales:

1. Largest Contentful Paint (LCP). LCP mide la velocidad percibida de la carga de la página web. Significa la rapidez con la que una página carga y renderiza todo el contenido en la pantalla.

El umbral ideal es mantener el Largest Contentful Paint por debajo de 2,5 segundos.

El LCP por encima de 4 segundos se considera deficiente, lo que repercutirá en el posicionamiento SEO en 2021.

2. First Input Delay (FID). El FID mide el tiempo que tarda un navegador en responder a una interacción iniciada por el usuario. Es decir, mide la interactividad y la capacidad de respuesta del sitio. Un FID bajo garantiza que la página es usable.

El FID ideal debe ser inferior a 100 milisegundos.

3. Cumulative Layout Shift (CLS). El CLS mide la estabilidad visual. Los cambios en la maquetación se producen cuando los elementos de la página se mueven después de ser presentados al usuario. El CLS mide el porcentaje de pantalla afectado por el movimiento.

El CLS ideal debe ser inferior a 0,1.

Ahora que ya hemos visto las tres métricas que conforman los Core Web Vitals, veamos cinco formas para optimizar tu web de cara a estas Core Web Vitals:

5 formas para optimizar los Core Web Vitals de tu web

1. Optimizar las imágenes para mejorar la velocidad de página (Page Speed)

Para cualquier web las imágenes grandes representan a menudo el mayor LCP (Largest Contentful Paint). En promedio, las imágenes suponen el 21% del peso total de un sitio web.

La optimización de imágenes ayuda a una mejor experiencia del usuario, a tiempos de carga más rápidos y oportunidades de posicionamiento adicionales.

Estas son algunas formas de optimizar las imágenes:

1.1. CDN de imágenes. Una CDN de imágenes está especializada en la optimización, transformación y suministro de imágenes. Las CDN de imágenes utilizan las URL de las imágenes para indicar qué imágenes deben cargarse. Muestran la información de la imagen, como el tamaño, el formato y la calidad.

Algunas de las principales CDN de imágenes que puedes utilizar son AWS CloudFront, Akamai y Fastly.

1.2. Formato WebP. Es un formato de imagen recomendado por Google que contiene datos de imagen con compresión tanto sin pérdida como con pérdida.

Puede reducir el tamaño de la imagen hasta un 34% menos que las imágenes JPEG y PNG.

Puedes convertir imágenes al formato WebP a través de la herramienta cwebp o el plugin Imagemin WebP.

1.3. LazyLoad. Es una práctica para retrasar la carga e inicialización de objetos para mejorar el rendimiento y ahorrar recursos del sistema.

Muestra el marcador de posición de la imagen y lo sustituye por la imagen real a tamaño completo al desplazarse (al hacer scroll) por la página.

Al activar LazyLoad solo se renderiza el conjunto inicial de imágenes mientras los usuarios aterrizan en la página. Así se proporciona una experiencia de usuario sin interrupciones.

2. Optimizar JavaScript y CSS

Reducir el tamaño de los archivos JavaScript y CSS tiene un efecto considerable en el tiempo de carga de una web.

Estas son tres formas de optimizar JavaScript y CSS para que los sitios web carguen más rápidos.

2.1. Minificar recursos. Es el proceso de eliminar los espacios y otros caracteres que son redundantes de sus archivos JS y CSS. Al eliminarlos se reduce el tiempo de carga de los sitios web y el uso del ancho de banda.

Se puede minificar manualmente los archivos JS y CSS. Sin embargo, si son muchos archivos y/o grandes es mejor utilizar plugins de optimización. Los dos mejores plugins para WordPress son Fast Velocity Minify y Autoptimize.

2.2. Reducir el bloqueo del renderizado. Los scripts JavaScript y CSS que bloquean el renderizado ralentizan las páginas web. Los navegadores intentan cargar todo a la vez, incluyendo estos scripts.

Por tanto es necesario eliminar los scripts que bloquean la renderización. En primer lugar hay que utilizar PageSpeed Insights para identificar qué scripts están causando problemas. Obtendremos una lista de los scripts JavaScript y CSS que bloquean la renderización. Hay que utilizar plugins como por ejemplo WP Rocket, JCH Optimize o Speed Booster Pack para eliminar estos scripts.

3.3. Poner el CSS al principio y el JS al final. Es una buena práctica poner el JavaScript en la parte inferior de la página web y el CSS en la parte superior en la sección <head>. Esto permite que el navegador cargue el CSS primero antes que el resto de la página. Así conseguimos que los usuarios puedan ver el contenido del sitio web al cargar.

Si se hace al contrario, los usuarios verán una página en blanco hasta que el JavaScript termine de cargarse. Esto significa que los elementos visuales del sitio web no aparecerán hasta que el JavaScript termine de descargarse.

3. Optimizar la plantilla para dispositivos para móviles

En el tercer trimestre de 2020 los dispositivos móviles generaron el 50,81% del tráfico global web.

Hay dos formas principales de evaluar la usabilidad de un sitio web en dispositivos móviles:

3.1 Informe de usabilidad móvil. Revisa el informe de usabilidad móvil de Google Search Console. Este informe mostrará problemas como que el contenido no se ajusta a la pantalla o que el texto es demasiado pequeño, además de mostrar una lista de las URL afectadas por cada problema.

3.2. Prueba de optimización para móviles de Google. Comprueba las plantillas de tus páginas clave mediante la prueba de compatibilidad con dispositivos móviles de Google. Es una buena manera de comprobar las páginas individuales.

Los sitios web suelen fallar en la prueba de optimización para móviles cuando los enlaces están demasiado juntos, el texto es demasiado pequeño para leerlo o no se ha ajustado la ventana gráfica (viewport) para móviles.

4. Optimizar la seguridad del sitio web

Junto con los tiempos de carga y la usabilidad móvil, la seguridad del sitio web también juega un papel importante a la hora de determinar la experiencia de la página.

Google se centra mucho en la seguridad y en eliminar sitios web potencialmente dañinos de los resultados de búsqueda.

Los principales problemas de seguridad surgen de sitios web que contienen contenido malicioso o engañoso. Puede tratarse de malware, spyware, estafas de ingeniería social, phishing o información falsa.

Las páginas con problemas de seguridad aparecen con una etiqueta de advertencia en los resultados de búsqueda cuando un usuario intenta visitarlas.

Una de las mejores formas de comprobar si un sitio web tiene problemas que podrían poner en riesgo a sus usuarios es utilizar el informe de problemas de seguridad de Google Search Console. También se proporcionan instrucciones sobre cómo solucionar el problema.

5. Optimizar fonts

Las fonts o fuentes de letras son archivos grandes que tardan en cargarse. El retraso en la carga de las fonts provoca un retraso en la visualización del texto. Por tanto, aumenta la métrica LCP.

Para solucionar este problema, se puede hacer lo siguiente:

5.1. Evitar que el texto sea invisible durante la carga de las fonts. Se puede utilizar font-display. Es una propiedad CSS de intercambio que informa al navegador de que el texto que utiliza esta fuente debe mostrarse inmediatamente utilizando una fuente del sistema.

5.2 Precarga de la fuente web. Precarga de las fuentes web para el contenido de la parte superior de la página. Se utiliza <link rel= «preload»> para activar una solicitud de la fuente web al principio de la ruta de renderización crítica sin esperar a que se cree el CSSOM.

Si necesitas la ayuda o el apoyo de un Consultor SEO, puedes ponerte en contacto por teléfono, correo o formulario de contacto.

Este artículo es una adaptación libre del publicado en SEO Sandwitch Blog escrito por Joydeep Bhattacharya: 5 Steps To Optimize Your Site For Core Web Vitals.