¿Qué son y cómo optimizar los LPC, FID y CLS? (Core Web Vitals avanzado)

Como ya habrás visto en nuestra GUÍA DEFINITIVA DE LOS CORE WEB VITALS, estos son un conjunto de métricas desarrolladas por Google que tienen como objetivo medir la calidad de la experiencia del usuario en una página web. Estas métricas se centran en tres aspectos clave de la experiencia del usuario: la velocidad de carga, la interactividad y la estabilidad visual.

Los Core Web Vitals son:

1. LCP (Largest Contentful Paint): Mide el tiempo que tarda en cargar el elemento más grande visible en la ventana gráfica del usuario. Un buen LCP generalmente indica que la página muestra contenido significativo rápidamente.
2. FID (First Input Delay): Mide el tiempo desde que el usuario interactúa por primera vez con una página (por ejemplo, haciendo clic en un enlace, tocando un botón, etc.) hasta que el navegador realmente es capaz de empezar a procesar los eventos de interacción. Un bajo FID es un indicador de una página más reactiva.
3. CLS (Cumulative Layout Shift): Mide la cantidad de cambios inesperados en el diseño de una página mientras se carga. Un bajo CLS indica que la página es visualmente estable y que los elementos en la página no se mueven de forma inesperada.

Google utiliza estos Core Web Vitals como parte de sus señales de ranking para la búsqueda, lo que significa que las páginas que se desempeñan bien en estas métricas tienen un mayor potencial para posicionarse más alto en los resultados de búsqueda de Google, por lo que optimizar estos aspectos puede llevar a un mejor posicionamiento de aquellas páginas web que están trabajando el SEO.

En este artículo vamos a tratar, precisamente, cómo optimizar estos tres aspectos.

Optimización del LCP: Largest Contenful Paint (o «Pintura con Contenido más Grande«)

Este métrica mide el tiempo que tarda en cargar el elemento más grande visible en la pantalla dentro de la ventana gráfica del usuario, desde el momento en que se inicia la navegación hasta que dicho elemento se representa completamente en la pantalla.

El LCP es especialmente importante para entender cuánto tiempo tarda una página en mostrar contenido significativo a los usuarios, lo cual es crítico para una buena experiencia del usuario. Un LCP más rápido generalmente indica que la página es más usable y proporcionará una mejor experiencia para los visitantes.

Recuerda que tenemos este artículo: Experiencia de usuario (UX) y SEO, en el que podrás comprender cuál es la importancia de la experiencia que un usuario tiene en una página web para su posicionamiento en Google.

Google sugiere que un buen LCP debería ocurrir dentro de los primeros 2.5 segundos de la carga de la página. Las mediciones que caen entre 2.5 y 4 segundos son consideradas como necesitadas de mejora, y las que superan los 4 segundos se consideran malas.

Con todo esto en mente, veamos diez técnicas prácticas para mejorar el LPC y aumentar su valoración.

‍Usando un CDN

‍Para mejorar el LCP y potencialmente la experiencia del usuario, una red de entrega de contenido (CDN) es una gran herramienta para optimizar la gestión del tráfico del sitio web.

‍Las CDN pueden ayudar a reducir la carga de la red al equilibrar las solicitudes de los usuarios en varios servidores en lugar de ponerlas en cola en el servidor de origen. Puede dar como resultado una puntuación LCP más rápida y una experiencia de usuario mejorada. Los CDN de imágenes también pueden mejorar aún más la velocidad del sitio web al optimizar la transformación y el tamaño de las imágenes en tiempo real. Estos pueden ser beneficiosos para sitios web ricos en contenido multimedia. La configuración de una CDN dependerá de tu proveedor de alojamiento y normalmente se puede implementar rápida y fácilmente.

‍Optimización de imágenes

