El lazy load carga imágenes, iframes y vídeos únicamente cuando están a punto de aparecer en pantalla, lo que mejora la velocidad, la experiencia del usuario y, de manera indirecta, el SEO. No siempre resulta conveniente aplicarlo: a través de plugins o scripts JS puede ocasionar problemas de compatibilidad o imágenes que no se cargan. La decisión depende del tipo y del diseño de cada web.
Hoy en día, todos somos conscientes de la relevancia de la velocidad de carga en una web, ya sea para optimizar la propia experiencia del usuario, o incluso por cuestiones de posicionamiento/SEO.
Para lograr una buena velocidad de carga, hay multitud de ajustes que se pueden llevar a cabo en la aplicación, desde la implementación de todo tipo de cachés, la configuración de un CDN o la optimización de imágenes; sin embargo, al final, cada web es un mundo y las configuraciones a realizar dependerán de la configuración, el diseño y las compatibilidades que permita esa web en concreto.
Por ejemplo, si hablamos de sitios web que cuentan con una gran cantidad de contenidos visuales (imágenes, vídeos, etc.), o webs con artículos muy extensos, una técnica que podemos aplicar sería el «Lazy Load» o carga diferida. Esta configuración hace que ciertos contenidos (normalmente imágenes) no se carguen de forma simultánea cuando se accede a la web, sino que se cargarán cuando la página lo necesite, es decir, cuando el usuario vaya haciendo scroll y llegue al elemento en cuestión.
En este post, te explicaremos qué es exactamente el Lazy Load, a qué se puede aplicar exactamente, y cómo puede implementarse en WordPress, que es el CMS en el que estamos especializados.
¿Qué es y cómo funciona Lazy Load?
Lazy Load es una técnica de optimización que permite cargar imágenes y otros recursos multimedia cuando están a punto de ser visualizados por el usuario, en lugar de cargarlos todos a la vez cuando se accede a la página; con las siguientes imágenes, seguro que te queda más claro:
Con esto, lo que lograremos es mejorar el rendimiento del sitio web, reducir el tiempo de carga e incluso optimizar el uso del ancho de banda, lo que suele repercutir de forma positiva en la experiencia de usuario.
El funcionamiento de esta técnica de optimización es sencillo: cuando un usuario accede a la página web, se descargan únicamente los medios que pueden visualizarse en el área completa de la pantalla, y en cuanto al resto de imágenes o elementos multimedia, se reemplazan por una imagen por defecto (de mucho menor tamaño y resolución).
Cuando se va haciendo scroll, se seguirán cargando únicamente los elementos que sean visibles en la pantalla, lo que permite que se ahorre ancho de banda con cada visita.
¿Cómo funciona el Lazy Load en WordPress?
A lo largo de los años, la implementación de esta configuración en WordPress ha ido cambiando; al principio únicamente podías implementar Lazy Load mediante la carga de script adicional (JavaScript), lo que realmente puede ser una técnica poco recomendable si lo que queremos es optimizar una página web (básicamente, estamos añadiendo más código para que se cargue en el navegador del usuario final), aunque en determinados casos concretos, seguramente daba más de lo que quitaba.
Posteriormente, a partir de la versión 5.4 de WordPress, decidieron implementar de forma nativa la carga diferida de todas las imágenes e iframes en el propio núcleo del CMS, es decir, no es necesario realizar ninguna acción de tu lado para activarlo, ya que WordPress añadirá automáticamente el atributo ‘loading=»lazy»‘ a todas las imágenes e iframes que tengas en sitio web.
El problema de esto es que tampoco puedes escoger qué elementos quieres que utilicen esta técnica y cuáles no; hay que tener en cuenta que no siempre nos va a interesar que las imágenes tengan este comportamiento, por lo que, si te interesa una configuración más específica, necesitarás instalar un plugin que te lo permita.
Actualmente, algunos navegadores como Google Chrome incluyen Lazy Load de forma nativa, por lo que la opción más recomendable es buscar un plugin en WordPress que te permita activar dicha funcionalidad en el navegador, ya que, de esta forma, conseguiremos todas las ventajas de Lazy Load, sin depender de la ejecución de un script adicional de JS.
Ventajas y desventajas de Lazy Load
Si tuviésemos que indicar las ventajas de utilizar Lazy Load en tu sitio web, serían las siguientes:
- Puede mejorar los tiempos de carga, ya que se carga lo estrictamente necesario al acceder al sitio web, por lo que el peso de la página se reduce considerablemente.
- Se reduce el uso de recursos del servidor, ya que se reducen las peticiones que se realizan al mismo.
- Se consigue una mejor experiencia de usuario, ya que estos tendrán una experiencia más fluida, especialmente en dispositivos móviles.
- Podría ayudar a mejorar el SEO, ya que Google siempre beneficia a las páginas web con tiempos de carga rápidos.
Por otro lado, y como indicamos anteriormente, no siempre es recomendable configurar Lazy Load en WordPress. Esto dependerá del tipo de web que tengas. A continuación, te indicaremos una serie de desventajas que hay que tener en cuenta si decides implementar esta técnica WPO en tu sitio web:
- La funcionalidad nativa de WordPress no genera problemas, no obstante, si decidimos implementar Lazy Load a partir de un plugin o mediante la librería de JS, puede generar bastantes problemas de compatibilidad y visualización en la web.
- En ciertas ocasiones, las imágenes no llegan a cargar nunca de forma correcta.
Actualmente, existen infinidad de elementos que te permiten implementar Lazy Load en WordPress, ya que es una funcionalidad común en los plugins de caché y WPO, por lo que a continuación te indicaremos algunos plugins que te permiten añadir dicha configuración.
Smush Image Optimization
Antes de nada, me gustaría comentarte que también existen bastantes temas que ya disponen de una configuración de Lazy Load, no obstante, no suelen permitir modificar opciones o añadir exclusiones para dicha configuración, aunque podría ser suficiente para determinadas webs.
Dicho esto, el primer plugin que vamos a nombrar es «Smush Image Optimization», que es un plugin bastante conocido para la optimización de imágenes y que permite realizar algunas configuraciones relacionadas con Lazy Load. Este plugin es gratuito (tiene también una versión de pago) y puedes descargarlo directamente del repositorio de WordPress: https://es.wordpress.org/plugins/wp-smushit/
Una vez instales el plugin, se iniciará un asistente de configuración que, entre otras cosas, te permitirá activar directamente Lazy Load, no obstante, una vez habilitado, puedes revisar más configuraciones relacionadas con el mismo desde el apartado «Smush > Carga diferida».
Entre otras cosas, podrás activar la carga diferida nativa de WordPress, modificar en dónde se cargarán los scripts (por defecto en el footer), excluir la carga diferida en algún tipo de contenidos en concreto (ya sea páginas, entradas, categorías, etc.) y modificar tipo de medio en el que quieres que esté habilitada, por lo que es un plugin bastante completo y que te permite solucionar ciertos problemas de compatibilidad que pueda ocasionar esta configuración en determinadas páginas o contenidos.
LazyLoad Plugin
Otro plugin que puedes usar para configurar Lazy Load sería «LazyLoad Plugin», el cual ha sido creado por los desarrolladores de WP Rocket y, igual que el anterior, se puede descargar sin coste desde el repositorio de WordPress: https://es.wordpress.org/plugins/rocket-lazy-load/
Si has usado WP Rocket, ya sabrás que, en sus ajustes, te permite activar Lazy Load para imágenes, iframes y vídeos, y los creadores de este plugin decidieron desarrollar un plugin independiente que permitiera configurar esas opciones de manera separada.
Poco hay que comentar sobre este plugin: lo único que te permite es activar las 3 mismas opciones que la versión completa de WP Rocket, así que podrías combinarlo con otros plugins de caché si estos te ofrecen mejores resultados.
Hay que tener en cuenta que si queremos activar el Lazy Load nativo de WP Rocket o en este plugin (LazyLoad Plugin) tendríamos que recurrir a una extensión externa llamada Chrome Native LazyLoad, la cual deberías poder descargar desde este enlace: https://docs.wp-rocket.me/article/1292-chrome-native-lazyload
A3 Lazy Load es el plugin más completo de todos los que te indicaremos en este post, ya que es un plugin creado específicamente para implementar Lazy Load en WordPress. Puedes descargarlo sin coste, como todos los demás, desde el repositorio de WordPress: https://es.wordpress.org/plugins/a3-lazy-load/.
Este plugin, además de contar con las opciones habituales de carga diferida de imágenes, también te va a permitir la carga diferida de vídeos, entradas, widgets, etc. Además, también te permitirá excluir imágenes o vídeos específicos, URLs, tipos de página, y configurar la carga diferida en iframes.
Por otro lado, también cuenta con un par de opciones que te permiten desactivar la carga diferida en WPTouch y MobilePress por motivos de compatibilidad en dispositivos móviles.
Si quieres ver cómo configurar este plugin en WordPress, tienes un vídeo en el canal de Álvaro que seguramente te interese revisar:
Algunas opciones adicionales
Como te indicamos anteriormente, existen muchísimas posibilidades para configurar Lazy Load, y según la configuración que queramos aplicar, tendremos que decantarnos por una u otra.
Si queremos una opción lo más sencilla posible para implementar Lazy Load, podemos utilizar el plugin «Lazy Load for Images» (https://es.wordpress.org/plugins/lazy-load-for-images/), que tiene la ventaja de que únicamente tenemos que habilitarlo para que sea funcional, además de que el JS que utiliza pesa 2 kB, por lo que puede llegar a ser bastante eficiente, aun teniendo en cuenta que el navegador del visitante no tenga disponible el modo nativo de Lazy Load.
Otro plugin interesante que te permite configurar el Lazy Load en vídeos sería «Lazy Load for Videos» (https://es.wordpress.org/plugins/lazy-load-for-videos/), el cual te permite «optimizar» los vídeos de YouTube y Vimeo que tengas implementados en la web, por lo que puede ser una buena opción si nuestra web carga multitud de contenidos multimedia de este tipo.
Por último, si no quieres instalar ningún plugin adicional de este tipo, podrías revisar si alguno de los elementos que tienes instalados en la web (por ejemplo, el tema o el plugin de caché), dispone de esta opción, ya que actualmente, es una opción estándar que disponen casi todos los plugins de optimización.
Un ejemplo de esto, es el propio WP Rocket o LiteSpeed Caché, los cuales te permiten habilitar el Lazy Load directamente desde su configuración, y en el caso de LiteSpeed Caché, te permite desactivar directamente la carga diferida por defecto de WordPress al habilitar la opción de Retrasar la carga de imágenes, además de realizar algunas configuraciones adicionales o incluso retrasar la carga de iframes.
Preguntas Frecuentes
¿Qué puedo hacer para que mi web de WordPress cargue más rápido?
Activar lazy load es una de las medidas más rentables, pero no la única. Sirve para que las imágenes y vídeos fuera de pantalla no se descarguen hasta que el usuario se acerca a ellas. Aun así, conviene comprimir las imágenes, usar un buen hosting y limitar plugins pesados. El lazy load ayuda, pero no compensa una base mal optimizada.
¿Por qué mi WordPress va lento aunque tenga lazy load activado?
Porque el lazy load solo retrasa imágenes y vídeos, no el resto de la carga. Si el hosting es lento, hay muchos plugins o el tema carga scripts innecesarios, la web seguirá pesada. Mide con herramientas como PageSpeed Insights y revisa el tiempo de respuesta del servidor. A veces el cuello de botella está en la base de datos o en el TTFB.
¿Qué imágenes debo excluir del lazy load para no romper la web?
Las que están en la primera pantalla y las que usa el navegador como referencia visual. Si aplicas lazy load a la imagen principal o al logo, el navegador puede tardar en pintarlos y empeora la experiencia. Excluye también las imágenes dentro de carruseles que deben verse al instante. La mayoría de plugins permiten añadir esas excepciones por clase o URL.
