Lazy-load
Habilita la carga diferida para imágenes e iframes para mejorar el rendimiento de carga de páginas utilizando la biblioteca JavaScript lazysizes.
lazy
Install
composer require 'drupal/lazy:^4.0'
composer require 'drupal/lazy:8.x-3.16'
Overview
El módulo Lazy-load proporciona una solución integral para la carga diferida de imágenes e iframes en Drupal. Difiere la carga de imágenes e iframes fuera de la pantalla hasta que estén a punto de entrar en el viewport, mejorando significativamente los tiempos de carga inicial de la página y reduciendo el uso de ancho de banda.
El módulo soporta múltiples métodos de integración: filtros de texto para imágenes e iframes en línea en campos de texto formateado, configuración de formateadores de campo para campos de imagen, y formateadores de campo personalizados para Views. Utiliza la biblioteca JavaScript lazysizes de alto rendimiento que proporciona carga diferida compatible con SEO con detección automática de cambios de visibilidad.
Las capacidades clave incluyen soporte para imágenes responsivas con picture/srcset, respaldo de carga diferida nativa del navegador mediante el atributo loading="lazy", imágenes de marcador de posición con incrustación opcional de URI de datos, efectos de transición CSS, desactivación automática en páginas AMP, y controles de visibilidad flexibles basados en rutas.
Features
- Carga diferida de imágenes e iframes utilizando la biblioteca JavaScript lazysizes para alto rendimiento y carga compatible con SEO
- Soporta imágenes e iframes en línea en campos de texto formateado mediante filtro de texto configurable
- Se integra con formateadores de campos de imagen incluyendo Image, Responsive Image, Colorbox y Media Thumbnail
- Proporciona formateadores de campo dedicados Image (Lazy-load) y Responsive image (Lazy-load) para usar con Views
- Soporta carga diferida nativa del navegador mediante el atributo loading="lazy" como alternativa a JavaScript
- Permite imágenes de marcador de posición con incrustación opcional de URI de datos para marcadores de posición base64 en línea
- Ofrece efectos de transición CSS para animaciones de carga de imágenes suaves
- Desactiva automáticamente la carga diferida en páginas AMP
- Proporciona controles de visibilidad basados en rutas para habilitar/deshabilitar la carga diferida en páginas específicas
- Soporta 24 plugins de lazysizes para funcionalidad extendida incluyendo blur-up, object-fit, video-embed y más
- Permite que los elementos omitan la carga diferida agregando una clase de omisión configurable
- Proporciona múltiples hooks para personalización de temas/módulos de formateadores de campo, estilos CSS y configuraciones
Use Cases
Mejorar el rendimiento de carga de páginas con muchas imágenes
Habilite la carga diferida en campos de imagen para tipos de contenido que contienen muchas imágenes, como galerías, portafolios o listados de productos. Esto difiere la carga de imágenes fuera de la pantalla hasta que los usuarios se desplazan hacia ellas, reduciendo significativamente el tiempo de carga inicial de la página y el uso de ancho de banda.
Carga diferida de videos incrustados e iframes
Habilite el filtro de texto de carga diferida con soporte de iframe para formatos de texto usados en campos de cuerpo. Esto difiere la carga de videos de YouTube incrustados, mapas y otro contenido iframe hasta que los usuarios se desplazan hacia ellos, mejorando el rendimiento inicial de la página especialmente en páginas con múltiples videos incrustados.
Usar imágenes de marcador de posición para mejor rendimiento percibido
Configure una imagen de marcador de posición (como un pequeño GIF transparente o una versión borrosa de baja resolución) para mostrar mientras la imagen real se carga. Esto previene el desplazamiento del diseño y proporciona retroalimentación visual de que el contenido está cargando. Use la opción de URI de datos para incrustar marcadores de posición pequeños directamente en el HTML.
Views con imágenes de carga diferida
Use los formateadores de campo dedicados Image (Lazy-load) o Responsive image (Lazy-load) en visualizaciones de Views. Estos formateadores habilitan automáticamente la carga diferida sin requerir configuración de terceros, facilitando agregar carga diferida a Views que muestran muchas imágenes.
Deshabilitar carga diferida en páginas específicas
Use las configuraciones de visibilidad para deshabilitar la carga diferida en páginas donde no es necesaria o podría causar problemas, como feeds RSS, páginas para imprimir, o páginas con imágenes que deben cargarse inmediatamente en la parte superior de la página.
Carga diferida nativa para navegadores modernos
Habilite la opción 'Preferir carga diferida nativa' para usar la característica de carga diferida incorporada del navegador (atributo loading="lazy") para navegadores que la soportan. Esto proporciona carga diferida sin requerir JavaScript y puede ofrecer mejor rendimiento en navegadores compatibles.
Tips
- Use la pestaña de Vista previa en la configuración del módulo para probar que la carga diferida funciona correctamente - desplácese hacia abajo pasando el espaciador para ver la imagen de vista previa cargarse
- Para la mejor experiencia de usuario, combine la carga diferida con imágenes responsivas para servir imágenes de tamaño apropiado a diferentes dispositivos
- El plugin blur-up puede proporcionar un efecto visual agradable mostrando un marcador de posición borroso de baja resolución que transiciona a la imagen completa
- Los elementos pueden excluirse de la carga diferida agregando la clase de omisión (predeterminado: no-lazy) al elemento o su padre
- Cuando use Views, prefiera los formateadores de carga diferida dedicados sobre las configuraciones de terceros para una configuración más simple
- Monitoree Core Web Vitals (LCP, CLS) después de habilitar la carga diferida para asegurar que mejora en lugar de perjudicar el rendimiento percibido
- Considere habilitar la carga diferida nativa si su audiencia usa principalmente navegadores modernos, ya que no requiere JavaScript
Technical Details
Admin Pages 1
/admin/config/content/lazy
Configura las opciones globales de carga diferida para imágenes e iframes en todo el sitio. Esta página muestra qué formatos de texto y campos tienen actualmente la carga diferida habilitada y proporciona opciones de configuración completas para la biblioteca lazysizes.
Permissions 1
Hooks 4
hook_lazy_field_formatters_alter
Altera la lista de formateadores de campo habilitados que soportan carga diferida. Use este hook para agregar formateadores de campo personalizados basados en imágenes.
hook_lazy_default_styles_alter
Sobrescribe los estilos CSS predeterminados que se inyectan para las clases de carga diferida (lazyload, lazyloaded).
hook_lazy_effect_styles_alter
Sobrescribe los estilos de efecto de transición CSS predeterminados. Solo aplica cuando la opción 'Habilitar efecto CSS predeterminado' está marcada.
hook_lazy_settings_alter
Altera las configuraciones del módulo Lazy. Puede usarse para sobrescribir configuraciones por entorno o condición.
Troubleshooting 5
Verifique que: 1) La biblioteca lazysizes está instalada en la ruta configurada (/libraries/lazysizes por defecto), 2) La carga diferida está habilitada para el formato de texto o formateador de campo que se está usando, 3) La página actual no está en la lista de rutas deshabilitadas, 4) La página actual no es una página de administración (si la deshabilitación de admin está activa), 5) Los elementos no tienen la clase de omisión (no-lazy por defecto).
Descargue la biblioteca lazysizes desde https://github.com/aFarkas/lazysizes/releases y colóquela en /libraries/lazysizes, o instale vía Composer con 'composer require bower-asset/lazysizes'. Asegúrese de que el nombre de la carpeta sea exactamente 'lazysizes' y contenga lazysizes.min.js.
Configure una URL de imagen de marcador de posición que coincida con la relación de aspecto de sus imágenes, o use la opción placeholder_style en los formateadores de campo para generar imágenes de marcador de posición con el tamaño apropiado. Considere habilitar un estilo de imagen pequeño como marcador de posición para mantener las dimensiones.
Use hook_lazy_field_formatters_alter() en su módulo personalizado para agregar el nombre de máquina de su formateador de campo a la lista de formateadores soportados.
Habilite la opción 'Habilitar efecto CSS predeterminado' en la configuración del módulo para agregar transiciones de opacidad suaves cuando las imágenes se cargan. El efecto predeterminado desvanece las imágenes en 2 segundos.
Security Notes 3
- El módulo maneja de forma segura las rutas de archivos y valida que las rutas de biblioteca comiencen con / o https:// para prevenir ataques de traversal de ruta
- Cuando use un CDN externo para la biblioteca lazysizes, asegúrese de que sea de una fuente confiable ya que el JavaScript se ejecutará en su sitio
- El filtro de texto sanitiza apropiadamente la manipulación del DOM para prevenir XSS cuando procesa imágenes e iframes en línea