‍La optimización de imágenes es una excelente manera de mejorar el rendimiento del LCP. Para reducir el tiempo de carga de un sitio web, debes comprimir y cambiar el tamaño de las imágenes, convertir las imágenes a un nuevo formato, usar imágenes receptivas, excluir el elemento LCP de la carga diferida y usar una imagen estática en lugar de un control deslizante.

‍Google recomienda que las imágenes se conviertan al formato WebP para un rendimiento óptimo. Además, las imágenes receptivas deben usarse para computadoras de escritorio y dispositivos móviles, ya que el tamaño de imagen de cada dispositivo debe ser diferente. Por último, es mejor evitar el uso de un control deslizante porque puede ser demasiado pesado en la carga debido al código.

Mejora el tiempo de respuesta del servidor

Mejorar el tiempo de respuesta del servidor es una de las formas clave de optimizar la mayor puntuación del LCP. Esto se puede hacer implementando el almacenamiento en caché del lado del servidor, actualizando las especificaciones del servidor y optimizando el código de la aplicación. Para los sitios web de WordPress, los complementos como WP-DBManager pueden ayudar a reducir la hinchazón y programar limpiezas automáticas. Al seguir estos pasos, los propietarios de sitios web pueden garantizar tiempos de carga de página más rápidos y una experiencia de usuario mejorada.

Solucionar problemas de carga diferida

‍La carga diferida reduce efectivamente el tiempo de carga de la página; sin embargo, a veces puede empeorar la puntuación del LCP. La puntuación LCP mide el tiempo que tarda en renderizarse el contenido principal de una página. Si las imágenes de un sitio web siguen un comportamiento de carga diferido, puede conducir a una puntuación LCP más baja.

‍Para solucionar este problema, las imágenes principales o destacadas deben etiquetarse con el atributo loading=»eager», que permite que el elemento de la imagen se represente inmediatamente sin esperar a que los usuarios se desplacen hacia abajo. Además, puede deshabilitar la carga diferida en las imágenes representadas en la parte superior de la página para que los navegadores puedan cargarlas sin ejecutar JavaScript de antemano.

‍Habilitar almacenamiento en caché

‍El tiempo de carga de la página es uno de los aspectos más importantes del rendimiento del sitio web. El tiempo de carga prolongado puede afectar negativamente la experiencia del usuario y afectar directamente el posicionamiento.

‍El almacenamiento en caché es una forma efectiva de reducir el tiempo de carga de la página y mejorar LCP. El almacenamiento en caché implica almacenar componentes estáticos de la página web en un almacenamiento temporal, lo que evita que el servidor la reconstruya cada vez que un usuario visita la página.

‍Hay dos métodos principales de almacenamiento en caché:

1. El almacenamiento en caché del lado del servidor implica almacenar una versión de página web prefabricada en el servidor de origen,
2. El almacenamiento en caché del navegador permite a los visitantes mantener los componentes en su almacenamiento local.

Al aprovechar ambos métodos de almacenamiento en caché, los usuarios pueden evitar descargar los mismos datos cada vez que visitan su sitio.

Utiliza un proveedor de alojamiento web confiable

‍La calidad del alojamiento puede afectar la puntuación del LCP. Las plataformas de alojamiento tienen varias características que pueden mejorar la experiencia del usuario y simplificar la gestión web. Un buen alojamiento está configurado correctamente para garantizar que su sitio web tenga la mejor velocidad y rendimiento, lo que puede afectar significativamente el LCP. Por lo tanto, es fundamental seleccionar un plan de alojamiento adecuado que satisfaga las necesidades de su sitio web. Si lo hace, puede ayudar a minimizar el tiempo de carga y mejorar el rendimiento general del sitio web.

En este artículo: Hosting Web para SEO, profundizamos en este tema. Si estás tratando de mejorar la velocidad de tu página web, te lo recomendamos encarecidamente.

‍Elimina JavaScript y CSS que bloquean el renderizado

‍Los recursos que bloquean el renderizado se encuentran normalmente en archivos CSS y JavaScript y pueden hacer que los elementos de una página se carguen más lentamente, lo que da como resultado una mala experiencia.

