Guía esencial para mejorar Core Web Vitals usando Lazy Loading y BlurHash

La velocidad del sitio web se ha vuelto cada vez más importante en estos días, ya que los estudios muestran que el 70% de los consumidores dicen que la velocidad de la página afecta sus decisiones de compra en línea. Pero yendo más allá de la experiencia del consumidor, Google actualizó recientemente su informe Core Web Vitals (CWV) y brindó orientación sobre las métricas más importantes sobre el rendimiento de la página. Esto significa que la calidad de la experiencia del usuario y el rendimiento de la página ahora se consideran cada vez más cuando se trata de su algoritmo de búsqueda.

Un resumen rápido: Core Web Vitals mide tres aspectos clave de la experiencia web: carga, interactividad y estabilidad visual. Una de las formas más efectivas de mejorar Core Web Vitals (CWV) y SEO es mediante la optimización de los activos de imagen. Hay algunas maneras de lograr esto, incluida la compresión adecuada de imágenes, el cambio de tamaño y la conversión de imágenes de próxima generación.

Además de estas tres técnicas, es probable que vea Deferir imágenes fuera de pantalla, también llamada carga diferida, como una de las oportunidades de mejora en su análisis de PageSpeed Insights . El uso de marcadores de posición, como BlurHash, también son excelentes opciones para mejorar los tiempos de carga percibidos y ofrecer una mejor experiencia de usuario cuando una conexión o un sitio tardan en cargar imágenes.

¿Qué es la carga diferida?

Imagina una página de comercio electrónico con 100 fotos de zapatos en alta resolución. Si un navegador carga todas las fotos a la vez, es posible que aparezcan algunas en la parte inferior de la página antes de que pueda desplazarse hasta ellas, mientras que las fotos en su ventana gráfica podrían no aparecer, lo que puede crear una mala experiencia para el usuario.

La carga diferida es la técnica que difiere la carga de imágenes fuera de pantalla hasta que el visitante se desplaza y las imágenes ingresan a la ventana gráfica. Permite que se carguen menos imágenes en un momento dado y acelera el tiempo de carga de cada imagen, lo que puede mejorar la pintura con contenido más grande.

La carga diferida también puede mejorar el retardo de la primera entrada (FID). FID es el tiempo que tarda una página en responder a la primera interacción del usuario, como un clic. Al retrasar estratégicamente la carga de componentes grandes como imágenes, el sitio web puede procesar JavaScript y responder a las interacciones más rápido. En el siguiente ejemplo, para nytimes.com , el día del análisis, podría haber mejorado la velocidad de la página en 1,5 segundos si hubiera implementado la carga diferida.

Cómo implementar la carga diferida

La forma en que implemente la carga diferida depende de su base de código y de los navegadores que admita. Además de loading=“lazy”, un atributo HTML compatible con Chrome, los desarrolladores pueden usar JavaScript y/o API de observador de intersecciones peticiones. El siguiente cuadro de caniuse.com muestra qué navegadores admiten el atributo de carga diferida de HTML:

Sin embargo, dada la rapidez con la que cambian los navegadores y sus capacidades únicas, los desarrolladores consideran cada vez más el uso de JavaScript lazysizes.js como práctica recomendada. En el siguiente video, nuestros socios de Cantilever demuestran y comparan las implementaciones de loading=“lazy” y lazysizes.js.

Práctica recomendada: lazysizes.js + imgix.js

Usar lazysizes.js junto con imgix.js es una excelente manera de combinar los beneficios de la optimización de imágenes de imgix y la carga diferida. Aquí hay un ejemplo de cómo se hace como una propiedad meta:

<cabeza>

<meta propiedad="ix:srcAttribute" content="data-src">

<meta propiedad="ix:srcsetAttribute" content="data-srcset">

<meta property="ix:sizesAttribute" content="data-sizes">

</cabeza>

Y aquí hay un ejemplo de cómo se hace en JavaScript:

imgix.config.srcAttribute = 'datos-src';

imgix.config.srcsetAttribute = 'data-srcset';

imgix.config.sizesAttribute = 'tamaños de datos';

Usar marcadores de posición con carga diferida

El riesgo de la carga diferida es que podría aumentar la inestabilidad del diseño de la página, lo que daría lugar a una peor puntuación CLS. Por ejemplo, cuando un visitante se desplaza rápidamente hacia abajo y comienza a leer el título de una imagen, la imagen puede aparecer repentinamente, desplazando el título fuera de la vista. La forma de mitigar este problema es utilizar marcadores de posición de baja calidad o BlurHash , que ocupará un cuadro hasta que sea apropiado cargar una versión completamente detallada.

Una vez que haya aplicado el código BlurHash a su imagen, el marcador de posición resultante se verá así:

Usando BlurHash como su marcador de posición

BlurHash es un algoritmo que le permite crear una versión compacta de un marcador de posición de imagen. El algoritmo crea una cadena de caracteres que codifica una representación borrosa de la imagen, con la cantidad de caracteres determinada por la calidad de la imagen. La cadena es lo suficientemente corta como para que pueda servirla directamente en el marcado de su página y luego la cadena se puede decodificar en la imagen borrosa, sin tener que buscar y descargar un archivo de imagen.

Un beneficio clave de BlurHash es que puede convertir archivos de imágenes grandes en una cantidad más pequeña de datos para que aparezca una representación borrosa de la imagen mientras el archivo original aún se está cargando. Un ingeniero de Wolt se le ocurrió la idea de BlurHash mientras intentaba encontrar una mejor solución sobre cómo se cargarían las imágenes en una conexión a Internet más lenta.

Cómo utilizar la función BlurHash

Para crear una imagen borrosa, simplemente agregue fm=blurhash a cualquier imagen para obtener la cadena BlurHash. Una vez que tenga la cadena BlurHash, puede usarla en el componente BlurHash. El componente BlurHash es responsable de decodificar el hash en una imagen que se puede mostrar.

En este ejemplo particular, el componente React BlurHash genera un elemento de lienzo en el marcado final. Nota: el marcado generado puede diferir ligeramente según la biblioteca o el decodificador de marco que se utilice.

importar './Aplicación.css';

importar Imgix desde "react-imgix";

importar { Blurhash } desde "react-blurhash";

aplicación de función () {

retorno (

<div className="Aplicación">

<sección className="Aplicación-encabezado">

<Blurash

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

ancho = {600}

altura={400}

/>

<Imgix

src="https://activos.imgix.net/imagenes-de-ejemplo/frailecillos.jpg"

ancho = {600}

altura={400}

/>

</sección>

</div>

);

}

Una vez que haya aplicado el código BlurHash a su imagen, el marcador de posición resultante se verá así:

Incluya la cadena BlurHash con su marcado en el momento de la compilación para asegurarse de que los usuarios vean la versión borrosa de la imagen de inmediato.

la comida para llevar

Sus métricas de CWV son más importantes que nunca, pero la buena noticia es que hay algunas formas rápidas e impactantes de mejorarlas. La combinación de la carga diferida con la optimización de imágenes y el uso de marcadores de posición efectivos como BlurHash son dos formas de lograr resultados probados. Puede implementar fácilmente estas técnicas usando imgix, consulte nuestro documentación o Pruébalo gratis .