Mejoras fáciles de Core Web vitals en tu web de LCP y CLS

Juan Cascón Baños

hace 3 años

Core Web Vitals: El factor de clasificación en el ranking de Google que debes cuidar. Mejoras fáciles de Core Web vitals en tu web de LCP y CLS.

Google ha anunciado recientemente que, a partir de mayo de 2021, Core Web Vitals se convertirá en un factor de clasificación para las páginas web en su motor de búsqueda. ¿Pero qué son exactamente los Core Web Vitals y cómo afectan a la experiencia del usuario en la web?

En resumen, los Core Web Vitals son un conjunto de métricas que miden la calidad de la experiencia de usuario en una página web. Estas métricas están diseñadas para medir aspectos críticos del rendimiento de la página, como la velocidad de carga, la interactividad y la estabilidad visual.

En particular, los Core Web Vitals se centran en tres métricas clave:

LCP (Largest Contentful Paint): mide el tiempo que tarda en cargarse el contenido más grande y significativo de una página web. Se considera que una buena puntuación de LCP es de menos de 2,5 segundos.
FID (First Input Delay): mide la interactividad de la página, es decir, el tiempo que tarda la página en responder a la primera interacción del usuario, como hacer clic en un botón. Una buena puntuación de FID es de menos de 100 milisegundos.
CLS (Cumulative Layout Shift): mide la estabilidad visual de la página, es decir, la cantidad de movimientos inesperados del diseño de la página mientras se carga. Una buena puntuación de CLS es de menos de 0,1.

Para mejorar estas métricas y obtener una mejor puntuación en Core Web Vitals, Google recomienda una serie de prácticas de optimización. A continuación, se explican algunas de las prácticas más importantes recomendadas para mejorar las métricas de LCP y CLS:

Optimización de LCP:

La imagen principal de la página web, también conocida como «imagen de héroe», es la imagen que aparece en la primera ventana gráfica y generalmente se especifica en los datos estructurados. Para mejorar la puntuación de LCP, se recomienda precargar la imagen principal y establecer la prioridad de obtención en alta. Esto se puede hacer mediante el siguiente código en la sección <head> de la página:

Además, se recomienda no cargar la imagen principal de forma diferida, ya que esto puede provocar retrasos en la carga de la página. En su lugar, se recomienda decodificar la imagen de forma asíncrona y establecer la prioridad de recuperación en «alta», utilizando el siguiente código:

Estas optimizaciones también pueden tener un impacto positivo en la métrica CLS.

Optimización de CLS:

Para evitar que las imágenes causen un cambio de diseño, se recomienda asignar el tamaño de la imagen por adelantado, utilizando el siguiente código:

También se recomienda precargar las fuentes en la página, utilizando el siguiente código:

Además, es importante marcar las fuentes como «font-display: optional» en la declaración de fuentes en el CSS, como se muestra en el siguiente ejemplo:

@font-face {
   font-family: ExampleFont;
   src: url(/path/to/fonts/examplefont.woff) format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: optional;
}

. Leer artículo completo en Frikipandi Mejoras fáciles de Core Web vitals en tu web de LCP y CLS.

Optimización de LCP:

Optimización de CLS:

Entradas recientes para Mejoras fáciles de Core Web vitals en tu web de LCP y CLS