¿Te gustaría aprender a cargar imágenes de forma diferida en WordPress?

La carga diferida permite que su sitio web cargue imágenes solo cuando el 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 web populares con muchas imágenes utilizan la carga diferida para mejorar la velocidad y el rendimiento del sitio web.

En este artículo, le mostraremos paso a paso cómo cargar fácilmente imágenes de forma diferida en WordPress.

Cómo cargar fácilmente imágenes de forma diferida en WordPress (2 formas)

¿Por qué lazy load imágenes en WordPress?

La carga diferida de sus imágenes de WordPress puede acelerar su sitio web y brindar una mejor experiencia de usuario.

A nadie le gusta un sitio web lento. De hecho, un estudio de rendimiento encontró que una demora de un segundo en el tiempo de carga de la página resultó en una reducción del 7 % en las conversiones, una reducción del 11 % en las visitas a la página y una reducción del 16 % en la satisfacción del cliente.

Investigación Ciclo Singular

A los motores de búsqueda como Google tampoco les gustan los sitios de carga lenta. Esta es la razón por la cual los sitios web más rápidos ocupan un lugar más alto en los resultados de búsqueda.

En comparación con otros elementos web, las imágenes tardan más en cargarse en su sitio web. Si agrega muchas imágenes a su artículo, cada imagen aumentará el tiempo de carga de la página.

Una forma de manejar esta situación es usar un servicio CDN como BunnyCDN. Un CDN permitirá a los usuarios descargar imágenes del servidor web más cercano y ralentizará la 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 de imágenes?

En lugar de cargar todas las imágenes a la vez, la carga diferida descarga solo las imágenes que están visibles en la pantalla del usuario. Reemplaza todas las demás imágenes con imágenes de marcador de posición o espacios en blanco.

Cuando el 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 es muy beneficiosa para tu blog de WordPress.

  • Reduce el tiempo de carga de la página inicial para que los usuarios vean su sitio web más rápido
  • Ahorra ancho de banda al servir solo imágenes visibles 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 cómo las imágenes se cargan de forma diferida y las imágenes de fondo se cargan de forma diferida, debe usar un complemento de WordPress.

notas: Aunque la carga diferida puede ayudar a mejorar la velocidad de carga del sitio, siempre debe optimizar las imágenes web para obtener el mejor rendimiento antes de cargarlas en WordPress.

Para obtener más detalles, consulte nuestra guía sobre cómo optimizar imágenes para el rendimiento web sin perder calidad.

Compartiremos dos complementos de WordPress diferentes que pueden ayudarlo a configurar fácilmente la carga diferida de imágenes de WordPress. Puede saltar directamente al método que desea usar usando los enlaces rápidos a continuación.

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, lo que le permite habilitar fácilmente la carga diferida de imágenes.

Aparte de eso, es un complemento muy poderoso que puede ayudarlo a optimizar la velocidad de su sitio web sin tener que comprender una jerga técnica complicada.

Fuera de la caja, todas sus configuraciones de caché recomendadas predeterminadas acelerarán en gran medida su sitio 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.

Imágenes de carga perezosa de WP Rocket

Para obtener más detalles, consulte nuestra guía sobre cómo instalar y configurar correctamente WP Rocket en WordPress.

notas: Si usa Siteground como su proveedor de alojamiento de WordPress, puede usar el complemento gratuito SiteGround Optimizer con una funcionalidad de carga diferida similar.

Método 2. Carga diferida de imágenes en WordPress con Optimole

Este método utiliza el complemento Optimole gratuito. Es uno de los mejores complementos de compresión de imágenes de WordPress que le permite habilitar fácilmente la carga diferida de imágenes.

Si tiene más de 5,000 visitantes mensuales, 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 complementos de WordPress.

Después de la activación, vaya a Medios » Optimol Luego, debe registrar una clave API.

Registrar 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 “Conectar al servicio Optimole”.

Ingrese la clave API

Después de eso, haga clic en la pestaña Configuración.

Aquí puede asegurarse de que la configuración “Imágenes escaladas y carga diferida” esté habilitada. Esto generará imágenes basadas en el tamaño de la pantalla del visitante y mejorará la velocidad de carga.

Configuración de carga diferida

A continuación, haga clic en la opción de menú Avanzado y seleccione Lazy Loading.

En esta pantalla, hay algunas configuraciones diferentes que le permiten personalizar cómo se cargan las imágenes de forma diferida.

Primero, puede ajustar la configuración “Excluir la primera imagen de la carga diferida”. Esto evitará la carga diferida de imágenes en la parte superior de su publicación o página, por lo que siempre aparecerán imágenes en la parte superior de la página.

Excluir imágenes para carga diferida

Puede establecer esto en 0 si desea que cada imagen se cargue de forma diferida.

A continuación, puede habilitar el control deslizante Escalar imagen.

Habilitar imágenes ampliadas

Esto escalará la imagen 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”.

Imagen de fondo de carga diferida

Esto cargará de forma diferida tus imágenes de fondo, que pueden ser algunas de las imágenes más grandes de tu sitio.

Otra configuración que puede habilitar es la carga diferida de iframes y videos incrustados. Si tiene una gran cantidad de contenido de video incrustado, deberá activar esta configuración.

Vídeo de carga lenta

Esto cargará una imagen de marcador de posición en lugar del video. Al hacer clic en él, se cargará el video completo.

Puede continuar personalizando esta configuración y ver qué funciona mejor para su sitio web e imágenes.

Asegúrese de hacer clic en el botón “Guardar cambios” antes de salir de la configuración del complemento.

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 imágenes para los motores de búsqueda, así como nuestras selecciones de expertos para los mejores servicios de marketing por correo electrónico para pequeñas empresas.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.