Retrasar la carga de las imágenes en WordPress.

Para retrasar la carga de imágenes en WordPress y mejorar la velocidad de carga de tu sitio web, puedes seguir estos pasos:

1. Comprime las imágenes: Antes de subirlas a WordPress, asegúrate de comprimir tus imágenes sin pérdida de calidad. Esto reducirá su tamaño sin afectar su apariencia.
2. Utiliza imágenes en formato adecuado: Las imágenes en formato JPEG son ideales para fotos, mientras que las imágenes en formato PNG son más adecuadas para gráficos y elementos con texto.
3. Implementa una caché: La caché almacena versiones temporales de tus páginas web en el navegador del usuario. Esto permite que el navegador muestre la página más rápidamente en futuras visitas. Puedes utilizar plugins como WP Super Cache o W3 Total Cache para implementar una caché en WordPress.
4. Usa una CDN (Red de Distribución de Contenido): Las CDNs almacenan tus archivos en múltiples servidores en todo el mundo, lo que reduce la distancia que los usuarios deben viajar para descargar tus imágenes. Puedes utilizar servicios como Cloudflare o KeyCDN para agregar una CDN a tu sitio WordPress.
5. Optimiza tus imágenes con plugins: Existen varios plugins de WordPress que te permiten optimizar tus imágenes automáticamente. Algunos de ellos son: Smush, Imagify y ShortPixel. Estos plugins comprimen tus imágenes sin pérdida de calidad y las optimizan para mejorar la velocidad de carga de tu sitio.
6. Ajusta las dimensiones de las imágenes: Al subir imágenes a WordPress, asegúrate de que estén en el tamaño correcto. No subas imágenes mucho mayores que las dimensiones necesarias para evitar que el navegador tenga que escalar las imágenes, lo que afecta la velocidad de carga.

Para retrasar la carga de imágenes en WordPress y mejorar la velocidad de carga de tu sitio web, puedes seguir estos pasos:

1. Comprime las imágenes: Antes de subirlas a WordPress, asegúrate de comprimir tus imágenes sin pérdida de calidad. Esto reducirá su tamaño sin afectar su apariencia.
2. Utiliza imágenes en formato adecuado: Las imágenes en formato JPEG son ideales para fotos, mientras que las imágenes en formato PNG son más adecuadas para gráficos y elementos con texto.
3. Implementa una caché: La caché almacena versiones temporales de tus páginas web en el navegador del usuario. Esto permite que el navegador muestre la página más rápidamente en futuras visitas. Puedes utilizar plugins como WP Super Cache o W3 Total Cache para implementar una caché en WordPress.
4. Optimiza tus imágenes con plugins: Existen varios plugins de WordPress que te permiten optimizar tus imágenes automáticamente. Algunos de ellos son: Smush, Imagify y ShortPixel. Estos plugins comprimen tus imágenes sin pérdida de calidad y las optimizan para mejorar la velocidad de carga de tu sitio.
5. Ajusta las dimensiones de las imágenes: Al subir imágenes a WordPress, asegúrate de que estén en el tamaño correcto.

Para retrasar la carga de imágenes en WordPress, puedes utilizar diversas técnicas y plugins disponibles. Aquí se proporcionarán algunos métodos que puedes emplear:

1. Lazy Loading nativo de WordPress: WordPress 5.5 introdujo una funcionalidad de carga diferida (lazy loading) nativa para imágenes. Esta característica permite cargar las imágenes de forma diferida, es decir, solo cuando el usuario las va a visualizar mientras hace scroll por la página. Esta función puede habilitarse automáticamente en WordPress 5.5 o versiones posteriores, y puedes verificar si está activada yendo a Configuración > Medios en tu panel de administración.
2. Plugins de Lazy Load: Hay varios plugins disponibles en el repositorio de WordPress que te permiten implementar la carga diferida de imágenes de manera más personalizable. Algunos de los plugins populares son “Lazy Load by WP Rocket”, “Lazy Load Optimizer”, y “BJ Lazy Load”, entre otros. Estos plugins te ofrecen opciones para configurar cómo deseas aplicar la carga diferida en tu sitio web.
3. Código personalizado: Si prefieres implementar la carga diferida sin utilizar un plugin, puedes hacerlo añadiendo código personalizado al archivo functions.php de tu tema activo o a través de un plugin de código personalizado como “Code Snippets”. Aquí te muestro un ejemplo básico de cómo hacerlo utilizando el atributo “loading” en las etiquetas de imagen HTML:

