Carga diferida (lazy loading) nativa en WordPress

Por si no te habías enterado aún, desde la versión 76, el navegador Chrome – tanto para ordenador como para Android – ya es compatible con la carga diferida (lazy loading) nativa.

Y aunque ya se está debatiendo incorporar esta característica en el núcleo de WordPress, de momento no está disponible, pero puedes añadirlo.

Pero espera, empecemos por el principio…

¿Qué es eso de la carga diferida nativa o native lazy loading?

La compatibilidad nativa de la característica de lazy loading significa que ya no es obligatorio el uso de JavaScript para ofrecer la carga diferida de imágenes y vídeos (iframes), ya que funcionará aunque esté desactivado el JavaScript en el navegador.

Es un fantástico y óptimo reemplazo de las soluciones de JavaScript para ofrecer la carga diferida.

Permitirá a los desarrolladores quitar código innecesario, como el que ahora se incorpora en los plugins WordPress de optimización que activan carga diferida..

De paso arreglará los problemas asociados a la carga diferida, como el uso de  data-src, que no muestra imágenes de manera nativa en el navegador sin el uso de JavaScript. Para solucionarlo los desarrolladores tienen que incluir noscript ay repetir el elemento img con el atributo src. Así funciona de momento.

Un ejemplo sería algo así:

<img class="lazy" data-src="https://midominio.es/imagen.png” alt="">
<noscript>
    <img src="https://midominio.es/imagen.png” alt="">
</noscript>

Con la carga diferida nativa (native lazy-loading) los desarrolladores solo tendrán que incluir el atributo loading y especificar un valor de lazy o eager.

Así:

<img src="https://midominio.es/imagen.png” loading="lazy" alt="">

El valor lazy le dice al navegador que quieres diferir (aplazar) la carga de la imagen o el iframe hasta que se alcance una cierta distancia de la parte visible de la ventana del navegador. Vamos, que no se verá hasta que llegues a su posición al hacer scroll en la página hasta esa posición.

Si usas el valor eager le dirás al navegador que quieres mostrar el recurso de inmediato, aunque esté por debajo de la parte visible actualmente.

Por resumir, los valores del atributo loading son estos 3:

• auto: Comportamiento de lazy loading por defecto del navegador, que es lo mismo que no incluir el atributo.
• lazy: Carga aplazada del recurso hasta que se llegue a una distancia calculada desde el viewport.
• eager: Carga inmediatamente el recurso, da igual dónde esté situado en la página. Es como si no hubiese lazy loading.

¿Funciona también con las imágenes y vídeos de carruseles y similares?

Pues no, porque como está relacionada con el punto visible calculado, si el carrusel está antes del scroll el navegador cargará todas las imágenes en el código hasta ese punto, da igual si están detrás de un carrusel o no. Ahí no te ahorras nada.

Si el carrusel está por debajo del scroll entonces sí, pero cargará en su punto todas las imágenes/vídeos del carrusel cuando se llegue a él.

Compatibilidad de navegadores

Si ya tienes actualizado Chrome a la versión 76 o superior no tienes que hacer nada, la carga diferida nativa está activa por defecto.

En caso contrario, si aún tienes una versión anterior, puedes acceder a los ajustes de Chrome y activarla para imágenes y vídeo, en estas URLs:

chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

En cuanto al resto de navegadores, siento decirte que aún no incorporan esta característica, como puedes comprobar aquí:

¿Es realmente algo bueno esto de la carga diferida, aplazada, lazy o como se llame?

Pues claro, ten en cuenta que cuando alguien llegue a tu web, el navegador no intentará cargar todas las imágenes de la página si el usuario no hace scroll, con lo que obtienes las siguientes ventajas:

• La percepción de carga es mucho más rápida pues el navegador solo descarga las imágenes antes del primer scroll.
• El peso de página que descarga el navegador es mucho menor, porque solo descarga las imágenes y vídeos para mostrarlos a partir del punto en el viewport calculado.
• Los analizadores de velocidad de carga te darán una puntuación mayor, especialmente el de Google.
• Consumirás muchos menos recursos del servidor o la CDN al solo descargar y mostrar lo que el usuario está viendo sin hacer scroll.
• Ahorrarás en costes, tanto si utilizas una CDN que cobre por contenidos como la de Amazon, como de los propios recursos del hosting. Menos bytes descargados igual a menos gasto en alojamiento.

Vamos, que es una joyita para la optimización web.