‍Para mejorar los Core Web Vitals principales y reducir la tasa de rebote, es esencial eliminar el CSS y el JavaScript que bloquean el renderizado. Esto se conoce como carga progresiva y se puede lograr con la ayuda de complementos específicos. Las herramientas de laboratorio también pueden sugerir qué archivos CSS o JS no críticos deben eliminarse para mejorar el rendimiento.

‍Minimiza los archivos JavaScript, CSS y HTML

‍La minificación es un método para reducir el tamaño del archivo que implica principalmente la eliminación de líneas de código dentro del archivo. Es una de las técnicas de optimización de archivos más frecuentes para mejorar la métrica LCP.

‍Los archivos fundamentales específicos, como CSS, JavaScript y HTML, pueden tener numerosos espacios en blanco innecesarios dentro del código, lo que aumenta su tamaño. Aunque pueden no parecer sustanciales por separado, pueden dañar el rendimiento del sitio cuando se combinan.

‍Los administradores web pueden minimizar manualmente los archivos CSS, HTML y JavaScript o usar complementos.

‍Comprimir recursos de texto

‍Para optimizar el proceso de transferencia de recursos de texto como CSS, HTML y JavaScript, la minificación y la compresión pueden ser excelentes opciones. La compresión GZIP es una opción popular para la compresión de texto y entra en la categoría sin pérdidas, lo que significa que se conservará el archivo original y su información.

Comprimir los recursos de texto puede reducir el tamaño de los archivos y hacer que tu sitio web sea más eficiente, lo que resulta en una mejor puntuación LCP.

‍Diferir el análisis de JavaScript

Los usuarios quieren que las páginas web se carguen de manera rápida y eficiente, y Defer Parsing of JavaScript es un método que ayuda a lograrlo. Esta técnica implica retrasar el procesamiento del código JavaScript no esencial en una página y permitir que el navegador priorice la carga del contenido de la página esencial primero.

‍Defer Parsing of JS puede mejorar drásticamente la velocidad de carga de la página y, en consecuencia, la experiencia del usuario y ayudar a optimizar la métrica LCP. Para diferir el análisis de JavaScript, puedes modificar manualmente el archivo function.php o usar herramientas externas.

En general: mejorar la velocidad de la página web

Como has podido ver, la mejora de la métrica del LCP está completamente relacionada con la mejora de la velocidad de la página web, sobre todo en la primera carga. Hemos preparado un extenso artículo titulado Velocidad de página web y experiencia en SEO, con el que podrás profundizar mucho más sobre este aspecto crucial de los Core Web Vitals.

Optimización del FID: Firs Input Delay (o «Retardo de la primera entrada«)

Esta métrica mide el tiempo que transcurre desde que un usuario interactúa por primera vez con un sitio web (como hacer clic en un botón, usar un campo de entrada de texto, etc.) hasta que el navegador comienza a procesar esa interacción.

En otras palabras, el FID evalúa cuán rápido o lento es un sitio web para responder a la primera interacción del usuario. Un FID más corto indica una página más reactiva y, por lo tanto, generalmente proporciona una mejor experiencia de usuario. Google recomienda un FID de menos de 100 milisegundos para asegurarse de que los usuarios tengan una experiencia de interacción fluida.

Veamos cómo optimizarlo. Verás que, en general, lo que hemos visto para el LCP bien vale para el FID. Si sigues las indicaciones del apartado anterior para optimizar el LCP, estarás también optimizando el FID.

Reduce el tamaño de sus imágenes

Las imágenes pequeñas, así como las imágenes que no son necesarias para el contenido, pueden agregar un peso innecesario a stu página. Las imágenes representan aproximadamente el 60% de los datos transferidos, por lo que si puedes reducir el tamaño sin perder calidad, reducirás el tamaño de tu página y acelerarla. ‍

‍Utiliza una red de entrega de contenido (CDN)

