Carga diferida híbrida: una migración progresiva a la carga diferida nativa

1. Carga diferida nativa versus basada en JavaScript
   1. Carga diferida impulsada por JavaScript
   2. Carga diferida nativa
2. Comience con la carga diferida nativa
3. No sirve para un Polyfill
4. Carga diferida híbrida
5. Un poco de ayuda de terceros
6. Población
   1. Demostración de carga diferida nativa
   2. Demostración de carga diferida híbrida
7. Pruebe la carga diferida híbrida en su sitio web
   1. Marcado HTML
   2. Código JavaScript
   3. Todos juntos, usando un asyncguión
8. Mejores prácticas importantes
9. Pros y contras
10. Terminando
    1. Lecturas adicionales sobre SmashingMag:

La carga diferida nativa llega a la web. Dado que no depende de JavaScript, revolucionará la forma en que cargamos contenido de forma diferida hoy en día, facilitando a los desarrolladores la carga diferida de imágenes e iframes. Pero no es una característica que podamos rellenar, y pasará algún tiempo antes de que sea utilizable en todos los navegadores. En este artículo, aprenderá cómo funciona y cómo puede reemplazar progresivamente su carga diferida impulsada por JavaScript con su alternativa nativa, gracias a la carga diferida híbrida.

En las últimas semanas, es posible que haya oído o leído sobre la carga diferida nativa, que llegará a Chromium 75 en los próximos meses.

"Sí, son buenas noticias, pero tendremos que esperar hasta que todos los navegadores lo admitan".

Si esto fue lo primero que se te pasó por la cabeza, sigue leyendo. Intentaré convencerte de lo contrario.

Comencemos con una comparación entre la carga diferida nativa y la buena carga basada en JavaScript.

Carga diferida nativa versus basada en JavaScript

La carga diferida es una forma de mejorar el rendimiento de un sitio web o aplicación web maximizando la velocidad de renderizado de las imágenes e iframes de la mitad superior de la página (y a veces de los vídeos) al diferir la carga del contenido de la mitad inferior de la página.

Carga diferida impulsada por JavaScript

Para cargar imágenes o iframes de forma diferida, es una práctica muy común marcarlos reemplazando el srcatributo adecuado con un atributo de datos similar y data-srcluego confiar en una solución JavaScript para detectar cuándo las imágenes/iframes se acercan a lo visible. parte del sitio web (generalmente porque el usuario se desplazó hacia abajo) y copiar los atributos de datos en los adecuados, lo que luego activa la carga diferida de su contenido.

img datsrc="turtle.jpg" alt="Lazy turtle"

Carga diferida nativa

De acuerdo con la especificación de carga diferida nativa (aún en desarrollo), si desea cargar imágenes o iframes de forma diferida utilizando la función de carga diferida nativa, solo necesitará agregar el loading=lazyatributo en la etiqueta relacionada.

img src="turtle.jpg" alt="Lazy turtle"

Addy Osmani escribió extensamente sobre este tema en su artículo “¡ Carga diferida de imágenes nativas para la Web! ” en el que afirmó que el equipo de Google Chrome ya está desarrollando la función y tiene la intención de incluirla en Chrome 75.

Otros navegadores basados ​​en Chromium como Opera y Microsoft Edge también se beneficiarán de este desarrollo al obtener la misma característica en su primera actualización basada en Chromium 75.

Comience con la carga diferida nativa

En caso de que las imágenes de su sitio web se descarguen todas a la vez en el inicio de la página sin carga diferida, puede habilitar (cuando sea compatible) la carga diferida nativa en su sitio web tan fácilmente como agregar un atributo HTML. El loadingatributo indica a los navegadores qué imágenes es importante cargar inmediatamente y cuáles se pueden descargar lentamente a medida que los usuarios se desplazan hacia abajo. El mismo atributo se puede aplicar a los iframes.

Para indicar a los navegadores que una imagen en particular es importante para que puedan cargarla lo antes posible, debe agregar el loading="eager"atributo en la imgetiqueta. La mejor práctica es hacer esto para las imágenes principales, generalmente para las que se mostrarán en la mitad superior de la página.

img src="rabbit.jpg" alt="Fast rabbit"

