¡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.
Índice de contenidos
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áginalazy
, 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!
Hola Fernando!
Está muy bien. No conocía el nuevo atributo de html loading. Si ya se ha implementado perfecto, pasaremos un poco más de javascript y del plugin A3 lazy load.
Saludos.
Buena noticia, estaba utilizando el plugin Lazy Load de WP Rocket y con buenos resultados.
Hola Fernando,
Sabes si wordpress también aplicará esta etiqueta nativa a las imágenes de fondo (background-image).
Por ejemplo cuándo utilizas el bloque de «fondo» de wordpress este te inserta la imágen con el siguiente código:
.page-hero{background-color:#1abc9c;background-image:url(URL-DE-LA-IMAGEN.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat;color…
Muchas gracias y un saludo.
GRACIAS Fernando… Actualmente utilizo el plugin «a3 Lazy Load» que aplica la carga diferida en imágenes, vídeos e iframes… Sería interesante que la carga diferida nativa en WP se aplique no solo a imágenes, sino a todos los elementos posibles… de esta forma podríamos ahorrarnos un plugin… Supongo que los plugins como «a3 Lazy Load» se actualizarán para complementar la carga nativa…
Abrazo…
El sistema estará preparado para ello, ya lo comento en el artículo
Hola Fernando,
Parece que al final no han establecido lazy loading para imágenes (por defecto) no?
Haciendo pruebas, no añade la etiqueta html (loading=»lazy») a ninguna imagen del contenido (ni posts ni páginas), además de seguir haciendo las peticiones de éstas como siempre.
En la documentación tampoco lo mencionan como una de las nuevas integraciones: https://make.wordpress.org/core/2020/03/03/wordpress-5-4-field-guide/
¿Tienes alguna info que el resto de mortales desconozcamos?
¡Mil gracias!