phpCopy codeadd_filter( 'the_content', 'add_lazyload_to_images' );

function add_lazyload_to_images( $content ) {
    // Añade el atributo loading="lazy" a todas las etiquetas <img> en el contenido
    $content = str_replace( '<img', '<img loading="lazy"', $content );
    return $content;
}

Este código básico aplicará la carga diferida a todas las imágenes dentro del contenido del sitio web. Puedes personalizarlo aún más para aplicar la carga diferida solo a ciertas clases de imágenes o elementos específicos si lo deseas.

Recuerda siempre hacer una copia de seguridad de tu sitio web antes de realizar cambios importantes en el código o instalar nuevos plugins. Además, prueba cualquier cambio en un entorno de desarrollo antes de implementarlo en tu sitio en vivo.

Lazy Load en WordPress.

Lazy Load es una técnica que permite cargar contenido en una página web de manera gradual, en lugar de cargar todo al mismo tiempo. Esto se logra cargando primero los elementos más importantes y luego cargando los demás elementos cuando el usuario los necesita, por ejemplo, al desplazar la página o<|im_start|> ás<|im_start|> assistant en el caso de WordPress, al hacer clic en una imagen o enlazarla. Esta técnica es especialmente útil para mejorar la velocidad de carga y la experiencia del usuario en sitios web con muchas imágenes.

En WordPress, puedes implementar la función Lazy Load de varias maneras:

1. Plugin: Es la opción más fácil y recomendada para la mayoría de los usuarios. Existen varios plugins que te permiten agregar la función Lazy Load a tu sitio WordPress. Algunos de los plugins más populares y efectivos son:

• BJ Lazy Load.
• WP Lazy Load.
• Lazy Load by WP Rocket (si estás utilizando el plugin WP Rocket).

2. Código personalizado: Si no deseas utilizar un plugin, puedes agregar el código de “Lazy Load” a tu tema de WordPress. 

Puedes agregar el código de “Lazy Load” a tu tema de WordPress. Para ello, sigue estos pasos:

a. Accede a la sección “Apariencia” en el panel de administración de WordPress y selecciona “Editor”.
b. En la sección “Archivos de tema”, busca y selecciona el archivo “item.php” o el archivo que controla la estructura de tus entradas (puede variar según tu tema).
c. Copia el siguiente código y pégalo justo debajo de la etiqueta <img> en el archivo seleccionado:

<div class=”wp-lazy-load” data-src=”[imagen]” data-width=”[ancho]” data-height=”[alto]”>

Sustituye [imagen] por la URL de la imagen, [ancho] y [alto] por el tamaño de la imagen en píxeles, y [descripción de la imagen] por una descripción corta de la imagen.

Código en función de JavaScript: Si no deseas editar archivos de plantilla, puedes agregar el código de “Lazy Load” a tu sitio a través de un widget de JavaScript o agregándolo en la sección de “Editor de código personalizado” en el menú de Apariencia de WordPress. Para ello, utiliza el siguiente código JavaScript:

(function() {
var lazyLoad = function() {
var images = document.querySelectorAll(“img[data-src]”);
for (var i = 0; i < images.length; i++) {
images[i].setAttribute(‘data-original’, images[i].getAttribute(‘data-src’));
images[i].setAttribute(‘src’, images[i].getAttribute(‘data-src’) ? images[i].getAttribute(‘data-src’) : images[i].getAttribute(‘data-original’));
images[i].onload = function() {
this.removeAttribute(‘data-src’);
this.removeAttribute(‘data-srcset’);
this.removeAttribute(‘data-original’);
}
images[i].addEventListener(“load”, lazyLoad);
}
};
lazyLoad();
})();

Para que el código JavaScript se aplique a todas las imágenes en WordPress, necesitamos hacer algunos ajustes. Podemos lograr esto seleccionando todas las imágenes dentro del contenido de la página y aplicando la lógica de carga diferida a ellas. Aquí está el código corregido:

javascriptCopy code(function() {
    var lazyLoad = function() {
        var images = document.querySelectorAll("img");
        for (var i = 0; i < images.length; i++) {
            if (images[i].getAttribute('data-src')) {
                images[i].setAttribute('data-original', images[i].getAttribute('src'));
                images[i].setAttribute('src', images[i].getAttribute('data-src'));
                images[i].removeAttribute('data-src');
                images[i].removeAttribute('data-srcset');
                images[i].removeAttribute('srcset');
                images[i].onload = function() {
                    this.removeAttribute('data-src');
                    this.removeAttribute('data-original');
                }
            }
        }
    };
    lazyLoad();
})();

Este código busca todas las imágenes (<img>) en el contenido de la página y verifica si tienen el atributo data-src. Si lo tienen, establece el atributo src en el valor de data-src, y luego elimina los atributos data-src, data-srcset y srcset para evitar que se carguen nuevamente. Luego, establece un controlador de evento onload para cada imagen que elimina los atributos data-src y data-original una vez que la imagen se ha cargado correctamente.

Puedes agregar este código en el archivo de funciones de tu tema de WordPress (functions.php) utilizando la función wp_add_inline_script(), o puedes incluirlo directamente en tu tema utilizando un script personalizado. Recuerda hacer una copia de seguridad de tu sitio antes de realizar cambios.

Para aplicar este código a todas las imágenes en un sitio de WordPress, puedes utilizar el selector "img" en lugar de "img[data-src]". El código corregido sería:

(function() {
    var lazyLoad = function() {
        var images = document.querySelectorAll("img");
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute('data-original', images[i].getAttribute('src'));
            images[i].setAttribute('src', images[i].getAttribute('data-src') || images[i].getAttribute('src'));
            images[i].onload = function() {
                this.removeAttribute('data-src');
                this.removeAttribute('data-srcset');
                this.removeAttribute('data-original');
            }
            images[i].addEventListener("load", lazyLoad);
        }
    };
    lazyLoad();
})();

Este código JavaScript ahora aplica la función “Lazy Load” a todas las imágenes en tu sitio de WordPress.

El código que proporcionas añade el atributo loading="lazy" a todas las etiquetas <img> en el contenido de tu sitio de WordPress. Sin embargo, hay algunos ajustes que podrían mejorarse para garantizar que el código funcione correctamente. Aquí está el código corregido:

add_filter( 'the_content', 'add_lazyload_to_images' );
function add_lazyload_to_images( $content ) {
    // Añade el atributo loading="lazy" a todas las etiquetas <img> en el contenido
    $content = preg_replace_callback( '/<img[^>]*>/', function ( $match ) {
        return '<img loading="lazy" ' . $match[0] . '>';
    }, $content );
    return $content;
}

Este código utiliza la función preg_replace_callback para buscar y reemplazar todas las etiquetas <img> en el contenido. La función de llamada proporciona el atributo loading="lazy" a cada etiqueta <img> encontrada.

Para retrasar la carga de imágenes en WordPress y mejorar la velocidad de carga de tu sitio web, puedes seguir estos pasos:

1. Utilizar Lazy Load: Implementa la técnica de “Lazy Load” para cargar imágenes solo cuando el usuario las necesita, como al hacer scroll por la página. Puedes hacerlo de varias maneras:a. Lazy Load nativo de WordPress: Verifica si tu versión de WordPress es 5.5 o superior, ya que incluye una funcionalidad de carga diferida nativa para imágenes. Si es así, esta función debería estar habilitada automáticamente.b. Plugin de Lazy Load: Instala y activa un plugin de Lazy Load desde el repositorio de WordPress, como “BJ Lazy Load” o “Lazy Load by WP Rocket”. Estos plugins añaden la carga diferida a todas las imágenes de tu sitio de forma automática.c. Código personalizado: Si prefieres no usar un plugin, puedes agregar código personalizado al archivo functions.php de tu tema activo. Aquí tienes un snippet que puedes utilizar:

phpCopy codeadd_filter( 'the_content', 'add_lazyload_to_images' );
function add_lazyload_to_images( $content ) {
    // Añadir el atributo loading="lazy" a todas las etiquetas <img> en el contenido
    $content = preg_replace_callback( '/<img[^>]*>/', function ( $match ) {
        return '<img loading="lazy" ' . $match[0] . '>';
    }, $content );
    return $content;
}