Como hemos visto, una CDN es un servidor que almacena el contenido de su sitio web y lo distribuye por todo el mundo. Una CDN permite que el contenido de tu sitio web se entregue rápidamente porque está alojado en todo el mundo, no solo en tu región. ‍

‍Optimiza el código

El código que no está optimizado puede ralentizar el sitio web. Puedes usar herramientas que analicen su código y te indiquen dónde puedes realizar mejoras. ‍

‍Aprovecha el almacenamiento en caché del navegador

Recuerda que el almacenamiento en caché del navegador permite que tu navegador descargue y «recuerde» el contenido del sitio web. Ahorra mucho ancho de banda y tiempo. ‍

‍Utiliza la carga asíncrona

La carga asíncrona te permite cargar el contenido de forma no simultánea. Esto significa que los usuarios verán algo en su pantalla mientras se carga el resto de la página.

‍Mejora el tiempo de respuesta del servidor

Revise y optimiza tu código del lado del servidor para reducir el tiempo de respuesta del mismo. Utiliza técnicas como el almacenamiento en caché, la entrega de contenido y las optimizaciones del lado del servidor para mejorar la velocidad a la que se procesa la entrada del usuario y responde, reduciendo así la FID.

‍Supervisa y prueba

Supervisa y prueba regularmente el rendimiento de tu sitio web, incluida la FID, utilizando herramientas como Google PageSpeed ​​Insights, Lighthouse u otras herramientas de prueba de rendimiento. Identifica cualquier problema y realiza las optimizaciones necesarias para mejorar FID continuamente.

Optimización del CLS: Cumulative Layout Shift (o «Cambio de diseño acumulativo«)

El CLS mide la estabilidad visual de una página, es decir, cuánto se mueven los elementos visuales en la página durante la carga y la interacción del usuario.

Un bajo CLS sugiere que la página es más estable, lo que generalmente resulta en una mejor experiencia de usuario. Por otro lado, un alto CLS puede ser frustrante para los usuarios, ya que los elementos en la página (como botones, anuncios, imágenes, etc.) pueden moverse inesperadamente, lo que podría llevar a clics accidentales o dificultar la lectura del contenido.

Google recomienda un CLS de menos de 0.1 para proporcionar una buena experiencia de usuario. Las métricas que caen entre 0.1 y 0.25 necesitan mejora, y aquellas que superan 0.25 se consideran malas.

Hay varias formas de mejorar el CLS. Veámoslas

Definición de dimensiones para imágenes y videos:

‍Puedes mejorar la puntuación CLS utilizando los atributos correctos de ancho y alto para las imágenes y videos. Para garantizar que las imágenes respondan y se carguen correctamente, el atributo srcset debe definir un conjunto de imágenes con la misma relación de aspecto. 

‍<img width="500" height="500" src="ejemplo-500.jpg" srcset="ejemplo-500.jpg 500w, ejemplo-1000.jpg 1000, ejemplo-1500.jpg 1500w" alt="Ejemplo de una imagen.">

Esto ayuda a los navegadores a cargar la cantidad adecuada de espacio para las imágenes. Además, los navegadores modernos también pueden establecer la relación de aspecto predeterminada en función de los atributos de la imagen o el video. Para ayudar a los navegadores a predecir las diversas relaciones de aspecto, usa cuadros de relación de aspecto CSS como:

img {relación de aspecto: attr (ancho)/attr (alto);}

‍Con esta técnica, puedes asegurarte de que tu página web cargue más rápido y se vea mejor.

‍Administrar contenido dinámico

‍La gestión de contenido dinámico con respecto al cambio de diseño acumulativo (CLS) es esencial. Se recomienda evitar mostrar contenido nuevo a menos que lo active la interacción del usuario, ya que CLS solo cuenta el cambio de diseño cuando los usuarios no interactúan con la página.

Optimizar el espacio y el tamaño de los anuncios

