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 , 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):

// Primero se comprueba si hay secciones del constructor Divi en la página
function lazy_load_section_bg_check_if_needed() {
    global $post;
    $regex = '/[et_pb_section[^]]*background_image[^]].*?]/';
    if ( preg_match( $regex, $post->post_content ) ) {
        add_action( 'wp_print_styles', 'lazy_load_section_bg_add_header_css' );
        add_action( 'wp_print_footer_scripts', 'lazy_load_section_bg_add_footer_js' );
    }
}
// Inicialmente se imprime el CSS en  para ocultar todos los fondos de las secciones
function lazy_load_section_bg_add_header_css() {
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_section.et_pb_with_background:not(.lazy-loaded-background)';
    echo '';
}
// Ahora añadimos el JS que cargará las imágenes al hacer scroll, el lazy loading de marras
function lazy_load_section_bg_add_footer_js() {
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_section.et_pb_with_background:not(.lazy-loaded-background)';
?>


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:

// Primero se comprueba si hay carruseles del constructor Divi en la página
function lazy_load_slider_bg_check_if_needed() {
    global $post;
    $regex = '/[et_pb_slide[^]]*background_image[^]].*?]/';
    if ( preg_match( $regex, $post->post_content ) ) {
        add_action( 'wp_print_styles', 'lazy_load_slider_bg_add_header_css' );
        add_action( 'wp_print_footer_scripts', 'lazy_load_slider_bg_add_footer_js' );
    }
}
// Inicialmente se imprime el CSS en  para ocultar todos los fondos de carruseles
function lazy_load_slider_bg_add_header_css() {
    
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_slide:not(.et-pb-active-slide):not(.lazy-loaded-slide)';
    
    echo '';
}

// Ahora añadimos el JS que cargará las imágenes al hacer scroll, el lazy loading de marras
function lazy_load_slider_bg_add_footer_js() {
?>


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.

La entrada Tutorial Divi: Carga diferida (lazy) en imágenes de fondo de secciones y carruseles la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Vivir de un blog – Resumen de abril 2019

Vivir de un blog - Resumen mensualBueno, bueno, vino, vano, vuno. Ya estamos en mayo, lo que significa que se ha pasado el mes de abril (si es que, cuando me pongo lógico…). Este mes ya te imaginarás que no ha habido mucha chicha por el blog teniendo a un recién nacido por casa, pero aún así, vas a ver que han…

La entrada Vivir de un blog – Resumen de abril 2019 se publicó primero en Posicionamiento web | Vivir de un blog.

Cómo aumentar las visitas a tu página web o tu blog

Todos seguimos blogs y canales de YouTube de mucho éxito, sitios con una audiencia tan grande que les ha permitido vivir de esta actividad; en algunos casos, incluso convertirse en millonarios. No es extraño que hoy en día los más jóvenes sueñen con ser YouTubers de éxito y muchos otros con ganarse la vida emprendiendo online. Es divertido, tiene cierto “glamour”, te da independencia, puedes empezar desde tu casa, prácticamente sin dinero, sin tener que […]

La entrada Cómo aumentar las visitas a tu página web o tu blog se publicó primero en Ciudadano 2.0.

¿Qué es la analítica web y para qué sirve? Guía desde cero

Si eres webmaster (titular de una web), hay muchas disciplinas que, de dominarlas a no hacerlo, te cambian la vida. Una de esas disciplinas es la analítica web. En este post pretendo contarte qué es esto de la analítica web, la información que te aporta y cómo ésta puede impactar radicalmente en las decisiones sobre tu web y, en el caso de un negocio, también en las cifras de tu negocio. Créeme: salvo que ya […]

La entrada ¿Qué es la analítica web y para qué sirve? Guía desde cero se publicó primero en Ciudadano 2.0.

¿Qué es el marketing de contenidos y cómo conseguir que funcione?

En la actualidad, el marketing de contenidos es la estrategia de marketing más usada, pero también una de las que peor se implementan. Por eso, para unos es el Santo Grial del marketing, mientras que otros opinan que no funciona porque no consigue resultados. El problema que explica por qué se produce esta situación es simple: la idea básica del marketing de contenidos, atraer a un público con buenos contenidos que generen una buena predisposición […]

La entrada ¿Qué es el marketing de contenidos y cómo conseguir que funcione? se publicó primero en Ciudadano 2.0.