Para indicar a los navegadores que una imagen debe descargarse de forma diferida, simplemente agregue el loading="lazy"atributo. Esta es una práctica recomendada solo si lo hace solo con imágenes secundarias; normalmente, las que se mostrarán en la mitad inferior de la página.

img src="turtle.jpg" alt="Lazy turtle"

Con solo agregar el loadingatributo a sus imágenes e iframes, permitirá que su sitio web utilice la carga diferida nativa como una mejora progresiva. Su sitio web se beneficiará gradualmente a medida que llegue soporte a sus usuarios en la mayoría de los navegadores modernos.

Este es el mejor enfoque a utilizar si su sitio web no utiliza ningún tipo de carga diferida actualmente, pero si ya implementó una solución de carga diferida basada en JavaScript, es posible que desee conservarla mientras cambia progresivamente a la carga diferida nativa.

La solución ideal sería comenzar a usar la carga diferida nativa de inmediato y usar un polyfill para que funcione en todos los navegadores. Desafortunadamente, la carga diferida nativa no es una característica que podamos completar con JavaScript.

No sirve para un Polyfill

Cuando se lanza una nueva tecnología de navegador a un solo navegador, la comunidad de código abierto generalmente lanza un polyfill de JavaScript para proporcionar la misma tecnología al resto de los navegadores. Por ejemplo, el IntersectionObserverpolyfill utiliza elementos JavaScript y DOM para coordinarse Element.getBoundingClientRect()y reproducir el comportamiento de la API nativa.

Pero el caso de la carga diferida nativa es diferente porque un polyfill de JavaScript loading="lazy"tendría que evitar que los navegadores carguen contenido tan pronto como encuentren una URL en el marcado de una imagen o iframe. JavaScript no tiene control sobre esta etapa inicial de representación de la página, por lo tanto, no es posible realizar un polyfill con carga diferida nativa.

Carga diferida híbrida

Si no está satisfecho con tener la carga diferida nativa solo como una mejora progresiva, o ya ha implementado la carga diferida basada en JavaScript y no quiere perder esta característica en navegadores menos modernos (pero aún desea habilitar la carga diferida nativa en los navegadores que lo soporten), entonces necesita una solución diferente. Presentamos: carga diferida híbrida.

La carga diferida híbrida es una técnica para utilizar la carga diferida nativa en navegadores que la admiten; de lo contrario, confíe en JavaScript para manejar la carga diferida.

“

Para realizar una carga diferida híbrida, debe marcar su contenido diferido utilizando los dataatributos en lugar de los reales (como en la carga diferida impulsada por JavaScript) y agregar el loading="lazy"atributo.

img datsrc="turtle.jpg" alt="Lazy turtle"

Entonces necesitas algo de JavaScript. En primer lugar, debe detectar si el navegador admite o no la carga diferida nativa . Luego, realice una de las siguientes acciones para cada elemento con el loading="lazy"atributo:

• Si se admite la carga diferida nativa, copie el data-srcvalor del atributo en el srcatributo;
• Si no es compatible, inicialice un script o complemento de carga diferida de JavaScript para hacerlo cuando los elementos ingresan a la ventana gráfica.

No es muy difícil escribir el código JavaScript necesario para realizar estas operaciones por tu cuenta. Puedes detectar si la carga diferida nativa es compatible con la condición:

if ('loading' in HTMLImageElement.prototype)

Si es así, simplemente copie el srcvalor del atributo de data-src. Si no es así, inicialice algún script de carga diferida de su elección.

Aquí hay un fragmento de código que hace eso.

!-- In-viewport images should be loaded normally, or eagerly --img src="important.jpg" alt="Important image"!-- Let’s lazy-load the rest of these images --img datsrc="lazy1.jpg" alt="Lazy image 1"img datsrc="lazy2.jpg" alt="Lazy image 2"img datsrc="lazy3.jpg" alt="Lazy image 3"script (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })();/script

Puede encontrar y probar el código anterior en esta demostración en vivo . Todos sobre el antiguo egipto

Aun así, se trata de un script muy básico y las cosas pueden complicarse cuando se utilizan atributos o etiquetas adicionales para obtener imágenes responsivas (como los atributos srcsety sizeso incluso las etiquetas picturey source).

Un poco de ayuda de terceros

