Cómo cargar imágenes perezosamente en WordPress fácilmente (2 maneras)

Implementar la carga perezosa de imágenes en WordPress es un pequeño paso que puede marcar una gran diferencia para tu sitio web. Es una práctica clave para cualquier sitio de alto rendimiento hoy en día.

Esta única técnica ayuda directamente con dos cosas que todo propietario de sitio web desea. Una mejor experiencia para los visitantes y un buen impulso en las clasificaciones de los motores de búsqueda.

Para tus visitantes, significa que tus páginas se sienten excepcionalmente rápidas y receptivas. Ven tu contenido casi al instante, lo que los mantiene comprometidos.

Los motores de búsqueda como Google también notan esta velocidad. Tienden a favorecer los sitios web más rápidos, lo que puede ayudar a que tu contenido sea descubierto por más personas.

Queremos ayudarte a obtener estos beneficios de inmediato. Aquí tienes dos métodos sencillos para que la carga perezosa funcione en tu sitio hoy mismo.

¿Por qué cargar imágenes perezosamente en WordPress?

Cargar imágenes perezosamente en WordPress puede acelerar tu sitio web y ofrecer una mejor experiencia de usuario.

A nadie le gustan los sitios web lentos. De hecho, un estudio sobre el rendimiento de los sitios web encontró que un retraso de 1 segundo en el tiempo de carga de la página conduce a un 7% menos de conversiones, un 11% menos de páginas vistas 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. Es por eso que los sitios más rápidos se clasifican más alto en los resultados de búsqueda.

Las imágenes tardan más en cargarse en tu sitio de WordPress en comparación con otros elementos web. Si agregas muchas imágenes a tus artículos, cada imagen aumenta el tiempo de carga de tu página.

Una forma de manejar esta situación es usar un servicio de CDN como BunnyCDN, o una opción más simple como Envira CDN, que está diseñado específicamente para imágenes. Un CDN permitirá a los usuarios descargar imágenes de un servidor web más cercano a ellos y reducir la velocidad de carga del sitio web.

Sin embargo, tus imágenes aún se cargarán y afectarán el tiempo de carga general de la página. Para superar este problema, puedes retrasar la carga de imágenes implementando la carga diferida (lazy load) en tu sitio web.

¿Cómo funciona la carga diferida de imágenes?

En lugar de cargar todas tus 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 el usuario se desplaza hacia abajo en la página, tu sitio web carga las 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 de carga inicial de la página web para que los usuarios vean tu sitio más rápido.
• Conserva el ancho de banda entregando solo las imágenes que se ven, lo que puede ahorrarte dinero en los costos de hosting de WordPress.

El lanzamiento de WordPress 5.5 agregó la carga diferida como una característica predeterminada.

Sin embargo, si deseas personalizar cómo se cargan tus imágenes de forma diferida y también cargar imágenes de fondo de forma diferida, necesitarás usar un plugin de WordPress.

Veamos cómo cargar imágenes de forma diferida en WordPress usando dos plugins diferentes. Puedes usar los enlaces rápidos a continuación para ir directamente al método que deseas usar:

1. Carga diferida de imágenes en WordPress con WP Rocket (Recomendado)
2. Carga diferida de imágenes en WordPress con Optimole (Gratis)
3. Preguntas frecuentes sobre la carga diferida de imágenes
4. Consejos adicionales para optimizar tus imágenes de WordPress

Método 1: Carga diferida de imágenes en WordPress con WP Rocket

Recomendamos usar el plugin WP Rocket para cargar imágenes de forma diferida en WordPress. Es el mejor plugin de caché para WordPress del mercado que te permite activar fácilmente la carga diferida de imágenes.

Además de eso, es un plugin muy potente que te ayuda a optimizar la velocidad de tu página sin necesidad de conocer términos técnicos complejos ni configurar ajustes expertos.

Nada más sacarlo de la caja, todas sus configuraciones de caché recomendadas por defecto acelerarán enormemente tu sitio web de WordPress.

Lo primero que necesitarás hacer es instalar y activar el plugin WP Rocket. Para más detalles, puedes ver nuestra guía sobre cómo instalar un plugin de WordPress.

Para habilitar la carga diferida de imágenes, todo lo que tienes que hacer es marcar algunas casillas. Incluso puedes habilitar la carga diferida para videos, lo que mejorará aún más la velocidad de tu sitio.

Todo lo que necesitas hacer es ir a Ajustes » WP Rocket en tu panel de WordPress y hacer clic en la pestaña ‘Medios’. Luego, puedes desplazarte hasta la sección ‘LazyLoad’ y marcar las casillas junto a ‘Habilitar para imágenes’ y ‘Habilitar para iframes y videos’.

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

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

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

Si recibes más de 5,000 visitantes al mes, necesitarás la versión premium de Optimole. Para más detalles, consulta nuestra reseña completa de Optimole.

Primero, necesitas instalar y activar el plugin Optimole. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, verás una pantalla pidiéndote que te registres para obtener una clave API. También puedes encontrar esta pantalla navegando a Optimole en el menú de administración.

Deberás asegurarte de que la dirección de correo electrónico indicada sea correcta y luego hacer clic en el botón ‘Crear y conectar tu cuenta’. Alternativamente, si ya eres usuario, simplemente haz clic en el botón ‘Ya tengo una clave API’.

