Tengo un carrusel simple en mi página de inicio. Cambia las imágenes automáticamente después de un par de segundos. El html se ve así:
<div> <div id="img-1" class="carousel-image" style="display: block;"></div> <div id="img-2" class="carousel-image" style="display: none;"></div> <div id="img-3" class="carousel-image" style="display: none;"></div> </div> Uso una función javascript para agregar las imágenes como background-image . Para asegurarme de que todas las imágenes del carrusel estén cargadas antes de que el carrusel comience a cambiar automáticamente, uso new Image() y cuento el número de imágenes cargadas. Una vez que se cargan las tres imágenes, puedo hacer startCarousel() .
var numberOfLoadedImages = 0; function setImage(imgUrl, imgId){ var homeImage = document.getElementById(imgId); homeImage.style.backgroundImage = 'url(' + imgUrl + ")"; var img = new Image(); img.onload = function() { if(numberOfLoadedImages === 2){ startCarousel(); } numberOfLoadedImages++; } img.src = imgUrl; if (img.complete) { img.onload(); } }Entonces puedo simplemente llamar a esta función de esta manera:
setImage('img-1', 'img-1'); setImage('img-2', 'img-2'); setImage('img-3', 'img-3');Lo que me gustaría lograr es cargar de forma diferida la segunda y la tercera imagen. Estos dos no son necesarios en la carga de la primera página; sólo la primera imagen es importante. Google Page Speed Insights menciona el segundo y el tercero bajo el encabezado "Servir imágenes en formatos de próxima generación", mientras que, si me preguntas, no deberían considerarse parte de la página. Deberían cargarse en segundo plano y en realidad no son esenciales para la primera pantalla y UX.
¿Cómo puedo decirle al navegador (o a Google Page Speed Insights) que estas imágenes no son esenciales para propósitos de UX y no deben considerarse parte de la primera pintura y UX?
Traté de poner la segunda y tercera llamada en un tiempo de espera con un intervalo corto, pero eso no funcionó.
NB: estoy usando vainilla javascript; no hay complementos en absoluto.
Puede esperar a que se cargue todo y una vez que la página esté completamente cargada (incluidas las imágenes, etc.) puede ejecutar setImage para su segunda y tercera imagen.
document.addEventListener('DOMContentLoaded', function() { setImage('img-2', 'img-2'); setImage('img-3', 'img-3'); }, false);En caso de que Google Page Speed Insights aún registre esto y prolongue el tiempo de carga de la página inicial, puede usar la función asíncrona para llamar a setImage.