La velocidad del sitio web se ha vuelto cada vez más importante en estos días, ya que los estudios muestran que el   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. 70% de los consumidores  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   . El uso de marcadores de posición, como   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. análisis de PageSpeed Insights BlurHash,  ¿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   , 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.  nytimes.com  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  peticiones. El siguiente cuadro de  muestra qué navegadores admiten el atributo de carga diferida de HTML:    API de observador de intersecciones   caniuse.com 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.   https://youtu.be/66FYrn3JDJo?embedable=true  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  , que ocupará un cuadro hasta que sea apropiado cargar una versión completamente detallada.  BlurHash  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  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.  BlurHash  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  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.   se le ocurrió la idea de BlurHash   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  o  .   documentación   Pruébalo gratis

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una breve introducción a la teoría del cerebro de Boltzmann

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una breve introducción a la teoría del cerebro de Boltzmann

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps