La mayoría de los elementos de Bricks Builder vienen con la función de carga diferida de imágenes de forma nativa, lo que contribuye a la optimización de la velocidad de carga de un sitio web. Sin embargo, es importante tener en cuenta que, al menos hasta la versión 1.9.9, el elemento Instagram Feed de Bricks Builder no incluye esta funcionalidad de carga diferida de imágenes de manera predeterminada.

No obstante, a pesar de que la carga diferida para las imágenes del elemento Instagram Feed no está configurada de forma predeterminada, contamos con la posibilidad de implementar esta funcionalidad mediante un filtro personalizado de Bricks Builder: bricks/frontend/render_data. Este filtro nos brinda la capacidad de modificar el contenido de una página antes de que se imprima, lo que nos permite integrar la carga diferida de imágenes en el elemento Instagram Feed.

Implementación de Lazy Load en Instagram Feed de Bricks Builder

Estudiando en detalle el archivo de scripts principales de Bricks, pude comprender el funcionamiento de su carga diferida (lazy load). Para que esta funcionalidad opere correctamente, tanto las imágenes como los contenedores con fondos deben estar marcados con la clase bricks-lazy-hidden. En el caso de las imágenes, en lugar de la URL de la imagen en el atributo src, debe colocarse en data-src; mientras que para los fondos, la propiedad background-image debe estar en data-style. Estos atributos (data-src y data-style) se sustituyen por src y style respectivamente cuando los elementos entran en la ventana gráfica. Teniendo en cuenta estos detalles, implementamos el siguiente código para cambiar los atributos src de las imágenes del feed por data-src y añadirles la clase bricks-lazy-hidden.

<?php 
add_filter('bricks/frontend/render_data', function($content, $post, $area) {
  // Agregar la clase bricks-lazy-hidden y reemplazar src por data-src en las etiquetas de imagen
  $content = preg_replace_callback(
    '/<img([^>]*)src="https:\/\/scontent.cdninstagram.com\/([^>]*>)/i',
    function($matches) {
      // Agregar la clase bricks-lazy-hidden
      // Reemplazar src por data-src
      $updated_img_tag = str_replace('src=', 'class="bricks-lazy-hidden" data-src=', $matches[0]);

      // Devolver la etiqueta de imagen actualizada
      return $updated_img_tag;
    },
    $content // Contenido para modificar
  );

  // Devolver el contenido modificado
  return $content;
}, 10, 3);

El código anterior usa la función preg_replace_callback() para reemplazar el contenido. Esta función de PHP busca coincidencias de un patrón de expresión regular en el contenido y ejecuta una función de devolución de llamada para reemplazar esas coincidencias. En este caso, busca etiquetas de imágenes HTML que contengan src="https://scontent.cdninstagram.com/. Cuando se encuentra una coincidencia, la función de devolución de llamada reemplaza src por class="bricks-lazy-hidden" data-src= en la etiqueta de imagen y devuelve la etiqueta actualizada.

Y listo, de esta manera logramos que las imágenes del feed de Instagram se carguen de manera diferida, lo que contribuirá significativamente a la velocidad de carga de nuestra página. Recuerda que para implementar este código en tu sitio, es necesario contar con un plugin como Code Snippets o insertar el código en el archivo functions.php de tu tema hijo. ¡A disfrutar de una página más rápida y eficiente!