Durante los últimos cuatro años, he mantenido un script de carga diferida de código abierto llamado " vanilla-lazyload" y, un par de días después de que Addy Osmani escribiera sobre la carga diferida nativa, la comunidad reaccionó preguntándome si mi script podría actuar como un polirelleno.

Como expliqué antes, no se puede crear un polyfill para la función de carga diferida nativa; sin embargo, pensé en una solución que facilitaría a los desarrolladores comenzar la transición a la carga diferida nativa, sin necesidad de escribir nada del código JavaScript que Lo he mencionado antes.

A partir de la versión 12 de vanilla-lazyload, puede configurar la use_nativeopción truepara habilitar la carga diferida híbrida. El script tiene solo 2,0 kB comprimidos con gzip y ya está disponible en GitHub , npm y jsDelivr .

• Conozca vanilla-lazyloaden GitHub

Población

Puede comenzar a jugar con la carga diferida nativa hoy mismo descargando Chrome Canary o Microsoft Edge Insider ( canal de desarrollo ) y luego habilitando las opciones "Habilitar carga diferida de imágenes" y "Habilitar carga diferida de fotogramas". Para habilitar estas banderas, ingrese about:flagsen el campo URL de su navegador y busque "lazy" en el cuadro de búsqueda.

Demostración de carga diferida nativa

Para analizar cómo funciona la carga diferida nativa en las herramientas de desarrollador, puedes empezar a jugar con la siguiente demostración. En éste no se utiliza ni una sola línea de JavaScript . Sí, es simplemente una carga diferida nativa y completa.

• Pruebe la demostración nativa de carga diferida

Qué esperar : todas las imágenes se obtienen a la vez, pero con diferentes respuestas HTTP. Las que tienen el código de respuesta 200son las imágenes cargadas con entusiasmo, mientras que las que tienen el código de respuesta 206solo se recuperan parcialmente para obtener la información inicial sobre las imágenes. Luego, esas imágenes se recuperarán completamente con un 200código de respuesta cuando se desplace hacia abajo.

Demostración de carga diferida híbrida

Para analizar cómo funciona la carga diferida híbrida, puedes empezar a jugar con la siguiente demostración. Aquí [email protected]se utiliza y la use_nativeopción se establece en true:

• Pruebe la demostración de carga diferida híbrida

Qué esperar : Pruebe la demostración en diferentes navegadores para ver cómo se comporta. En los navegadores que admiten la carga diferida nativa, el comportamiento sería el mismo que en la demostración de carga diferida nativa. En los navegadores que no admiten la carga diferida nativa, las imágenes se descargarán a medida que se desplaza hacia abajo.

Tenga en cuenta que vanilla-lazyloadutiliza la API IntersectionObserver internamente, por lo que deberá completarla en Internet Explorer y en versiones menos recientes de Safari. Sin embargo, no es gran cosa si no se proporciona un polyfill, porque en ese caso vanilla-lazyloadsimplemente se descargarían todas las imágenes a la vez.

Nota : Lea más en el capítulo " A Polyfill o no Polyfill vanilla-lazyload " del archivo Léame de .

Pruebe la carga diferida híbrida en su sitio web

Dado que la carga diferida nativa llegará pronto a algunos navegadores, ¿por qué no le das una oportunidad hoy usando la carga diferida híbrida? Esto es lo que debes hacer:

Marcado HTML

El marcado de imagen más simple se compone de dos atributos: srcy alt.

Para las imágenes de la mitad superior de la página, debe dejar el srcatributo y agregarlo loading="eager".

img src="important.jpg" alt="Important image"

Para imágenes de la mitad inferior de la página, debe reemplazar el srcatributo con el atributo de datos data-srcy agregar el loading="lazy"atributo.

img datsrc="lazy.jpg" alt="A lazy image"

Si desea utilizar imágenes responsivas, haga lo mismo con los atributos srcsety sizes.

img alt="A lazy image" datsrc="lazy.jpg" 

Si prefieres usar la pictureetiqueta, cambia el srcsety sizestambién srcen las sourceetiquetas.

picture source media="(min-width: 1200px)" source media="(min-width: 800px)" img alt="A lazy image" datsrc="lazy.jpg"/picture

La pictureetiqueta también se puede utilizar para cargar selectivamente el formato WebP para sus imágenes.

