info@creativaonline.es

Lazyload imágenes de fondo en elementor

Todos sabemos que los sitios web más rápidos son mucho mejores para la experiencia del usuario, mejoran las tasas de conversión.

Como Especialistas en Optimización siempre nos centramos en el rendimiento a nivel servidor y cliente, siempre estamos buscando formas de mejorar los tiempos de carga y el rendimiento del sitio web.

Uno de los mayores problemas que nos encontramos, es aplicar el lazyload a las imágenes de fondos que llegan de nuestros clientes.

Desafortunadamente, la mayoría de los plugins que cargan imágenes de forma diferida (lazyload) no cargarán las imagenes de fondos. Algunos plugins cargarán fondos de forma diferida, pero solo si las imágenes de fondo se definen en línea en el HTML, así:

  
    <div id=”hero” style=”background-image: url(‘\mi-imagen-de-fondo.jpg’)”> </div>
  

A menos que esté codificando manualmente la sección o el sitio web, aplicar ese código en línea no es fácil o no es posible.

Si está utilizando Elementor, Beaver Builder o incluso Oxygen, obtener imágenes de fondo con carga diferida suele ser algo por lo que la gente tira la toalla.


Entonces, ¿eso significa que no podemos hacer nada? NO ¡aquí es donde este artículo se pone bueno! te mostraremos cómo puedes agregar fácilmente una imagen de fondo con carga diferida a cualquier sitio web, independientemente del constructor que esté utilizando.

Carga diferida (Lazyload)

Primero, repasemos rápidamente qué es la carga diferida (Lazyload), porque esto le ayudará a comprender cómo funciona el código que compartiremos aquí y cómo implementarlo fácilmente.

La carga diferida es el proceso de cargar algo solo cuando es necesario. En el caso de las imágenes, esto significa que las imágenes solo se cargan cuando los elementos de la imagen aparecen.

Primera parte: Poner código

La primera parte de la ecuación es un pequeño fragmento de JavaScript que puede agregar a cualquier sitio web. Así es como se ve ese código:

FICHERO: bg-lazy-loading.js

document.addEventListener("DOMContentLoaded", function() {
 var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-bg"));
 
 if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
 let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
 entries.forEach(function(entry) {
 if (entry.isIntersecting) {
 entry.target.classList.add("bg-visible");
 lazyBackgroundObserver.unobserve(entry.target);
 }
 });
 });
 
 lazyBackgrounds.forEach(function(lazyBackground) {
 lazyBackgroundObserver.observe(lazyBackground);
 });
 }
});

Copia el código bg-lazy-loading.js y los puedes poner en el directorio que más te guste, normalmente yo lo pongo en la raíz de la web:

Después debes de poner esta parte de código en tu fichero functions.php:

  
    wp_enqueue_script( 'bg-lazy-loading', '/path-al-js/bg-lazy-loading.js’, array( 'jquery' ), ‘1.0.0’, true );
  

Segunda parte: implementación

Una vez que tenga el script en ejecución, ahora podemos comenzar a configurar nuestros elementos con imágenes de fondo. Le aconsejaría que no haga nada de esto hasta que la página esté completamente construida. Este debe ser el último paso que debe dar antes de publicar la página o el sitio.

Paso 1: agregue la clase de carga diferida

El primer paso es agregar una clase de .lazy-bg a cualquier elemento con una imagen de fondo. Así es como se vería en dos de nuestros creadores de páginas favoritos:

Lazyload fondo Elementor

Paso 2: establecer la imagen de fondo con la clase BG-Visible

Una vez que se agrega la clase, debe mover la imagen de fondo del elemento a la clase. Así es como se vería usando los mismos ejemplos anteriores:

Con Oxygen o Elementor, tiene varias formas de agregar CSS. Realmente no importa cómo o dónde lo agregue, lo que importa es que tiene el CSS en alguna parte. En los ejemplos anteriores, agregamos el CSS en el CSS personalizado de Elementor para el elemento específico. En el ejemplo de Oxygen, agregamos un bloque de código y pusimos el CSS allí.

Conclusión

¡Eso es todo! Con unos minutos de trabajo, habría reducido bastante el “peso” o el tamaño de su página. La mayoría de las imágenes de fondo están en el rango de 80 KB a 180 KB, y algunas tienen un tamaño más grande según la cantidad de detalles y la calidad de la imagen.

Considerando que tenga una página con 3 imágenes de fondo, con esto ahorramos de entre 210 KB y 540 KB de tamaño de página. ¡Eso es medio megabyte!

Este es un pequeño secreto que puede reducir una gran cantidad de tiempo de carga de su página y ayudarlo a acercarse un paso más a la optimización.

LISTADO DE LAS HERRAMIENTAS QUE USO NORMALMENTE:

WP-Rocket en la mayoria de los sitios que optimizo
Perfmatters junto con wp-rocket para desactivar JS y CSS entre muchas otras cosas.
Imagify para optimizar las imágenes y convertir en webp
BunnyCDN para servicio de CDN con muchos puntos a nivel mundial y que vale muy poco.
CloudFlare solo para servir las DNS ya que es uno de los más rápidos, (los servicios los tengo pausado en todas las webs)
Mi hosting en VULTr Madrid con Discos SSD NVMe, con NGINX como servidor web y REDIS como caché de objetos.

2 comentarios en “Lazyload imágenes de fondo en elementor”

  1. Hola, Jordi.

    Hace tiempo andaba buscando sobre el tema del lazy-load en las imágenes de fondo.

    Con este artículo has bordado el tema.

    Lo explicas de forma tan sencilla que cualquier persona puede ser capaz de implementar.

    En lo personal, creo que es mejor agregar el código js a un plugins de funciones, de tal forma que cuando decidas cambiar de theme, se mantenga el código.

    Un saludo y muy agradecido con tu generosidad.

    Jacobo

    1. Hola Jacobo,

      Muchas gracias por tu comentario, gracias a gente como tu a quien puedo ayudar un poco me anima a publicar más en mi blog cuando me sale algo de tiempo.

      Un abrazo

Deja un comentario

Tu dirección de correo electrónico no será publicada.