Lazy loading de imágenes nativo en WordPress
Recientemente, Google y otros fabricantes de navegadores han comunicado una importante novedad que impactará en el uso de Internet a nivel global. Se trata de la incorporación del soporte al lazy loading de imágenes, que podremos configurar de manera sencilla por medio de un atributo en la etiqueta . Esta noticia causará de manera generalizada una sensible mejora en el rendimiento de los sitios web y la experiencia de usuario. WordPress no se quedará atrás y en un futuro próximo tiene planes de activarla de manera predeterminada en todos los sitios web basados en el CMS.
¿Qué es el ‘lazy loading’ de imágenes?
Pero antes, ¿qué es esto del ‘lazy loading’ o carga perezosa de imágenes? Conocido también como ‘on-demand loading‘ se trata, básicamente, de una importante mejora en términos de rendimiento y experiencia de usuario ya que permite diferir la carga de las imágenes de un sitio web hasta el momento en el que realmente se van a visualizar.
Cuando entramos en una página web se cargan automáticamente todas las imágenes que incluye su código HTML. Sin embargo, muchas imágenes se muestran en zonas inferiores de la página, en lugares donde los usuarios quizás nunca llegarán. Antiguamente, para poder optimizar un sitio web, los desarrolladores podían instalar una serie de plugins Javascript que conseguían que solamente se descargasen aquellas imágenes que el usuario llegaba a ver, básicamente porque hacía scroll hasta ellas.
Ahora Chrome, Firefox y otros navegadores han habilitado un nuevo atributo en la etiqueta
llamado «loading». Este atributo puede tener dos valores:
- Eager: Indica que la imagen se cargará normalmente, como hasta ahora, cuando carga el resto del contenido de la página.
- Lazy: Indica que la imagen solamente se cargará cuando el usuario haga scroll hasta una posición de la página que permita verla.
Este comportamiento se realizará, como decimos, sin necesidad de ningún tipo de plugin o programación Javascript, lo que facilitará mucho la labor a todos los desarrolladores. Puedes encontrar una explicación más detallada en la página de MDN.
Soporte nativo en WordPress para ‘lazy loading‘
El soporte en WordPress para realizar lazy loading de imágenes se puede alcanzar hasta ahora por medio de plugins. Uno de los más famosos ha sido publicado por el propio Google con el nombre de «Native Lazyload«.
La novedad es que, en un breve espacio de tiempo, WordPress activará el lazy load de imágenes de manera predeterminada. De momento, si lo quieres activar, el propio equipo de WordPress ha publicado un plugin llamado Lazy Loading Feature Plugin, que aplica el mencionado soporte antes de su definitiva liberación como funcionalidad nativa.
Cuando esté disponible de manera predeterminada esta mejora en WordPress no tendrás que hacer nada para activar esta optimización. Es decir, las imágenes cargarán con lazy loading siempre.
Por qué es tan importante el soporte nativo de WordPress al atributo ‘loading’
El soporte de WordPress a esta nueva característica de los navegadores es muy importante porque reducirá el tiempo de carga de millones de sitios web en todo el mundo. Obviamente, es una mejora sensible para miles de millones de usuarios, que podrán experimentar una velocidad mayor en la navegación.
Sin embargo, si tenemos en cuenta que más de un tercio de los sitios web de toda Internet están publicados bajo WordPress, podemos hacernos una idea de la inmensa cantidad de ancho de banda que se va a ahorrar a nivel mundial en la Red.
Por estos motivos, se espera que esta nueva situación impactará de manera significativa en el tráfico y la disminución del consumo de datos en todo el mundo. Algo que debemos de agradecer a los fabricantes de navegadores y, por supuesto, a WordPress.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.