2. Optimizar las imágenes: Antes de subir imágenes a tu sitio WordPress, comprímelas para reducir su tamaño sin perder calidad. Utiliza formatos adecuados como JPEG para fotografías y PNG para gráficos. Además, ajusta las dimensiones de las imágenes para que no sean mucho mayores de lo necesario.
3. Implementar una caché: Utiliza un plugin de caché como WP Super Cache o W3 Total Cache para almacenar versiones temporales de tus páginas web en el navegador del usuario. Esto acelerará la carga de tu sitio en visitas posteriores.
4. Utilizar una CDN: Considera utilizar una Red de Distribución de Contenido (CDN) para almacenar tus archivos en múltiples servidores en todo el mundo. Esto reducirá la distancia que los usuarios deben recorrer para descargar tus imágenes, mejorando así la velocidad de carga de tu sitio.

Implementando estos pasos, podrás retrasar la carga de imágenes en WordPress y ofrecer una experiencia de usuario más rápida y eficiente en tu sitio web.

Félix Arntz17:24 del 14 de julio de 2020

Imágenes de carga diferida en 5.5

En WordPress 5.5, las imágenes se cargarán de forma diferida de forma predeterminada, utilizando el atributo HTML nativoloading que se convirtió en un estándar web a principios de 2020 . Esto ahorrará drásticamente ancho de banda en ambos servidores, así como en los agentes de usuario en los sitios donde las imágenes más abajo en la página solían cargarse de inmediato, incluso en el caso de que el usuario nunca se desplace hacia ellas.

De forma predeterminada, WordPress agregará loading="lazy"todas img las etiquetas que tengan width atributos height presentes. Técnicamente, esto se maneja en la salida de la página, de manera similar a cómo se facilitan las imágenes responsivas en WordPress agregando atributos srcsety sizes. Para mejorar el rendimiento del lado del servidor de las dos funciones, wp_filter_content_tags()se ha introducido una nueva función para que imglas etiquetas solo necesiten analizarse una vez y luego se difieren las modificaciones a funciones más específicas relacionadas con la función.

Consulte el n.º 44427 para conocer el ticket general de Trac .

Cambio de diseño reducido como requisito previo

Un problema común en la experiencia del usuario en los sitios web modernos es el llamado cambio de diseño , a menudo causado por recursos multimedia de carga lenta, como imágenes: de forma predeterminada, solo después de cargar una imagen, el navegador puede diseñar la página correctamente, lo que da como resultado el contenido, por ejemplo. debajo de la imagen para cambiar. Este problema se puede resolver fácilmente proporcionando atributos widthy en las etiquetasheightimg , ya que el navegador los usará para determinar la relación de aspecto de la imagen para poder inferir el diseño de la página antes de cargar la imagen.

Si bien esto ya es un problema importante sin la carga diferida de imágenes, con la carga diferida se vuelve más relevante. Por lo tanto, WordPress solo agregará loading="lazy"etiquetas imgque tengan ambos atributos de dimensión presentes. Al mismo tiempo, resolver el problema subyacente es igualmente importante para reducir los cambios de diseño en general, razón por la cual con la versión 5.5 WordPress comenzará a rellenar widthlos heightatributos de imglas etiquetas cuando aún no estén presentes. Para ello, reutiliza la lógica establecida que ya existe para determinar srcsety sizesatributos. Al igual que con esos atributos, widthsolo heightse puede determinar si una imagen es para un archivo adjunto de WordPress y si la img etiqueta incluye la wp-image-$idclase relevante.

WordPress ha seguido principalmente estas mejores prácticas y se está trabajando para garantizar que todas las imágenes en el editor tengan widthyheight . Rellenar estos atributos no debería tener ninguna implicación en los temas, siempre y cuando el CSS de un tema funcione correctamente con el contenido del editor clásico, lo cual es lo esperado: si una imagen widthse heightmodifica mediante CSS, el otro atributo respectivo debe establecerse en auto, para Evite que la imagen se estire.

Consulte el n.° 50367 para obtener más información general sobre este cambio.

Personalizando la carga diferida

De forma predeterminada, WordPress agregará un loading="lazy"atributo a las siguientes imágenes:

• imágenes dentro del contenido de la publicación ( the_content)
• imágenes dentro de extractos de publicaciones ( the_excerpt)
• imágenes dentro de widgets de texto ( widget_text_content)
• imágenes de avatarget_avatar ( )
• imágenes de plantilla usando wp_get_attachment_image()( wp_get_attachment_image)

Los desarrolladores pueden personalizar este comportamiento a través de varios filtros, siendo el más básico wp_lazy_loading_enabled, que recibe los siguientes parámetros:

• $default: El valor booleano predeterminado de truefiltrar .
• $tag_name: un nombre de etiqueta HTML . Si bien según el comportamiento actual de WordPress esto siempre será img, se debe tener en cuenta que el loadingatributo es un atributo genérico y puede ampliarse para admitir más elementos, por ejemplo, iframes, en el futuro.
• $context: una cadena de contexto como parámetros adicionales, que indica de dónde proviene técnicamente la imagen, generalmente un nombre de enlace de WordPress. Según cómo WordPress utiliza la carga diferida, el contexto puede ser uno de los cinco valores entre paréntesis en la lista anterior .

Por ejemplo, si desea desactivar la carga diferida de forma predeterminada para las imágenes de plantilla, puede utilizar el siguiente fragmento de código:

123456789101112

functiondisable_template_image_lazy_loading( $default, $tag_name, $context) {    if( 'img'=== $tag_name&& 'wp_get_attachment_image'=== $context) {        returnfalse;    }    return$default;}add_filter(    'wp_lazy_loading_enabled',    'disable_template_image_lazy_loading',    10,    3);

Para modificar el atributo de carga de imágenes muy específicas, existen dos enfoques diferentes, según el tipo de imágenes:

Para las imágenes que aparecen dentro de un blob de contenido (p. ej. the_content, the_excerpt, ), se puede usar widget_text_contentotro filtro nuevo , que recibe los siguientes parámetros:wp_img_tag_add_loading_attr

• $value: El valor del atributo de carga, ya sea “perezoso” (predeterminado), “ansioso” o false. Si desea deshabilitar la carga diferida de una imagen, se recomienda especificarlo falsepara que el atributo se omita por completo.
• $image: La etiqueta HTML de la imagen completa con sus atributos.
• $context: El contexto, similar al descrito para el otro filtro anterior.

Por ejemplo, si desea deshabilitar la carga diferida para una imagen adjunta específica con ID 42 en tamaño “grande” dentro del contenido de la publicación, puede usar el siguiente fragmento de código:

123456789101112131415

