Lazy Load en WordPress: Cómo implementarlo en tu sitio web

Si tu sitio web de WordPress depende en gran medida del contenido visual, es posible que quieras añadirle la funcionalidad lazy load o carga diferida. Esta función de WordPress ayuda a mejorar la velocidad y el rendimiento de la página de un sitio web, por lo que es esencial para tus esfuerzos de SEO.

En este artículo exploraremos cómo funciona la carga diferida o lazy load junto con sus pros y sus contras. También aprenderás cómo implementarla en tu sitio web y las formas de optimizar su uso para obtener mejores resultados.

¿Cómo funciona Lazy Load en WordPress?

Cuando un usuario visita un sitio web de WordPress, su navegador descarga todas las imágenes de la página web a la vez. Para las páginas con muchas imágenes de alta resolución, este proceso puede aumentar el tiempo de carga de forma significativa, conformando un elemento que perjudica el rendimiento de tu sitio web.

Agregar lazy load a tu sitio web hace que solo se descarguen las imágenes que son visibles en la pantalla del usuario. El resto de los archivos multimedia se sustituyen por una imagen de marcador de posición y solo se cargan cuando el usuario se desplaza hacia abajo en la página web.

Ventajas y desventajas de Lazy load en WordPress

Si todavía te estás preguntando si deberías implementar la carga diferida de imágenes en WordPress, aquí tienes los pros y los contras de esta función:

Pros:

• Reduce el uso del ancho de banda, disminuyendo los costos de alojamiento.
• Mejora la velocidad del sitio, haciendo que la experiencia de navegación de los visitantes sea mejor.
• Potencializa la experiencia móvil.
• Optimiza la puntuación del Largest Contentful Paint
• Mejora los esfuerzos de SEO, aumentando el ranking de búsqueda de tu sitio.

Contras:

• Provoca un buffering del contenido, perjudicando la velocidad de carga.
• Ralentiza el desplazamiento rápido.

Cómo añadir Lazy Loading de WordPress a tu sitio web: 3 métodos

Hay tres formas de implementar lazy loading en tu sitio web de WordPress. Te recomendamos que elijas la que mejor se adapte a tu situación.

1. Actualizar a WordPress 5.4 o superior

Las versiones de WordPress 5.4 y superiores incluyen imágenes de carga diferida por defecto. Actualizar tu WordPress a la versión más reciente habilitará automáticamente la carga diferida.

A pesar de ser el método más sencillo, no te permite configurar cuáles imágenes deben ser de carga diferida. En consecuencia, tu sitio web puede utilizar en exceso la función, manifestando los contras antes mencionados.

Otro factor a tener en cuenta es la diferente naturaleza de la función lazy load en cada versión de WordPress. Recientemente, WordPress ha publicado que la versión 5.9 de WordPress implementa mejoras para resolver los problemas con las pobres puntuaciones de Large Contentful Paint de las versiones más antiguas.

Esto significa que los sitios web que funcionan con versiones anteriores de WordPress no obtienen las mismas ventajas que los que usan WordPress 5.9.

2. Activa Lazy Loading nativo a través del navegador

Los navegadores más populares, como Chrome, Firefox y Opera, admiten lazy loading nativo de imágenes. Solo tienes que añadir el atributo loading <img loading=”lazy”> a las imágenes y vídeos seleccionados para activarlo automáticamente.

En lazy loading nativo de WordPress, el atributo loading admite estos tres valores:

• Auto – activa lazy loading por defecto, que es lo mismo que no incluir un atributo loading.
• Lazy – distribuye la carga de los recursos hasta que cada uno alcanza la distancia especificada de la ventana gráfica.
• Eager – carga todos los recursos en cuanto se carga la página, independientemente de su ubicación.

Aquí tienes un ejemplo de cómo utilizarlo:

<img src="nombre-imagen.png" loading="perezoso" alt="atributo alt" width="200″ height="200″>

Este método es ideal para el lazy loading de ciertas imágenes, dando a cada una un atributo loading que dicta su tiempo de aparición en la ventana gráfica. Sin embargo, la carga diferida de imágenes individuales puede llevar cierto tiempo, especialmente si tu sitio web tiene muchos archivos multimedia.

3. Instalar un plugin