Nota : Si desea conocer más usos de vanilla-lazyload, lea la sección HTML " Cómo comenzar " de su archivo Léame.

Código JavaScript

En primer lugar, debe incluirlo vanilla-lazyloaden su sitio web.

Puedes cargarlo desde un CDN como jsDelivr:

script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"/script

O puedes instalarlo usando npm:

npm install vanilla-lazyload@12

También es posible utilizar un asyncscript con inicialización automática; cárguelo como un módulo ES usando type="module"o cárguelo como AMD usando RequireJS. Encuentre más formas de incluir y utilizar vanilla-lazyloaden la sección de secuencia de comandos " Introducción " del archivo Léame.

Luego, en el código JavaScript de su sitio web/aplicación web, incluya lo siguiente:

var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading});

Nota : el script tiene muchas otras configuraciones que puede usar para personalizar vanilla-lazyloadel comportamiento de, por ejemplo, aumentar la distancia del área de desplazamiento desde la cual comenzar a cargar los elementos o cargar elementos solo si permanecieron en la ventana gráfica durante un tiempo determinado. Encuentre más configuraciones en la sección API del archivo Léame.

Todos juntos, usando un asyncguión

Para juntarlo todo y utilizar un asyncscript para maximizar el rendimiento, consulte el siguiente código HTML y JavaScript:

!-- In-viewport images should be loaded normally, or eagerly --img src="important.jpg" alt="Important image"!-- Let’s lazy-load the rest of these images --img datsrc="lazy1.jpg" alt="Lazy image 1"img datsrc="lazy2.jpg" alt="Lazy image 2"img datsrc="lazy3.jpg" alt="Lazy image 3"!-- Set the options for the global instance of vanilla-lazyload --script window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading };/script!-- Include vanilla lazyload 12 through an async script --script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"/script

¡Eso es todo! ¡Con estos sencillos y sencillos pasos, habrá habilitado la carga diferida híbrida en su sitio web!

Mejores prácticas importantes

• Aplique la carga diferida solo a las imágenes que sepa que probablemente se mostrarán en la mitad inferior de la página. Cargue con entusiasmo los que están en la mitad superior de la página para maximizar el rendimiento. Si simplemente aplica carga diferida a todas las imágenes de su página, ralentizará el rendimiento de renderizado.
• Utilice CSS para reservar algo de espacio para las imágenes antes de cargarlas. De esa manera, publicarán el resto del contenido a continuación. Si no lo hace, se colocará una mayor cantidad de imágenes en la mitad superior de la página antes de lo debido, lo que provocará descargas inmediatas para ellas. Si necesita un truco de CSS para hacerlo, puede encontrarlo en la sección de consejos y trucos del archivo Léame de vanilla-lazyload.

Pros y contras

Terminando

Estoy muy emocionado de que la carga diferida nativa llegue a los navegadores y no puedo esperar a que todos los proveedores de navegadores la implementen.

Mientras tanto, puede optar por enriquecer su marcado HTML para una mejora progresiva y obtener una carga diferida nativa solo cuando sea compatible, o puede optar por una carga diferida híbrida y obtener una carga diferida nativa y basada en JavaScript hasta el día en que la carga diferida nativa finalice. ser compatible con la gran mayoría de navegadores.

¡Darle una oportunidad! No olvides destacar/ver vanilla-lazyloaden GitHub y déjame saber tu opinión en la sección de comentarios.

Lecturas adicionales sobre SmashingMag:

• Ahora me ves: cómo aplazar, realizar carga diferida y actuar con IntersectionObserver
• Carga diferida de módulos JavaScript con ConditionerJS
• Lista de verificación de rendimiento de front-end 2019 (PDF, Apple Pages, MS Word)
• Cómo mejorar el rendimiento del sitio web puede ayudar a salvar el planeta

(dm, il)Explora más en

• javascript
• Actuación
• Medios de comunicación
• Mejoramiento

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Carga diferida híbrida: una migración progresiva a la carga diferida nativa

Carga diferida nativa versus basada en JavaScriptComience con la carga diferida nativaNo sirve para un PolyfillCarga diferida híbridaUn poco de ayuda de terce

programar

es

https://pseint.es/static/images/programar-carga-diferida-hibrida-una-migracion-progresiva-a-la-carga-diferida-nativa-981-0.jpg

2024-05-20

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente