¿Quieres aprender a cargar imágenes de forma diferida en WordPress?
La carga diferida permite que su sitio web solo cargue imágenes cuando un usuario se desplaza hacia abajo a una imagen específica, lo que reduce el tiempo de carga del sitio web y mejora el rendimiento del sitio web.
La mayoría de los sitios populares con muchas imágenes utilizan la carga diferida para aumentar la velocidad y el rendimiento del sitio web.
En este artículo, le mostraremos cómo cargar imágenes de forma diferida en WordPress, paso a paso.
¿Por qué Lazy Load Images en WordPress?
La carga diferida de sus imágenes de WordPress puede acelerar su sitio web y ofrecer una mejor experiencia de usuario.
A nadie le gustan los sitios web lentos. De hecho, un estudio de rendimiento encontró que un solo segundo de retraso en el tiempo de carga de la página genera un 7 % menos de conversiones, un 11 % menos de visitas a la página y una disminución del 16 % en la satisfacción del cliente.
A los motores de búsqueda como Google tampoco les gustan los sitios web de carga lenta. Esta es la razón por la cual los sitios más rápidos ocupan un lugar más alto en los resultados de búsqueda.
Las imágenes tardan más en cargarse en su sitio web en comparación con otros elementos web. Si agrega muchas imágenes a sus artículos, cada imagen aumenta el tiempo de carga de su página.
Una forma de manejar esta situación es usar un servicio CDN, como BunnyCDN. Una CDN permitirá que un usuario descargue imágenes de un servidor web más cercano y reduzca la velocidad de carga del sitio web.
Sin embargo, sus imágenes aún se cargarán y afectarán el tiempo total de carga de la página. Para superar este problema, puede retrasar la carga de imágenes implementando la carga diferida en su sitio web.
¿Cómo funciona la carga diferida para imágenes?
En lugar de cargar todas sus imágenes a la vez, la carga diferida descarga solo las imágenes visibles en la pantalla del usuario. Reemplaza todas las demás imágenes con una imagen de marcador de posición o un espacio en blanco.
A medida que un usuario se desplaza hacia abajo, su sitio web carga imágenes que son visibles en el área de visualización del navegador.
La carga diferida puede ser muy beneficiosa para tu blog de WordPress.
- Reduce el tiempo inicial de carga de la página web, por lo que los usuarios verán su sitio más rápido
- Conserva el ancho de banda al entregar solo imágenes que se ven y puede ahorrar en costos de alojamiento.
El lanzamiento de WordPress 5.5 agregó la carga diferida como característica predeterminada.
Sin embargo, si desea personalizar la carga diferida de sus imágenes y las imágenes de fondo de carga diferida, entonces deberá usar un complemento de WordPress.
Nota: Aunque la carga diferida ayudará a mejorar la velocidad de carga del sitio web, siempre debe optimizar las imágenes para la web antes de cargarlas en WordPress para obtener el máximo rendimiento.
Para obtener más detalles, consulte nuestra guía sobre cómo optimizar imágenes para el rendimiento web sin perder calidad.
Vamos a compartir dos complementos de WordPress diferentes que pueden ayudarlo a configurar fácilmente la carga diferida para imágenes de WordPress. Puede usar los enlaces rápidos a continuación para saltar directamente al método que desea usar.
Método 1. Carga diferida de imágenes en WordPress con WP Rocket
Recomendamos usar el complemento WP Rocket para cargar imágenes de forma diferida en WordPress. Es el mejor complemento de almacenamiento en caché de WordPress en el mercado y le permite activar fácilmente la carga diferida de imágenes.
Aparte de eso, es un complemento muy poderoso que lo ayuda a optimizar la velocidad de su sitio web sin conocer términos técnicos complejos.
Desde el primer momento, todas sus configuraciones de almacenamiento en caché recomendadas por defecto acelerarán en gran medida su sitio web de WordPress.
Para habilitar la carga diferida de imágenes, todo lo que tiene que hacer es marcar algunas casillas. Incluso puede habilitar la carga diferida para videos, lo que mejorará aún más la velocidad de su sitio web.
Para obtener más detalles, consulte nuestra guía sobre cómo instalar y configurar correctamente WP Rocket en WordPress.
Nota: si está utilizando Siteground como su proveedor de alojamiento de WordPress, entonces puede usar el servicio gratuito Optimizador de SiteGround complemento que tiene características similares de carga diferida.
Método 2. Carga diferida de imágenes en WordPress con Optimole
Este método utiliza la libre Optimol enchufar. Es uno de los mejores complementos de compresión de imágenes de WordPress y le permite habilitar fácilmente la carga diferida de imágenes.
Si recibe más de 5000 visitantes al mes, necesitará la versión premium.
Primero, debe instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, vaya a Medios » Optimol y luego debe registrarse para obtener una clave API.
Simplemente haga clic en ‘Registrarse y enviar por correo electrónico la clave API’ y se le enviará por correo electrónico.
Luego, ingrese su clave API y haga clic en ‘Conectarse al servicio Optimole’.
Después de eso, haga clic en la pestaña ‘Configuración’.
Aquí puede asegurarse de que la configuración ‘Escalar imágenes y & Carga diferida’ esté habilitada. Esto generará imágenes basadas en el tamaño de la pantalla de su visitante y mejorará las velocidades de carga.
A continuación, haga clic en la opción de menú ‘Avanzado’ y seleccione ‘Lazyload’.
En esta pantalla, hay algunas configuraciones diferentes que le permiten personalizar cómo se cargarán sus imágenes.
Primero, puede ajustar la configuración ‘Excluir el primer número de imágenes de lazyload’. Esto evitará que las imágenes en la parte superior de sus publicaciones o páginas se carguen de forma diferida, por lo que siempre aparecerán imágenes en la mitad superior de la página.
Puede establecer esto en 0 si desea que todas las imágenes se carguen de forma diferida.
A continuación, puede habilitar el control deslizante ‘Escalar imágenes’.
Esto escalará las imágenes al tamaño de la pantalla del visitante y hará que su página se cargue más rápido.
Después de eso, puede activar la configuración ‘Habilitar carga diferida para imágenes de fondo’.
Esto cargará de forma diferida tus imágenes de fondo, que pueden ser algunas de las imágenes más grandes de tu sitio web.
Otra configuración que puede habilitar es la carga diferida de videos e iframes incrustados. Si tiene una gran cantidad de contenido de video incrustado, querrá activar esta configuración.
Esto cargará una imagen de marcador de posición en lugar del video. Cuando se haga clic en él, se cargará el video completo.
Puede continuar personalizando esta configuración y ver qué funciona mejor para su sitio web y sus imágenes.
Antes de salir de la configuración del complemento, asegúrese de hacer clic en el botón ‘Guardar cambios’.
Esperamos que este artículo le haya ayudado a aprender cómo cargar imágenes de forma diferida en WordPress. También puede consultar nuestra guía para principiantes sobre SEO de imágenes para optimizar las imágenes para los motores de búsqueda y nuestras selecciones de expertos de los mejores servicios de marketing por correo electrónico para pequeñas empresas.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.