Es posible que debas esperar unos segundos mientras el plugin se conecta a Optimole. Después de eso, el plugin comenzará automáticamente a optimizar tus imágenes para que tus visitantes ahora vean las mejores imágenes para sus dispositivos.

Mientras eso sucede, puedes hacer clic en la pestaña ‘Configuración’ para configurar la carga diferida.

Aquí, debes asegurarte de que la configuración ‘Escalar imágenes y carga diferida’ esté habilitada. Esto generará imágenes basadas en el tamaño de pantalla de tu visitante y mejorará las velocidades de carga.

Luego, haz clic en la opción de menú ‘Avanzado’ y selecciona ‘Carga diferida’. En esta pantalla, hay algunas configuraciones diferentes que te permiten personalizar cómo se cargarán tus imágenes de forma diferida.

Primero, puedes ajustar la configuración ‘Excluir el primer número de imágenes de la carga diferida’. Esto evitará que las imágenes en la parte superior de tus publicaciones o páginas se carguen de forma diferida, por lo que las imágenes por encima del pliegue siempre aparecerán.

Puedes establecer esto en 0 si deseas que todas las imágenes se carguen de forma diferida.

Hay algunas otras configuraciones avanzadas de carga diferida en Optimole que puedes revisar. Estas configuraciones están habilitadas por defecto.

La primera es la configuración ‘Escalar imágenes’. Esto escalará las imágenes al tamaño de pantalla del visitante y hará que tu página cargue más rápido.

Después de eso, verá la configuración ‘Habilitar lazyload para imágenes de fondo’. Esto cargará de forma diferida sus imágenes de fondo, que pueden ser las imágenes más grandes de su sitio web.

Otra configuración es la carga diferida de videos incrustados e iframes. Si tiene mucho contenido de video incrustado, querrá dejar esta configuración activada. Cargará una imagen de marcador de posición en lugar del video. Cuando se haga clic en el marcador de posición, se cargará el video completo.

Puede continuar personalizando estas configuraciones y ver qué funciona mejor para su sitio web y sus imágenes.

Antes de salir de la configuración del plugin, asegúrese de hacer clic en el botón ‘Guardar cambios’ en la parte inferior de la página.

Preguntas frecuentes sobre la carga diferida de imágenes

Sabemos que aún podría tener algunas preguntas sobre la carga diferida en WordPress. Aquí están las respuestas a algunas de las más comunes que recibimos.

1. ¿WordPress carga imágenes automáticamente de forma diferida?

Sí, desde el lanzamiento de WordPress 5.5, la carga diferida básica de imágenes es una característica predeterminada. Sin embargo, esta función nativa no se aplica a elementos como imágenes de fondo o videos. Para un mayor control y para asegurar que todos sus medios se carguen de forma diferida, recomendamos usar un plugin dedicado como WP Rocket u Optimole.

2. ¿La carga diferida es buena para el SEO?

Absolutamente. La carga diferida mejora significativamente la velocidad de carga de su página, que es un factor clave para la experiencia del usuario. Los motores de búsqueda como Google prefieren sitios web más rápidos, por lo que mejorar su velocidad con la carga diferida puede darle a su sitio un buen impulso en los rankings de búsqueda.

3. ¿Cuál es el mejor plugin de carga diferida para WordPress?

Para un rendimiento integral y facilidad de uso, recomendamos WP Rocket. Es el mejor plugin de rendimiento del mercado e incluye una función de carga diferida potente y simple con solo un par de clics. Si buscas una excelente alternativa gratuita, Optimole es una opción excelente que también ofrece robustas opciones de carga diferida.

4. ¿Se pueden cargar videos de forma diferida en WordPress?

¡Sí, puedes y deberías! Esta es una forma fantástica de mejorar la velocidad de las páginas que presentan mucho contenido de video incrustado. Tanto WP Rocket como Optimole te permiten habilitar fácilmente la carga diferida para tus videos, lo que los reemplaza con una imagen de marcador de posición hasta que un usuario hace clic para reproducir.

5. ¿Deberías cargar imágenes de forma diferida por encima del pliegue?

Generalmente, la mejor práctica es excluir las imágenes en la parte superior de tu página (por encima del pliegue) de la carga diferida. Esto asegura que lo primero que vean tus visitantes se cargue instantáneamente, creando una excelente primera impresión. Plugins como Optimole te permiten excluir fácilmente las primeras imágenes de la carga diferida por esta misma razón.

Consejos adicionales para optimizar tus imágenes de WordPress

Aunque la carga diferida ayudará a mejorar la velocidad de carga del sitio web, hay otras formas de optimizar tus imágenes de WordPress para obtener el mejor rendimiento.

Por ejemplo, recomendamos comprimir tus imágenes antes de subirlas a tu sitio web utilizando una herramienta como TinyPNG o JPEGmini. Alternativamente, puedes usar un plugin de compresión de imágenes automatizado como Optimole o EWWW Image Optimizer.

También es importante elegir el tamaño de imagen y el formato de archivo de WordPress adecuados para tus imágenes. Los JPEG son mejores para fotos o imágenes con muchos colores, los PNG son adecuados para imágenes simples o transparentes, y los GIF son solo para imágenes animadas.

Esperamos que este artículo te haya ayudado a aprender cómo cargar imágenes de forma diferida (lazy load) en WordPress. También te puede interesar nuestro tutorial sobre cómo optimizar fácilmente imágenes para la web sin perder calidad y nuestras selecciones expertas de los mejores plugins de carga de archivos para WordPress.

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