functionskip_loading_lazy_image_42_large( $value, $image, $context) {    if( 'the_content'=== $context) {        $image_url= wp_get_attachment_image_url( 42, 'large');        if( false !== strpos( $image, ' src="'. $image_url. '"') {            returnfalse;        }    }    return$value;}add_filter(    'wp_img_tag_add_loading_attr',    'skip_loading_lazy_image_42_large',    10,    3);

Para las imágenes que se generan a través de wp_get_attachment_image(), el atributo se puede controlar simplemente a través del $attrparámetro de la función, que puede ser los mismos valores posibles que el $valueparámetro para el filtro anterior. Para no cargar una imagen de forma diferida, falsese debe especificar un valor de atributo de, lo que dará como resultado que se omita el atributo. Por ejemplo:

123456

echowp_get_attachment_image(    42,    'large',    false,    array( 'loading'=> false ),);

Se recomienda a los desarrolladores de temas que manejen de manera granular loadinglos atributos de las imágenes en cualquier momento en que dependan wp_get_attachment_image()u otra función basada en ellas (como the_post_thumbnail()o get_custom_logo()), dependiendo de dónde se usen dentro de las plantillas. Por ejemplo, si una imagen se coloca dentro de la header.phpplantilla y es muy probable que esté en la ventana gráfica inicial, es recomendable omitir el loadingatributo de esa imagen.

Las imágenes marcadas como candidatas para carga diferida requieren que el navegador resuelva dónde está posicionada la imagen en la página, lo que depende de que IntersectionObserver esté disponible y, por lo tanto, a partir de hoy retrasa ligeramente su recuperación. Los experimentos con Chrome para Android han demostrado que el impacto de dichas loading=”lazy”imágenes en la ventana gráfica inicial en la métrica de pintura con contenido más grande es bastante pequeño, con una regresión de <1% en los percentiles 75 y 99 en comparación con las imágenes sin carga diferida; Es una consideración a tener en cuenta donde los desarrolladores de temas pueden aplicar algunos ajustes para una experiencia de usuario aún mejor.

Consulte el n.° 50425 para obtener más información general sobre este cambio.

Compatibilidad del navegador

El loadingatributo es ampliamente compatible con los navegadores modernos , con una tendencia creciente: por ejemplo, si bien el soporte para Safari aún no está disponible en el momento de la publicación, la característica también se está trabajando allí y ya se ha fusionado con el motor WebKit subyacente .

Sin embargo, incluso los navegadores que actualmente no soportan el loading atributo no verán ninguna consecuencia negativa si WordPress proporciona el atributo en las imágenes, ya que el mecanismo nativo de carga diferida se implementa como una mejora totalmente progresiva : para esos navegadores el atributo simplemente será ignorado. Esto también significa que cada vez que un navegador implemente soporte para la función, sus usuarios obtendrán los beneficios de inmediato cuando naveguen por sitios con WordPress.

Explicación a detalle de lo anterior:

El artículo proporcionado por Félix Arntz, publicado el 14 de julio de 2020, discute la introducción de la carga diferida de imágenes en WordPress 5.5 y cómo esta característica puede mejorar significativamente el rendimiento de los sitios web al reducir el uso de ancho de banda y mejorar la experiencia del usuario.

1. Carga diferida de imágenes en WordPress 5.5:
   • A partir de la versión 5.5 de WordPress, se implementó la carga diferida de imágenes de forma predeterminada utilizando el atributo HTML loading, que se convirtió en un estándar web a principios de 2020. Esta característica ayuda a ahorrar ancho de banda tanto en servidores como en agentes de usuario al cargar imágenes solo cuando el usuario las necesita, como al hacer scroll por la página.
   • Por defecto, WordPress agregará el atributo loading="lazy" a todas las etiquetas <img> que tengan los atributos width y height presentes. Esto se maneja en la salida de la página, similar a cómo se facilitan las imágenes responsivas en WordPress.
   • También se aborda el problema del “cambio de diseño” que ocurre cuando los recursos multimedia de carga lenta, como las imágenes, hacen que el contenido debajo de la imagen cambie después de cargarse. WordPress aborda este problema rellenando los atributos width y height de las etiquetas <img> cuando aún no están presentes, lo que ayuda a reducir los cambios de diseño en general.
   • Se enfatiza la importancia de proporcionar los atributos width y height en las etiquetas <img> para ayudar al navegador a inferir el diseño de la página antes de cargar la imagen, lo que ayuda a resolver el problema subyacente del cambio de diseño.
2. Personalización de la carga diferida:
   • Los desarrolladores pueden personalizar el comportamiento de la carga diferida mediante varios filtros. Se menciona el filtro wp_lazy_loading_enabled, que permite desactivar la carga diferida de forma predeterminada para diferentes tipos de imágenes.
   • También se proporcionan ejemplos de cómo desactivar la carga diferida para imágenes específicas dentro del contenido de la publicación o dentro de plantillas de tema utilizando filtros específicos.
3. Compatibilidad del navegador:
   • Aunque algunos navegadores aún no admiten completamente el atributo loading, se menciona que la función de carga diferida se implementa como una mejora totalmente progresiva. Esto significa que los navegadores que no admiten el atributo simplemente lo ignorarán, y los usuarios seguirán beneficiándose de la carga diferida en navegadores compatibles.

En resumen, el artículo proporciona una visión detallada de cómo se implementa y personaliza la carga diferida de imágenes en WordPress 5.5, así como su impacto en el rendimiento y la experiencia del usuario.

In English, the native Lazy Loading feature of WordPress is automatically enabled and activated when you upgrade to WordPress version 5.5 or later. This means that you don’t need to manually enable it or add any specific code to your theme files. The native Lazy Loading feature is designed to work seamlessly with the default WordPress block editor (Gutenberg) and will automatically apply to image blocks and featured images when displayed on your website.

When using the default WordPress block editor (Gutenberg), the native Lazy Loading feature will work on the following elements:

1. Image blocks: When you insert an image into a post or page using the image block, the native Lazy Loading feature will be applied, ensuring that the image loads only when needed as the user scrolls through the content.
2. Featured images: If you have enabled featured images for your posts or pages, the native Lazy Loading feature will also be applied to these images, improving the overall performance of your site.

In summary, the native Lazy Loading feature in WordPress 5.5 and later versions is automatically enabled and does not require any additional configuration or code changes. It will work with image blocks and featured images in the default WordPress block editor (Gutenberg), helping to improve the loading speed and user experience of your website.