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…
Índice de contenidos
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):
// 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 <head> 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 '<style id="lazy-load-divi-section-backgrounds-css">' . $css_selector . ',' . $css_selector . ' > .et_parallax_bg' . '{background-image:none !important}</style>';
}
// 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)';
?>
<script id="lazy-load-divi-section-backgrounds-js">function lazyLoadDiviSectionBackgrounds(){jQuery('<?php echo $css_selector ?>').each(function(){var divPos=jQuery(this).offset().top,topOfWindow=jQuery(window).scrollTop();if (divPos<topOfWindow+1000){jQuery(this).addClass('lazy-loaded-background');}})}jQuery(document).ready(function(){lazyLoadDiviSectionBackgrounds()});jQuery(window).scroll(function(){lazyLoadDiviSectionBackgrounds()});jQuery(window).resize(function(){lazyLoadDiviSectionBackgrounds()});</script>
<?php
}
// Finalizamos añadiendo la acción
add_action( 'wp', 'lazy_load_section_bg_check_if_needed' );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 <head> 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 '<style id="lazy-load-divi-slider-backgrounds-css">' . $css_selector . ',' . $css_selector . ' > .et_parallax_bg' . '{background-image:none !important}</style>';
}
// 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() {
?>
<script id="lazy-load-divi-slider-backgrounds-js">!function(){var a=jQuery.fn.addClass;jQuery.fn.addClass=function(){var e=a.apply(this,arguments);return"et-pb-active-slide"==arguments[0]&&setTimeout(function(){var a=jQuery(".et-pb-active-slide + .et_pb_slide");a.addClass("lazy-loaded-slide"),a.hasClass("et_pb_section_parallax")&&(a=jQuery(".et_parallax_bg",a)).css("background-image",a.css("background-image"))},2e3),e}}();</script>
<?php
}
// Finalizamos añadiendo la acción
add_action( 'wp', 'lazy_load_slider_bg_check_if_needed' );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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Gracias Fernando. No sabía que los plugin normales de Lazy Load no funcionaban con Divi, aunque lo sospechaba. Me quedan dos dudas:
1.- Realmente, si los fondos o los carruseles los tienes above the scroll es un poco inútil hacer esto ¿verdad? porque de todas maneras ha de cargar desde segundo cero.
2.- Has dicho que tus snippets no funcionan con el Theme pero ¿y los plugins que recomiendas? ¿funcionan sólo con el constructoro o también con el theme?
Gracias tío. ¿Te veremos por el Seoplus?
Por aclarar, los plugins de Lazy Load SÍ funcionan con Divi, pero no con los fondos 😉
1. No te falta razón, bien visto
2. Solo con el plugin
¿Cuándo toca este año el SEOplus? Siempre me entero tarde
Hola Fernando como siempre eres un referente en el mundo de Wordpress por lo que quisiera realizarle una consulta si me lo permite, quisiera montar una web con wordpress y divi donde los usuarios puedan subir imagenes y documentos o textos algo asi como un perfil de facebook (algo parecido no igual) donde la web vaya creciendo sola que tenga escalabilidad es posible hacerlo con algun plugin, existe algo que pudiera realizar algo parecido????? un saludo
Feranando, muchas gracias, no conseguía «lazyloadear» las imágenes del fondo del Slider principal de DIVI. Ahora tengo 98% en Insight y 89% en GTMatrix!! GRACIAS