¿Puedo saber cuánto me ahorraría con esto de la carga diferida?

Claro, puedes hacerlo ahora mismo, con la herramienta de auditoría Lighthouse de Google Chrome, o sino en el analizador de imágenes de imagekit.io.

¿Tengo que hacer algo si ya uso Chrome?

A ver, que esto no es automático, y aunque tú tengas Chrome actualizado tu código actualmente es el que es, y no carga las imágenes y vídeos con los nuevos atributos de loading.

E imagino que no vas a ponerte a cambiar las etiquetas HTML de todas tus imágenes a mano para incluirlos ¿verdad?, además de que sería un error, porque solo ofrecerías carga diferida a tus visitantes que usasen Chrome y lo tuviesen actualizado.

Más abajo vemos cómo añadir fácilmente la carga diferida nativa, o la que sea.

¿Se va a incorporar la carga diferida nativa en WordPress?

Sí, se está debatiendo esta posibilidad, para crear una API específica que permitiese a los desarrolladores de temas y plugins incorporarla fácilmente sin tener que incluir su propio JavaScript, por ejemplo.

¿Has dicho JavaScript?

Sí, porque mientras no todos los navegadores y sus versiones sean compatibles con la carga diferida nativa, a no ser que te de igual desperdiciar la posibilidad de ofrecer carga diferida a todo ese tráfico, lo ideal es que sigas ofreciendo carga diferida aún no siendo nativa, mediante JavaScript, pues sigue siendo mejor ofrecer lazy loading que no hacerlo, da igual el método.

Aún utilizando JavaScript, la carga diferida supone una mejora muy relevante en la optimización y uso adecuado de recursos web, especialmente en dispositivos móviles y no digamos con conexiones lentas.

¡Lo quiero ya! ¿Cómo lo hago?

¡Bien dicho, así, p’alante!

Puedes ofrecer carga diferida de imágenes en WordPress de muchas maneras:

• Puedes aplicar carga diferida a los fondos de Divi.
• El plugin SG Optimizer incorpora la característica de carga diferida.
• El plugin Lazy Load está especializado en la carga diferida.
• Incluso el plugin Jetpack incluye la funcionalidad de carga diferida.
• También puedes aplicar carga diferida a otros elementos, como los comentarios de Disqus.
• Y sino tienes un montón de plugins (especializados o de caché) con los que puedes aplicar la carga diferida.

¡No hombre, me refiero a la carga diferida nativa, el native lazy loading ese!

Ah vale. En este caso no hay tantas opciones.

A la espera de que, o se incluya a WordPress o lo empiecen a incorporar los temas, de momento tenemos un plugin: Native Lazyload.

Además, no tienes que configurar nada, lo instalas, lo activas y listo. Tus imágenes e iframes se cargarán en modo diferido, usando los atributos nativos.

¿Pero no decías que esto de momento solo funciona en Chrome?

No hay que preocuparse, el plugin también ha pensado en ello, bueno, los ingenieros de Google, que son los autores del mismo.

Si el visitante utiliza una versión compatible con native lazy loading el plugin cargará tus imágenes y vídeos con los atributos de la carga diferida nativa, en caso contrario utilizará un JavaScript basado en IntersectionObserver.

Y si el usuario tiene JavaScript desactivado pero el atributo loading es compatible con el navegador, se añadirá una variante noscript del elemento respectivo que también incluya el atributo loading sin más cambios.

¿Y si quiero que una imagen o vídeo se salte la carga diferida?

Si por algún motivo quieres que se cargue automáticamente algún recurso añádele la clase skip-lazy para indicarle al plugin que te gustaría omitir la carga diferida para esta imagen o iframe.

Internet me necesita, no quiero cargar ningún JavaScript

Me parece bien, tus visitas son tuyas.

Si quieres que el plugin aplique siempre la carga diferida nativa, aunque el navegador de tu visitante no sea compatible y no tenga activo JavaScript, añade el siguiente filtro a tu plugin de personalizaciones o al archivo functions.php del tema activo:

add_filter('native_lazyload_fallback_script_enabled', '__return_false')

¿Nada más?

¿Te parece poco? Creo que he sido instructivo a la par de elegante y resultón.

Creo que ya sabrás algo más sobre qué es esto del native lazy loading, carga diferida nativa en español, y maneras de incorporarla ya a tu WordPress ¿qué mas quieres?

Si te han quedado dudas pregunta abajo, en los comentarios 😉

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