Lazy load en WordPress: cómo aplicarlo en tu web

Si tu sitio web de WordPress tiene muchas imágenes que cargar, entonces lo mejor es aprovechar la función de carga perezosa. La función de carga perezosa de WordPress puede ayudar a aumentar la velocidad de tu página web en tu sitio web, lo cual es importante para tus esfuerzos de SEO.

En este artículo aprenderás cómo se realiza el cargado diferido o el cargado perezoso y cuáles son sus ventajas y desventajas. También conocerás cómo aplicarlo en tu sitio web y cómo sacar el mejor provecho de él.

¿Qué es Lazy Load?

Es una de las características por las cuales el sitio web va a mostrar imágenes que pueden ser vistas por el usuario. Ayuda a acelerar el tiempo de carga del sitio web ya que no carga las demás imágenes fuera del marco gráfico.

¿Cómo funciona Lazy Load en WordPress?

Una vez que un usuario va a visitar un sitio de WordPress, su computadora descargaría todas las imágenes disponibles en la página al mismo tiempo. Si hay muchas imágenes de alta resolución en la página, entonces esto podría realmente ralentizar el tiempo de carga de tu sitio web.

Una vez que hayas agregado la función de carga perezosa en tu sitio web, solo se descargarán las imágenes que aparezcan en la pantalla del usuario. El resto de los archivos multimedia serán sustituidos con una imagen en blanco hasta que el usuario descienda la página.

Ventajas y desventajas de Lazy load en WordPress

Si aún tienes dudas si deberías considerar la carga perezosa de imágenes en tu sitio de WordPress, aquí están los beneficios y los inconvenientes de la misma.

Pros:

• Disminuye el consumo de ancho de banda, reduciendo los costos de alojamiento.
• Mejora la velocidad del sitio, haciendo que la experiencia de navegación de los visitantes sea superior.
• Potencia la experiencia móvil.
• Optimiza la puntuación del Largest Contentful Paint
• Mejora los esfuerzos de SEO, incrementando el ranking de búsqueda de tu sitio.

Contras:

• Genera 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

El cargamento perezoso se puede lograr a través de tres métodos diferentes en tu sitio web de WordPress. Te recomendamos que elijas el método que se adapte a tus necesidades.

1. Actualizar a WordPress 5.4 o superior

WordPress 5.4 y versiones posteriores vienen con la carga diferida de imágenes como una característica incorporada. Con una versión actualizada de WordPress tendrás la carga diferida de imágenes habilitada automáticamente.

Si bien esta es la técnica más fácil de implementar, no te permite especificar las imágenes que necesitan cargarse más adelante. Esto significaría que terminarías usando demasiado esta función en tu sitio web.

Otro punto a mencionar es la diferencia entre la función de carga perezosa tanto en las dos versiones de WordPress. Recientemente WordPress ha anunciado que la versión 5.9 de WordPress tiene mejoras que van a solucionar los problemas de malos puntajes de Gran Pintura de Contenido en versiones anteriores de WordPress.

Esto indica que los sitios web que están utilizando versiones obsoletas de WordPress no disfrutan del mismo nivel de 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 WordPress, la carga inteligente natural permite tres tipos de valores para la etiqueta carga:

• 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″>

Es una técnica eficiente para cargar las imágenes de manera perezosa y darle a cada una de ellas el atributo de «carga» para controlar cuándo aparecerá cada imagen en la ventana gráfica. Pero la carga diferida de cada imagen podría ser algo lenta para los sitios web con varios archivos multimedia.

3. Instalar un plugin

Como no todos los navegadores web soportan el proceso de diferir la carga de imágenes y videos, entonces la segunda técnica podría no ser efectiva. Para resolver este problema puedes optar por la instalación de un complemento de carga perezosa para WordPress. Esta técnica te dará más control sobre la carga de las imágenes sin necesidad de programación.

A continuación se presentan algunos de los mejores plugins de WordPress que se pueden usar para el cargado perezoso y están disponibles en el repositorio de plugins de WordPress.

Una de las mejores características de Optimole es que admite todos los tipos de imágenes, incluso AVIF. Es un plugin de carga perezosa freemium que te ayuda a optimizar tus imágenes para WordPress y escalarlas de acuerdo a los dispositivos de tus visitantes.

