WordPress incluye lazy loading nativo para imágenes e iframes desde su versión 5.5

WordPress incluye lazy loading nativo para imágenes e iframes desde su versión 5.5.

WordPress introdujo soporte nativo para lazy loading en imágenes a partir de la versión 5.5 (lanzada en agosto de 2020). Esta función está integrada en el núcleo de WordPress y funciona utilizando el atributo HTML loading="lazy", que retrasa la carga de imágenes hasta que el usuario se desplaza cerca de ellas en la página.

Características clave:

Activado por defecto:
El lazy loading se aplica automáticamente a las imágenes en contenido (como posts, páginas y widgets) sin necesidad de plugins adicionales.
Exclusión de imágenes “above the fold”:
Por defecto, las primeras imágenes (generalmente 1-3) no tienen lazy loading para asegurar que el contenido crítico se cargue inmediatamente. Esto se basa en la suposición de que las primeras imágenes están en la zona visible inicial (above the fold).
Soporte para iframes:
También se aplica lazy loading a los iframes (como vídeos incrustados) usando el mismo atributo loading="lazy".

¿Cómo personalizarlo?

WordPress ofrece filtros para ajustar este comportamiento:

Desactivar lazy loading:

  add_filter('wp_lazy_loading_enabled', '__return_false');

Cambiar el número de imágenes excluidas:

  add_filter('wp_omit_loading_attr_threshold', function() { return 5; }); // Excluye las primeras 5 imágenes.

Consideraciones:

Compatibilidad con navegadores:
El atributo loading="lazy" es compatible con la mayoría de navegadores modernos (Chrome, Firefox, Edge, Safari 15.4+), pero no afecta a navegadores antiguos (se cargarán normalmente).
Plugins externos:
Si usas plugins de optimización (como WP Rocket, Smush, o a3 Lazy Load), pueden anular la función nativa de WordPress. Verifica si hay conflictos o ajustes adicionales.

Conclusión:

Sí, WordPress incluye lazy loading nativo para imágenes y iframes desde su versión 5.5, optimizando la velocidad de carga sin necesidad de configuración manual. Sin embargo, puedes personalizarlo según tus necesidades usando los filtros mencionados. 😊

¿Cómo manipular esto con Snippets?.

¡Perfecto! Si solo puedes usar snippets de PHP, puedes personalizar el lazy loading de WordPress utilizando los filters nativos que ofrece el core. Aquí te dejo ejemplos prácticos según lo que necesites:

1. Desactivar Lazy Loading por completo

   add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Esto eliminará el atributo loading="lazy" de todas las imágenes e iframes.

2. Excluir imágenes específicas del Lazy Loading

Si quieres que ciertas imágenes (ej: logo, imágenes “above the fold”) NO usen lazy loading, agrega una clase personalizada (ej: skip-lazy) a esas imágenes y usa este filtro:

   add_filter( 'wp_get_attachment_image_attributes', 'exclude_images_from_lazy_loading', 10, 3 );
   function exclude_images_from_lazy_loading( $attr, $attachment, $size ) {
       if ( isset( $attr['class'] ) && strpos( $attr['class'], 'skip-lazy' ) !== false ) {
           unset( $attr['loading'] );
       }
       return $attr;
   }

Uso en HTML:

   <img src="imagen.jpg" class="skip-lazy" alt="...">

3. Cambiar el número de imágenes excluidas inicialmente

Por defecto, WordPress excluye las primeras 1-3 imágenes. Si quieres excluir más:

   add_filter( 'wp_omit_loading_attr_threshold', function() {
       return 5; // Excluye las primeras 5 imágenes
   });

4. Desactivar Lazy Loading en páginas específicas

Ejemplo: Desactivar en la página de inicio (is_front_page()):

   add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_load_homepage' );
   function disable_lazy_load_homepage( $enabled ) {
       if ( is_front_page() ) {
           return false;
       }
       return $enabled;
   }

5. Forzar Lazy Loading en todas las imágenes

Si quieres que hasta la primera imagen use lazy loading (útil si tu theme carga contenido dinámico):

   add_filter( 'wp_omit_loading_attr_threshold', '__return_zero' );

6. Excluir un post type específico

Ejemplo: Desactivar lazy loading en el post type productos:

   add_filter( 'wp_lazy_loading_enabled', 'disable_lazy_load_for_products' );
   function disable_lazy_load_for_products( $enabled ) {
       if ( is_singular( 'productos' ) ) {
           return false;
       }
       return $enabled;
   }

¿Dónde colocar estos snippets?

En el archivo functions.php de tu tema hijo (recomendado).
Usando un plugin de snippets como Code Snippets.

Notas importantes:

Prueba en entorno de desarrollo: Antes de aplicar cambios en producción.
Caché: Si usas plugins de caché, limpia el caché después de aplicar los snippets.
WordPress 5.5+: Asegúrate de estar usando al menos esta versión.

Si necesitas un ajuste más específico, ¡dime y te ayudo! 😊