Es posible que desees agregar la funcionalidad de lazy load o carga diferida a tu sitio web de WordPress si este depende en gran medida del contenido visual. Esta función de WordPress mejora la velocidad y el rendimiento de la página de un sitio web, por lo que es crucial para tus esfuerzos de optimización de motores de búsqueda.
En esta guía, discutiremos cómo funciona la carga diferida, también conocida como lazy load, junto con sus ventajas y desventajas. Además, descubrirás cómo ponerla en práctica en tu sitio web y cómo optimizarlo para obtener mejores resultados.
Video Tutorial:
Lazy Load – ¿Qué es?
Es una función que permite a un sitio web cargar sólo las imágenes que el usuario puede ver. Al no descargar imágenes fuera de la ventana gráfica, ayuda a mantener una velocidad de carga rápida del sitio web.
¿Cómo funciona Lazy Load en WordPress?
El navegador de un usuario descarga todas las imágenes de la página web de WordPress a la vez. Este proceso puede aumentar significativamente el tiempo de carga de las páginas con muchas imágenes de alta resolución, lo que afecta negativamente el rendimiento del sitio web.
Cuando agregas lazy load a tu sitio web, sólo se descargan las imágenes que son visibles para el usuario. Una imagen de marcador de posición reemplaza el resto de los archivos multimedia y sólo se cargan cuando el usuario se desplaza hacia abajo en tu sitio.
Pro y contras de usar Lazy Load en WordPress
Si todavía estás dudando si usar el lazy load de imágenes en WordPress, aquí están las ventajas y desventajas de esta función:
Pro:
- Disminuye el uso de ancho de banda y los costos de alojamiento.
- Mejora la velocidad del sitio, mejorando la experiencia del usuario.
- Fortalece la experiencia móvil.
- Optimiza la puntuación del pintura de Largest Contentful Paint.
- Amplia los esfuerzos de optimización de motores de búsqueda al mejorar el ranking de búsqueda de tu sitio.
Contras:
- Puede ocasionar buffering del contenido, aumentando la velocidad de carga.
- Reduce la velocidad de desplazamiento.
Cómo agregar Lazy Load en WordPress – 3 métodos
Hay tres maneras de implementar lazy load en tu sitio web de WordPress. Te sugerimos que elijas la que mejor se adapte a tus circunstancias.
1. Actualizar a la versión de WordPress 5.4 o superior
Las imágenes de carga diferida están incluidas por defecto en las versiones de WordPress 5.4 y posteriores. La carga diferida se habilitará automáticamente si actualizas WordPress a la versión más reciente.
Aunque es el método más simple, no puedes configurar las imágenes de carga diferida. Como resultado, tu sitio web puede usar la función en exceso, lo que provoca los contras antes mencionados.
El hecho de que la función lazy load sea diferente en cada versión de WordPress es otro factor a tener en cuenta. WordPress ha publicado recientemente mejoras en la versión 5.9 de WordPress para resolver los problemas con las bajas calificaciones de Large Contentful Paint en las versiones anteriores.
Esto significa que los sitios web que usan WordPress en versiones anteriores no obtienen los mismos beneficios que los sitios web que usan WordPress 5.9.
2. Utiliza el navegador para activar el Lazy Load nativo
Los navegadores más populares, como Chrome, Firefox y Opera, admiten el carga lenta de imágenes de forma nativa. Para que se active automáticamente, simplemente agrega el atributo loading <img loading=»lazy»> a las imágenes y videos que hayas seleccionado.
El atributo loading de WordPress nativo acepta tres valores:
- Auto – activa lazy load 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í hay un ejemplo de cómo se puede usar:
<img src="mi-imagen.png" loading="lazy" alt="alt-text" width="512″ height="512″>Este método es ideal para el envío lento de imágenes específicas, ya que le da a cada imagen una función de envío que determina su tiempo de aparición en la ventana gráfica. Sin embargo, el lazy load de imágenes individuales puede llevar tiempo, especialmente si tu sitio web tiene muchos archivos multimedia.
3. Utilizar un plugin de Lazy Load
El segundo método puede no funcionar siempre porque no todos los navegadores admiten lazy load de imágenes y videos. Instalar un plugin de lazy load para WordPress puede resolver este problema en este caso. Este método te permite tener más control sobre las imágenes que se cargan lentamente sin programar o escribir código.
Puedes elegir entre los siguientes plugins de WordPress para lazy load y acceder a ellos a través del directorio de plugins de WordPress:
Image Optimization by Optimole
Image Optimization by Optimole admite todo tipo de imágenes, incluso AVIF, lo que lo convierte en una gran ventaja. Este plugin gratuito de lazy load permite optimizar las imágenes de WordPress y adaptarlas a los dispositivos de los visitantes, brindando una experiencia de usuario excelente.
Optimole le permite reducir la calidad de la imagen cuando encuentra una red más lenta. Guardar las imágenes en la nube de Optimole también ahorra espacio de almacenamiento.
El plugin gratuito permite optimizar las imágenes hasta 5.000 visitas mensuales. El plan Pro también te permite cargar imágenes para 25.000 visitantes activos mensuales y más. Ambos planes proporcionan imágenes a través de la CDN de AWS Cloudfront.
Smush
Smush es un plugin de optimización de imágenes popular que soporta lazy load. Es compatible con otros plugins, constructores de páginas y temas más populares de las bibliotecas multimedia. Además, te permite aplicar y guardar configuraciones del plugin en un par de clics.
La detección de tamaños de imágenes incorrectos, la compatibilidad con sitios múltiples y las herramientas de compresión de imágenes son otras funciones útiles. De manera similar, la actualización a Smush Pro te permite acceder n otros plugins de WPMU Pro, hacer copias de seguridad de las imágenes originales y optimizar imágenes grandes sin restricciones de tamaño. Los precios comienzan en US$5 al mes.
a3 Lazy Load
A3 Lazy Load es un plugin gratuito de lazy load enfocado en dispositivos móviles. Es completamente compatible con WordPress 5.9 y superior, y con varias herramientas de tecnología populares, incluidos los formatos WebP y AMP.
A3 Lazy Load no solo ofrece las funciones de carga diferida de imágenes básicas, sino que también permite el lazy load de videos, incluidos videos incrustados en páginas, entradas, tipos de entradas personalizados y widgets. Los efectos de carga lenta y la opción de cargar script desde la cabecera o el pie de página también están disponibles.
La compatibilidad con múltiples sitios, la compatibilidad con imágenes WebP y la carga diferida de iframes son otras características notables. Esta última se aplica a iframes que el núcleo de WordPress no carga, como Google Maps y los medios incrustados.
Recomendaciones sobre lazy load de WordPress
Utilizar el lazy load correctamente es crucial para maximizar su uso. Aquí hay algunos consejos para utilizar lazy load en tu sitio de WordPress:
- No lo utilices en las imágenes que aparecen al comienzo de tu sitio: Usar este herramienta no tiene ningún beneficio porque las imágenes en la parte superior de la página se ven mientras se cargan.
- Selecciona los marcadores de posición apropiados. Utiliza un color sólido y dominante o una imagen de baja calidad para marcar la posición de tus imágenes.
- Añade un tiempo de espera para la carga de las imágenes. De esta manera, se elimina la espera y las imágenes están listas justo antes de entrar en la ventana gráfica de visitantes.
- Las dimensiones de los contenedores de imágenes se deben definir. Esto ayudará a evitar cambios repentinos en el diseño y hará que tu página web se vea ordenada al cargar.
- Implementa la carga lenta sólo en páginas extensas. Las páginas extensas son aquellas que tienen más de cinco imágenes debajo del pliegue y requieren más de dos desplazamientos o scrolls para llegar al final.
Conclusiones
El lazy load de imágenes en WordPress mejora la experiencia de navegación. Esta función reduce el uso de ancho de banda y mejora la velocidad del sitio. En general, mejora tus esfuerzos de optimización de motores de búsqueda al obtener un mejor posicionamiento en las búsquedas.
Esperamos que esta guía te haya ayudado a comprender cómo utilizar la función de lazy load en los sitios de WordPress al máximo. Para mejorar aún más el rendimiento de tu sitio web, asegúrate de utilizar un alojamiento de WordPress de alta calidad.