Como no todos los navegadores admiten la carga diferida de imágenes y vídeos, el segundo método puede no funcionar siempre. En este caso, puedes mitigar este problema instalando un plugin de lazy load para WordPress. Este método te da más control sobre las imágenes que se cargan lentamente sin necesidad de programar o escribir código.

Los siguientes son los mejores plugins de WordPress para lazy load entre los que puedes elegir y que son accesibles a través del directorio de plugins de WordPress.

Image Optimization & Lazy Load by Optimole

Uno de los puntos fuertes de Optimole es que admite todo tipo de imágenes, incluidas las AVIF. Este plugin freemium de lazy load permite optimizar las imágenes de WordPress y escalarlas para adaptarlas a los dispositivos de los visitantes, garantizando una experiencia de usuario óptima.

Cuando detecta una red más lenta, Optimole te da la opción de disminuir la calidad de la imagen. Además, ahorra espacio de almacenamiento guardando las imágenes en la nube de Optimole.

El plugin gratuito te permite optimizar las imágenes para un máximo de 5.000 visitas mensuales. También adquirir el plan Pro te permite la carga diferida de imágenes para 25.000 visitantes activos mensuales y más. Las imágenes de ambos planes se sirven a través de la CDN de AWS Cloudfront.

Smush

Smush es un popular plugin de optimización de imágenes que soporta lazy load. Es compatible con los temas, constructores de páginas y plugins de bibliotecas multimedia más populares. Además, te permite guardar los ajustes del plugin en configuraciones ilimitadas y aplicarlas en unos pocos clics.

Otras funciones útiles son la detección de tamaños de imagen incorrectos, la compatibilidad con sitios múltiples y las herramientas de compresión de imágenes. De igual forma, la actualización a Smush Pro te permite optimizar imágenes grandes sin limitaciones de tamaño, hacer copias de seguridad de las imágenes originales y acceder a otros plugins de WPMU Pro. Los precios son a partir de 5 dólares al mes.

a3 Lazy Load

a3 Lazy Load es un plugin gratuito de lazy laod orientado a móviles. Es totalmente compatible con WordPress 5.9 y con varias herramientas de tecnología populares, como los plugins WebP y AMP.

Además de ofrecer las funciones básicas de la carga diferida de imágenes, a3 Lazy Load también te permite la carga diferida de vídeos, incluidos los vídeos incrustados en páginas, entradas, tipos de entradas personalizadas y widgets. También están disponibles los efectos de lazy load y la opción de cargar scripts desde la cabecera o el pie de página.

Otras características destacables son la compatibilidad con multisitios, la compatibilidad con imágenes WebP y la cargadiferida de iframes, que se aplica a los iframes que el núcleo de WordPress no carga, como Google Maps y los medios incrustados.

Consejos para la carga diferida de WordPress

La clave para sacar el máximo partido al lazy load es utilizarlo correctamente. Aquí tienes algunos consejos para realizar lazy load en tu sitio de WordPress:

• No cargues las imágenes por encima del pliegue. Como las imágenes colocadas en la parte superior de la página son visibles al cargar, lazy load no tiene ningún beneficio.
• Elige marcadores de posición adecuados. Te recomendamos que utilices un color sólido y dominante o una imagen de baja calidad como marcador de posición para tus imágenes.
• Añade un tiempo de espera para la carga de las imágenes. De esta forma, tus imágenes estarán listas justo antes de entrar en la ventana gráfica de los visitantes, eliminando cualquier tiempo de espera.
• Define las dimensiones de los contenedores de imágenes. Esto ayudará a evitar cambios repentinos en el diseño, haciendo que tu página web se vea ordenada al cargar.
• Implementa lazy load solo en las páginas extensas. Las páginas extensas son aquellas que requieren más de dos desplazamientos o scrolls para llegar al final y tienen más de cinco imágenes debajo del pliegue.

Conclusión

La carga diferida de imágenes en WordPress te permite ofrecer a los visitantes una mejor experiencia de navegación. Además de mejorar la velocidad del sitio, esta función también reduce el uso de tu ancho de banda. En general, contribuye a tus esfuerzos de SEO para lograr una mejor posicionamiento en las búsquedas.

Esperamos que este artículo te haya ayudado a entender cómo aprovechar al máximo la función de lazy load en los sitios de WordPress. Asegúrate de utilizar un alojamiento de WordPress de alta calidad para mejorar aún más el rendimiento de tu sitio. ¡Buena suerte!