Si reconoce la velocidad lenta de tu conexión, Optimole te permite reducir la calidad de la imagen. Además, puedes ahorrar espacio de almacenamiento guardando las imágenes en la nube de Optimole.

Este complemento gratuito puede ayudar a optimizar imágenes para hasta 5.000 visitas por mes. Además, usando el plan Pro podrás disfrutar de la carga diferida de imágenes para 25.000 visitantes activos mensuales y más. Las imágenes en ambos planes se entregan a través de la CDN de AWS Cloudfront.

Smush es un plugin de optimización de imágenes que tiene la función de carga perezosa. Es compatible con los temas más populares, constructores de páginas y los plugins de bibliotecas multimedia. Además permite el guardado de las configuraciones del plugin en combinaciones ilimitadas con solo unos pocos clics.

Algunas otras funciones útiles que ofrece este plugin incluyen la capacidad de detectar el tamaño incorrecto de las imágenes, el soporte para diferentes sitios y diferentes compresores de imágenes. En caso de elegir la actualización a Smush Pro se puede optimizar las imágenes grandes, se puede conservar una copia de la imagen original, se puede utilizar otros plugins de WPMU Pro. El costo comienza desde $5 por mes.

el plugin a3 Lazy Load es un plugin gratuito de carga perezosa que funciona en dispositivos móviles. Es totalmente compatible con WordPress 5.9 y con varias herramientas tecnológicas como WebP y los plugins AMP.

Además de la carga diferida de imágenes, a3 Lazy Load permite posponer la carga de videos, incluso aquellos incrustados en publicaciones, publicaciones personalizadas y widgets. Los efectos de la carga diferida, así como la capacidad de posponer la carga de los scripts tanto en el encabezado como en el pie de página, se pueden lograr usando el plugin.

Otras características que vale la pena mencionar son la compatibilidad con múltiples sitios, el soporte de imágenes WebP y la carga diferida de los iframes que se aplica a los iframes que no son cargados por WordPress mismo como son los mapas de Google y los incrustados.

Consejos para la carga diferida de WordPress

Sin embargo, el truco para sacar el máximo provecho al cargado perezoso está en aplicarlo de la manera correcta. A continuación se presentan algunas sugerencias para que el cargado perezoso en WordPress funcione:

• No apliques carga diferida a las imágenes que están por encima del pliegue. Dado que las imágenes situadas en la parte superior de la página se ven al cargar, el lazy load no aporta ninguna ventaja.
• Opta por marcadores de posición apropiados. Sugerimos emplear un color sólido predominante o una imagen de baja calidad como marcador de posición para tus imágenes.
• Establece un tiempo de espera para la carga de las imágenes. Así, tus imágenes estarán listas justo antes de que entren en la ventana gráfica de los visitantes, suprimiendo cualquier espera.
• Determina las dimensiones de los contenedores de imágenes. Esto contribuirá a evitar cambios bruscos en el diseño, logrando que tu página web se vea ordenada al cargarse.
• Aplica lazy load únicamente en las páginas extensas. Las páginas extensas son las que necesitan más de dos desplazamientos o scrolls para alcanzar el final y contienen más de cinco imágenes debajo del pliegue.

Conclusión

El cargue diferido de imágenes en WordPress te ayuda a brindar a tus visitantes una gran experiencia de navegación. Además de acelerar tu sitio web, esta función reducirá el uso de tu ancho de banda. En general, te ayudará con tus esfuerzos de SEO y te permitirá obtener un mejor posicionamiento en los motores de búsqueda.

Esperamos que a través de esta publicación puedas entender cómo aprovechar al máximo la opción de carga perezosa disponible en los sitios web de WordPress. Intenta tener el mejor alojamiento de WordPress para una eficiencia óptima de tu sitio web. ¡Mucha suerte!

Descubre otras técnicas avanzadas de WordPress

El contenido de todos los tutoriales que aparecen en este sitio web se ajusta a los estándares editoriales y valores de SevenSerp.

Diego es un especialista en comunicación social y publicidad digital que nunca deja de aprender más acerca del marketing digital y el SEO. Las cosas más interesantes para Diego son los idiomas, las series de televisión, la literatura y los cursos en línea además del deporte. Esta es la página de LinkedIn de Diego.

Preguntas Frecuentes