Seleccionar página

En que consiste la carga diferida?
Permite posponer la carga de las imagenes y videos, principalmente aquellas imagenes que no necesitan ser cargadas, al acceder a una web solo vemos la parte superior, lo que conseguimos es las imagenes de abajo no se carguen hasta que no sea necesario o hasta que

Nivel: Avanzado.

  • Nivel de mejora: Permite mejorar 5 puntos la carga version movil y 0 Puntos la carga version PC (PageSpeed)
  • Web: Tipo Html5, en divi no he conseguido reproducir ya que al nombra las class solo permite modificar los div no las etiquetas <img>.
  • Pendiente reproducirlo en otros theme [ Astra]

Añadir en cada etiqueta img de tu pagina web la siguiente linea

  • class=»lazy»

Por ejmplos:

<a href=»https://play.google.com/store/apps/details?id=madrid.turismo.app.tourmadridpro» target=»_blank» rel=»external nofollow»><img src=»images/App en android turismo Madrid.png» class=»img-responsive,lazy» alt=»App Android» title=»App Android»/></a>

Añadir el siguiente script, en el footer.

<script>
document.addEventListener(«DOMContentLoaded», function() {
let lazyImages = [].slice.call(document.querySelectorAll(«img.lazy»));
let active = false;

const lazyLoad = function() {
if (active === false) {
active = true;

setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== «none») {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove(«lazy»);

lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});

if (lazyImages.length === 0) {
document.removeEventListener(«scroll», lazyLoad);
window.removeEventListener(«resize», lazyLoad);
window.removeEventListener(«orientationchange», lazyLoad);
}
}
});

active = false;
}, 200);
}
};

document.addEventListener(«scroll», lazyLoad);
window.addEventListener(«resize», lazyLoad);
window.addEventListener(«orientationchange», lazyLoad);
});

</script>

Mas infohttps://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

Articulos relacionados