‍Los anuncios pagados pueden ser una fuente importante de cambio de diseño, perjudicial para la experiencia del usuario. Emplear algunas mejores prácticas cuando se trabaja con anuncios es esencial para evitar esto. Primero, asigna dimensiones fijas a los anuncios para reservar suficiente espacio para cargarlos.

También debes reservar el mayor espacio publicitario posible en función de los datos históricos. Mantén todos los espacios reservados para los anuncios que aún no se muestran y coloca anuncios no adhesivos en el medio de la página. Seguir esta práctica recomendada puede ayudarte a optimizar tu página web para la puntuación CLS.

‍Administra el espacio para incrustaciones e iframes

‍Las pautas para administrar incrustaciones e iframes son similares a las de administrar anuncios. Debes, en particular, planificar un amplio espacio para tales características. Nuevamente, los datos históricos pueden ser beneficiosos para determinar cuánto espacio reservar. Un marcador de posición o respaldo es un enfoque apropiado para lidiar con el tamaño de inserción incierto.

‍Fuentes precargadas

‍La precarga de fuentes es una práctica excelente para mejorar la puntuación de CLS. La precarga de fuentes le indica al navegador que cargue las fuentes como un recurso de máxima prioridad. El navegador cargará las fuentes rápidamente mientras muestra la página. Como resultado, lo más probable es que los tipos de letra se incluyan en el LCP cuando el contenido principal de la página esté completamente cargado y se muestre. No habrá cambio de diseño acumulativo en esta situación.

‍Puedes aplicar el atributo rel=preload a las siguientes fuentes web:

<enlace rel="precargar" href="fuente.woff2" as="fuente" tipo="fuente/woff2" origen cruzado>

Utiliza la propiedad de transformación CSS para la animación

‍Ten cuidado con las animaciones como la mejor práctica final para mantener la estabilidad visual. Puedes utilizar la transformación de propiedades CSS, que no afecta el diseño.

La importancia de la optimización del LCP, el FID y el CLS

Los Core Web Vitals de Google, compuestos por las métricas LCP, FID y CLS, representan aspectos fundamentales de la experiencia del usuario en una página web: velocidad de carga, interactividad y estabilidad visual, respectivamente. Optimizar estos factores no solo mejora la usabilidad y la satisfacción del usuario, sino que también tiene un impacto directo en el posicionamiento SEO de un sitio web. Herramientas como Google PageSpeed Insights y Chrome DevTools pueden ser de gran ayuda para medir y mejorar estas métricas críticas.

Al centrarse en acelerar el LCP, minimizar el FID y reducir el CLS, los propietarios de sitios web pueden ofrecer una experiencia de usuario más fluida y agradable, lo cual es premiado por los algoritmos de Google con un mejor ranking en los resultados de búsqueda. En resumen, la inversión en la optimización de los Core Web Vitals es una estrategia de doble beneficio: mejora la experiencia de los visitantes y aumenta la visibilidad del sitio en los motores de búsqueda.

Eso sí, es importante entender que estos son solo una parte del amplio ecosistema de factores SEO. Google utiliza más de 200 señales en su algoritmo para determinar el ranking de una página web. Estas señales pueden incluir la relevancia y calidad del contenido, la autoridad del dominio, la estructura de enlaces internos y externos, la adaptabilidad móvil, y muchos otros factores técnicos y de contenido.

Ignorar estos aspectos y centrarse únicamente en los Core Web Vitals podría resultar en un enfoque miope que descuida otras áreas críticas de optimización. Por ejemplo, un sitio web puede tener un excelente rendimiento en LCP, FID y CLS, pero si su contenido es de baja calidad o irrelevante para la consulta de búsqueda, es poco probable que alcance una posición alta en los resultados de búsqueda.

Los Core Web Vitals son un componente valioso en una estrategia SEO bien equilibrada, pero no son un sustituto para un enfoque integral que abarque todos los factores que impactan en el rendimiento y la visibilidad de un sitio web.