El autor del material, cuya traducción publicamos hoy, Eddie Osmani de Google, dice que ya en
Chrome 75 puede aparecer el soporte para el nuevo atributo de los elementos de
carga <img> y
<iframe> . Esto significa que estos elementos admitirán características estándar para la llamada "carga diferida" de datos.
Si está ansioso por saber cómo se ve el uso del nuevo atributo en el código, eche un vistazo a este ejemplo:
<img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
Ahora hablaremos sobre cómo funcionará el atributo de
loading .
Información preliminar
Las páginas web a menudo incluyen muchas imágenes, lo que afecta el tamaño de las páginas, provoca
un aumento excesivo y afecta la velocidad de carga de las páginas. Muchas de las imágenes que se muestran en las páginas están fuera de su área visible. Para ver tales imágenes, el usuario necesita desplazarse por la página.
Históricamente, para limitar el impacto en el tiempo de carga de páginas de imágenes ubicadas fuera del área visible de las páginas, los programadores tuvieron que usar bibliotecas de JavaScript (como
LazySizes ). Estas bibliotecas le permiten retrasar la carga de tales imágenes hasta el momento en que el usuario, al desplazarse por la página, no se acerca lo suficiente.
Página cargando 211 imágenes. Una versión de página que no se usa para crear imágenes de carga diferida carga inmediatamente 10 MB de datos gráficos. La misma página que usa carga diferida (usando LazySizes) precarga solo 250 Kb de información gráfica. Todo lo demás se carga a medida que el usuario se mueve en la página. Los detalles de este experimento se pueden encontrar en webpagetest.org .¿Qué pasaría si el navegador pudiera ayudar al programador a evitar cargar imágenes que están fuera del área visible de las páginas? Esto tendría un efecto beneficioso sobre la velocidad de carga de datos en el área visible de la página, reduciría, en dispositivos de baja potencia, la cantidad total de datos transmitidos a través de la red, reduciría el consumo de memoria. Pronto todo esto será posible gracias al nuevo atributo de los elementos de
loading <img> y
<iframe> .
Cargando atributo
El atributo de
loading permite al navegador retrasar la carga del contenido de los elementos
<img> y
<iframe> que están fuera del área visible de la página hasta que el usuario desplaza la página lo suficientemente cerca de estos elementos. Este atributo admite tres valores:
lazy : señala materiales que son buenos candidatos para la carga diferida.eager : los materiales en elementos con este valor de atributo deben cargarse inmediatamente.auto : el navegador decidirá si aplicar carga diferida a los materiales con este valor de atributo.
Si no especifica el valor del atributo de
loading , esto será equivalente a configurarlo en
auto .
Actualmente, el atributo de carga para los elementos <img> y <iframe> está bajo el estándar HTMLEjemplos
El atributo de
loading funciona con elementos
<img> (incluido el atributo
srcset y dentro del elemento
<picture> ), así como con elementos
<iframe> .
<img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <img align="center" src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
Cabe señalar que aquí utilizamos formulaciones como las siguientes: "cuando el usuario desplaza la página para que su área visible esté cerca del elemento". El navegador determina el momento exacto en que la imagen comienza a cargarse. En general, podemos esperar que el navegador comience a descargar materiales cuya descarga se haya retrasado, algún tiempo antes de que el área de la página que los contiene sea visible para el usuario. Esto aumentará las posibilidades de que la descarga y la salida de materiales relevantes se completen para cuando el usuario las vea.
Tenga en cuenta que
sugerí que el atributo en cuestión se llame
loading , ya que este enfoque para nombrarlo corresponde al utilizado al elegir un nombre para el atributo de
decodificación . Las oraciones anteriores, como
lazyload , no funcionaron, ya que era necesario que este atributo
lazyload varios valores (
lazy ,
eager y
auto ).
Consulte el soporte del navegador para cargar el atributo
Tomamos en cuenta la importancia de la posibilidad de usar bibliotecas de JavaScript para organizar la carga diferida de materiales (para compatibilidad con navegadores cruzados para esta función). Puede verificar si el navegador admite el atributo de
loading :
<script> if ('loading' in HTMLImageElement.prototype) {
Tenga en cuenta que el atributo de
loading se puede utilizar para expandir progresivamente las capacidades de la página. Los navegadores que admitan este atributo podrán organizar la carga diferida de materiales utilizando
loading=lazy , y los exploradores que no admitan esta función simplemente descargarán estos materiales como antes.
Navegador cruzado cargando imágenes perezosas
Si la compatibilidad entre navegadores para la carga diferida de imágenes es importante, entonces no es suficiente determinar si el navegador admite esta función y, de no ser así, utilizar la biblioteca adecuada si utiliza un diseño como
<img align="center" src=unicorn.jpg loading=lazy /> para describir la imagen en el marcado
<img align="center" src=unicorn.jpg loading=lazy /> .
En el marcado, debe usar algo como
<img data-src=unicorn.jpg /> (en lugar de
src ,
srcset o
<source> ) para evitar la carga normal de la imagen por parte de los navegadores que no admiten el nuevo atributo. Para cambiar dichos atributos a los que deben usarse con el soporte del atributo de
loading del navegador, o para descargar la biblioteca correspondiente si este atributo no es compatible, puede usar JavaScript.
Aquí hay un ejemplo de cómo se vería esto:
<img align="center" src="hero.jpg" alt=".."/> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Considere algunas de las características de este código:
- Las imágenes que son visibles para el usuario inmediatamente después de que se carga la página se describen usando etiquetas
<img> regulares. El uso del atributo data-src sin src hará que las imágenes no se muestren inmediatamente después de cargar la página, por lo tanto, al configurar esas imágenes que deberían ser visibles inmediatamente después de cargar la página, debemos especificar el atributo src . - Cuando describimos imágenes que no son visibles inmediatamente para el usuario después de cargar la página, usamos el atributo
data-src . Esto se hace para evitar que se carguen normalmente en navegadores que no admiten el atributo de loading . Si el navegador admite este atributo, cambiamos data-src a src . - Si el atributo de
loading no es compatible, cargamos la biblioteca auxiliar (lazySizes) y la inicializamos. Aquí usamos class=lazyload para apuntar la biblioteca LazySizes a las imágenes con las que queremos trabajar usando la técnica de carga diferida.
Demo
Aquí puede ver un ejemplo de una página en la que se realiza una carga diferida de 100 imágenes de gatos. Pero, si está interesado, las descargas de video de esta página.
Funciones de implementación para cargar el soporte de atributos en Chrome
Recomendamos encarecidamente que antes de usar el atributo de
loading en producción, espere a que su soporte aparezca en la versión estable de Chrome. Si está ansioso por probar esta oportunidad, quizás le interese lo que vamos a hablar.
Prueba de atributo de carga
Para experimentar el nuevo atributo en este momento, vaya a la página de configuración de banderas de Chrome (
chrome://flags ), habilite las
chrome://flags Enable lazy frame loading y
Enable lazy image loading , y reinicie el navegador.
Configuraciones del navegador
La implementación del método de carga diferida de materiales en Chrome se basa no solo en lo cerca que está el área visible de la página de estos materiales, sino también en la velocidad de conexión. Los umbrales para activar la carga diferida de materiales para diferentes velocidades de conexión están codificados en el código, pero estos valores pueden anularse mediante la línea de comando. Aquí hay un ejemplo de anulación de configuraciones para imágenes:
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'
El comando anterior corresponde a la configuración predeterminada actual. Para comenzar a cargar imágenes si la posición de desplazamiento de la página está a 400 píxeles de la imagen, todos los valores de este comando deben cambiarse a 400. El siguiente es un ejemplo de una variación de 1 píxel de este comando (esta configuración se utiliza en el video anterior )
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'
Es muy probable que la configuración estándar de carga diferida en Chrome cambie a medida que la implementación de esta función se estabilice en las próximas semanas.
Herramientas para desarrolladores
Las características de la implementación del soporte para el atributo de
loading en Chrome son que el navegador, al cargar la página, solicita los primeros 2 KB de imágenes del servidor si es compatible con la tecnología de solicitud de rango. Las primeras imágenes de 2 KB probablemente contienen información sobre sus tamaños. Esto permite que el navegador genere marcadores de posición que tengan tamaños correspondientes a los tamaños de las imágenes. Además, en estos 2K, si hablamos de imágenes pequeñas como iconos, es muy probable que se incluya toda la imagen.
Cargando fragmentos de archivos gráficosChrome descarga los datos de imagen restantes en el momento en que el usuario está cerca de verlos. Al trabajar con herramientas de desarrollador, esto puede llevar al hecho de que la información sobre dos descargas de imágenes puede "aparecer" en el panel Red, y la información sobre dos solicitudes que se realizan para descargar cada imagen se mostrará en el panel Tiempo de recursos.
Servidor de soporte del navegador que define el atributo de carga
Si viviéramos en un mundo perfecto, para saber si es necesario usar la biblioteca auxiliar para la salida correcta de la página en un navegador determinado, uno no tendría que depender del análisis del navegador usando JavaScript del lado del cliente. Con este enfoque, el servidor, sabiendo de antemano si tal biblioteca es necesaria o no, la incluiría (o no) en la página enviada al navegador. Dicha verificación puede hacerse posible utilizando la tecnología
HTTP Client Hint , gracias a la cual el cliente puede transmitir "pistas" sobre sus capacidades al servidor.
La "pista" correspondiente con respecto al soporte para el atributo de
loading encuentra ahora en una etapa temprana de
consideración .
Resumen
El autor de este material invita a todos los que estén interesados en utilizar el atributo de
loading al trabajar con los elementos
<img> y
<iframe> para probarlo y compartir
sus impresiones con
él . Está especialmente interesado en saber cómo, desde el punto de vista de los desarrolladores, se ven los mecanismos de soporte para varios navegadores propuestos aquí para la carga diferida de datos, y si se perdió algunos casos límite al hablar de tales mecanismos.
Estimados lectores! ¿Planea utilizar el atributo de
loading en sus proyectos?
