Tutorial Divi: Carga diferida (lazy) en imágenes de fondo de secciones y carruseles

Por si no conoces el concepto de carga diferida, o lazy loading en inglés, es la característica que verás en muchas webs por la que las imágenes de una página no se cargan todas nada más visitarla, sino que se van mostrando a medida que haces scroll, navegas, por la misma.

Es una estrategia que hace que la percepción de velocidad de carga sea más rápida, pues solo cargará los recursos necesarios que está viendo el usuario, y solo carga las imágenes a medida que el usuario navega hacia ellas.

Como contrapartida, que todo hay que decirlo, este proceso se realiza mediante JavaScript, lo que puede aumentar el consumo de recursos de tu servidor.

Te digo esto porque estas cosas de la optimización web o WPO, no son una máxima, hay que probar siempre todas las posibilidades y opciones, y no siempre una técnica o estrategia de optimización, como la carga diferida, será una buena decisión en todas las webs.

De este modo, una web con pocas imágenes, todas muy optimizadas previamente, si se le añade la carga diferida de imágenes, puede que no solo no vaya más rápida y sea más óptima en el consumo de recursos, sino menos.

Dicho esto, y si tu web cualifica para aplicar la técnica de carga diferida de imágenes, vamos al tema de hoy…

Ya tengo un plugin que hace lazy loading, ¿por qué habría de aplicar carga diferida en carruseles y fondos de sección de Divi?

Bien dicho, y justo esa es la cuestión, pues la inmensa mayoría de plugins que – entre otras cosas – hacen carga diferida de imágenes, no suelen aplicar esta técnica, el JavaScript, a las imágenes de los fondos de los carruseles y de las secciones del constructor Divi.

Y esto es así porque aplican la carga diferida a los elementos con la etiqueta HTML <img>, pero resulta que los fondos de Divi no llevan esa etiqueta, porque se aplican mediante CSS, así que no suelen reconocer las imágenes de fondo de Divi, que curiosamente suelen ser de gran tamaño, y en ocasiones de bastante peso comparadas con otras que podamos mostrar en otros elementos.

¡Muy bien explicado Fernando, sí señor! Venga, dale ¿cómo lo hago?

Vayamos por partes, porque el código no es el mismo, ya sea un fondo de sección o de un carrusel (o control deslizante como se llama en la horrible traducción de Divi).

Pero antes una información/advertencia:

Estos códigos funcionan con el constructor Divi, el plugin, pero NO con el tema Divi.

Carga diferida en fondos de sección de Divi

El siguiente código aplicará lazy loading a las imágenes de fondo de secciones creadas con el constructor Divi  (plugin, acuérdate):

Este código tendrás que copiarlo en un plugin de personalizaciones, como el que expliqué cómo hacerlo en esta entrada.

Carga diferida en fondos de carruseles de Divi

El código para hacer la carga diferida de las imágenes de fondo de un carrusel creado con el constructor Divi es este otro:

Y como antes lo copias y pegas en tu plugin de funciones útiles, o si lo prefieres en un mu-plugin.

¡Precioso! Ahora, en serio ¿no hay algún plugin para hacer lo mismo?

Vaaaale, sí, los hay, estos:

Pero ¿no es mejor tener más controlada la cosa con tu propio plugin donde metes todos tus apaños?

De paso le pierdes el miedo al código, y ¿quién sabe? quizás en unos meses o años terminas siendo un crack de la programación, que muchos, sino la mayoría, empezaron/mos copiando códigos de otros.

Bueno, tú decides.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido