Usa los helpers de imagen y carga diferida

Los helpers de carga de POM evitan combinaciones contradictorias, como una imagen de alta prioridad que sigue siendo diferida.

Ejemplo:

$attributes = array_merge(
    array(
        'src'      => esc_url( $url ),
        'alt'      => $alt,
        'width'    => $width,
        'height'   => $height,
        'decoding' => 'async',
    ),
    pom_get_image_loading_attributes( array(), 'eager', 'high' )
);

Usa la alta prioridad solo para una imagen realmente crítica, normalmente la imagen principal situada en la parte visible inicial. Aplicarla a muchas imágenes anula la priorización del navegador.

Fuera de las celdas del carrusel de POM, una imagen con data-src, nolazy, loading explícito o fetchpriority explícito se trata como si ya tuviera su propia estrategia de carga. No la pases por otro transformador de carga diferida. El aplazamiento de origen del carrusel, descrito más abajo, tiene prioridad sobre las pistas nativas de carga inmediata/diferida para que las celdas fuera de pantalla no puedan iniciar descargas antes de tiempo. Las imágenes que ya pertenecen a otro cargador data-src permanecen con ese cargador.

Indica siempre la anchura/altura cuando se conozcan, elige un tamaño de imagen de WordPress adecuado, conserva srcset/sizes cuando sea posible y escribe un texto alternativo contextual.

Medios dentro de las diapositivas de Flickity

Mantén los fondos diferidos en el elemento que los pinta, usando class="lazy" y data-bg (o las variantes compatibles de alta densidad y de fondos múltiples). POM espera a que Flickity posicione sus celdas y, a continuación, carga los fondos a medida que entran en el área visible. Las celdas parcialmente visibles cuentan; las celdas totalmente recortadas, los paneles ocultos y las diapositivas de fundido inactivas permanecen diferidas. Las celdas del carrusel que las contienen y el área de visualización del navegador también participan en la comprobación de visibilidad.

El mismo comportamiento se aplica a las presentaciones de fondo de las filas de Page Builder y a las presentaciones de fondo de las secciones de Gutenberg. Cuando la Carga diferida del tema está activada, un ajuste de fondo inmediato carga la primera imagen enseguida y deja diferidas las imágenes posteriores de la presentación. Desactivar la Carga diferida del tema conserva la carga inmediata del fondo. Precarga solo la imagen crítica inicial: una precarga explícita inicia su solicitud independientemente de la visibilidad de la diapositiva.

Flickity se inicializa usando las dimensiones disponibles y vuelve a medir cuando las imágenes terminan de cargarse. No descarga todas las imágenes para establecer la disponibilidad de los medios. Cuando la Carga diferida del tema está activada, el paso de carga de contenido existente mueve las URL de imagen src y srcset a data-src y data-srcset dentro de las celdas del carrusel de POM. También difiere cada conjunto candidato picture > source. La biblioteca LazyLoad existente restaura estos atributos solo cuando la imagen es visible en su celda, y entonces el navegador elige el candidato responsive usando los valores conservados sizes, media y type. Las imágenes conservan loading="lazy" como pista para el navegador; el aplazamiento de origen proporciona el límite estricto de visibilidad del que carece la pista nativa.

Esto cubre los bloques Imagen del núcleo y los bloques POM Image dinámicos dentro de los elementos del Carrusel de Gutenberg, los carruseles anidados y el contenido heredado de carrusel/deslizador procesado a través de los filtros de contenido de WordPress. Las plantillas personalizadas que omiten esos filtros deben proporcionar atributos de origen diferidos mediante su propia integración de renderizado; llamar a un refresco del frontend no puede deshacer una solicitud ya iniciada desde src. No inicialices un segundo cargador de imágenes de propósito general sobre estas celdas.

Mantén valores precisos de width y height, o una proporción de aspecto CSS explícita, para reservar espacio. Los marcadores transparentes conservan las dimensiones intrínsecas conocidas, incluidos los tamaños de los orígenes de picture con dirección artística. Las dimensiones desconocidas no pueden reservar la proporción de aspecto de la imagen final. El marcado original de imagen/picture se conserva en noscript; esto no añade navegación de carrusel sin JavaScript.

El aplazamiento estricto cambia la carga anticipada por un menor número de solicitudes de imagen. Una diapositiva no almacenada en caché puede mostrar brevemente su espacio reservado al entrar en el área visible. Una imagen crítica inicial del carrusel también espera a JavaScript salvo que se precargue por separado; precarga solo el recurso realmente necesario en la vista inicial. Con la Carga diferida del tema desactivada, los orígenes de imagen normales permanecen en el HTML.

La transformación de origen reutiliza el paso DOM existente del tema y no añade un segundo analizador de contenido ni consultas de adjuntos. Añade trabajo por imagen de atributos y ascendencia, HTML de marcadores/alternativas y comprobaciones de visibilidad del navegador mientras los medios siguen pendientes. El cargador de JavaScript es compartido por ambos editores.