¡Ya llega la carga diferida (lazy loading) nativa a WordPress!

¡Estamos que lo tiramos últimamente!

Si esta misma semana anunciábamos que WordPress tendrá mapas del sitio nativos este mismo año, ahora se confirma que WordPress incorporará la carga diferida (lazy loading) nativa de la que hablamos hace tiempo.

No me extenderé mucho en qué es y qué implica la carga diferida, pues ya lo expliqué en este artículo, así que vamos con las novedades relevantes.

El objetivo: Mejorar el rendimiento de WordPress

Aunque hasta ahora la carga diferida de imágenes requería usar JavaScript, ya hay una solución web natiiva que solo requiere el atributo loading en las tags HTML img y ofrece una experiencia estándar sin alterar el contenido.

Además, el atributo ya lo admiten los principales navegadores.

Como ya habrás leído, el problema de carga de la web no es por culpa de WordPress, sino por las imágenes. Y sin la carga diferida todas las imágenes de una página web se cargan automáticamente al acceder a la URL, sin tener en cuenta si el usuario hace scroll para verlas o no.

Esto incide negativamente en la percepción de tiempo de carga de la página, por un lado, y en el consumo excesivo de recursos innecesarios tanto de red como del servidor, por otro.

El hecho de que WordPress incorpore la carga diferida nativa por defecto impactará de manera significativa en el rendimiento y velocidad de millones de sitios, gracias a su inmensa implantación, y todo ello sin que los usuarios y administradores de webs tengan que tener ningún conocimiento técnico, ni siquiera saber qué es eso de la carga diferida o lazy loading.

De nuevo, WordPress tiene una oportunidad de liderar Internet, adoptando una tecnología que acelerará de manera significativa la experiencia de usuario en todos los sitios WordPress.

¿Cómo se va a hacer?

¡Ni te vas a enterar!

Pero para que sepas qué habrá detrás del capó, en las tripas de WordPress, esta es la explicación técnica de cómo se hará…

Actualmente, el atributo loading tiene dos posibles valores:

• eager, que carga la imagen de inmediato, al cargar la página
• lazy, que carga la imagen solo cuando tiene que verse en el dispositivo

Lo que hará WordPress será añadir el atributo loading con el valor lazy en todas las etiquetas img:

• Imágenes en el contenido de entradas y páginas
• Imágenes en los extractos
• Imágenes en los comentarios
• Imágenes en los widgets
• Imágenes cargadas mediante wp_get_attachment_image()
• Avatares cargados mediante get_avatar()

Eso sí, el atributo loading="lazy" solo se añadirá si la etiqueta no incluye ya un atributo de carga previo. Vamos, que respetará atributos previso que tengas, y de paso, si quieres que una imagen no se cargue de modo diferido tendrás que añadirle manualmente el atributo loading="eager".

¿Eres desarrollador?

No temas, aunque es verdad que las imágenes de la lista anterior se cargarán de modo diferido por defecto, como desarrollador podrás saltarte este comportamiento, tanto globalmente como en cada imagen.

Se ha creado un nuevo filtro, wp_lazy_loading_enabled, que te permitirá activar o desactivar esta característica.

Por ejemplo, el siguiente código desactiva totalmente la carga diferida de WordPress:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Con este filtro también puedes pasar un segundo parámetro, $tag_name, con el que activar o desactivar la carga diferida de una tag concreta, y también ppodrás usar el parámetro $context, con el nombre del filtro que se esté ejecutando.

Actualmente solo se puede aplicar al valor img, pero como ya se está valorando añadir valores de carga a otras etiquetas HTML (p.ej. algunos navegadores ya pueden aplicar el atributo loading en etiquetas iframe), tendremos este parámetro para compatibilidad futura.

Así, por ejemplo, si quieres ser más concreeto y desactivar la carga diferida solo para imágenes, para que las próximas etiquetas que se incorporen la tengan activa, podrías usar el siguiente código:

add_filter(
        'wp_lazy_loading_enabled',
        function( $result, $tag_name ) {
                if ( 'img' === $tag_name ) {
                        return false;
                }
                return $result;
        },
        10,
        2
);

Además de este filtro,  hay otro, wp_set_image_loading_attr, que filtra el valor del atributo de carga imagen por imagen.

El filtro pasa el marcado completo de la etiqueta img, incluyendo todos los atributos como segundo parámetro, todo el bloque de contenido al que pertenezca la imagen, e incluso su contexto.

Este filtro wp_set_image_loading_attr puede usarse, por ejemplo, para interactuar con plugins que ya usen mecanismos diferentes de carga diferida.

De todos modos solo se recomienda usarlo como apaño durante la transición, por compatibilidad con plugins, para en un futuro ya aplicar los plugins el atributo incorporado loading="eager", como hemos visto antes.

¿Lo quieres probar ya?

Ya está disponible de momento como plugin de propuesta de características, se llama WP Lazy Loading, y lo tienes en el directorio de plugins.

El plugin se está desarrollando en GitHub.

Y te animo a probarlo, especialmente en todo tipo de contextos (blog, ecommerce, shortcodes, etc), e incluso en conjunto con plugins de carga diferida que ya existen.

Pero no te creas que esto es algo a estudiar, analizar y pensarse, se quiere que vaya en la próxima versión, en WordPress 5.4, que estará disponible en pocas semanas.

Así que, tanto si eres usuario como desarrollador, ponte las pilas, pruébalo y avisa de cualquier idea, problema, fallo, en el foro de soporte del plugin o en su repositorio de GitHub, que luego todo son quejas, y aquí también puedes ayudar a hacer un WordPres mejor.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!