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

A nadie le gusta un sitio web lento. Si tus páginas tardan demasiado en cargarse, los visitantes se irán antes de ver tu contenido.

Las imágenes son a menudo la causa principal de las velocidades de carga lentas. Ocupan la mayor parte del ancho de banda, lo que ralentiza tu rendimiento y tus rankings de búsqueda.

Hemos optimizado cientos de sitios para la velocidad, y la carga diferida (lazy loading) es una de las victorias rápidas más efectivas que recomendamos. Evita que las imágenes se carguen hasta que el usuario realmente se desplace hacia abajo para verlas.

En esta guía, te mostraremos cómo cargar imágenes de forma diferida (lazy load) fácilmente en WordPress para aumentar la velocidad de tu sitio al instante.

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

La carga diferida de imágenes de 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 CDN como BunnyCDN, o una opción más simple como Envira CDN. Un CDN permitirá a los usuarios descargar imágenes del servidor web más cercano a ellos y reducir los tiempos 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 ancho de banda al entregar solo las imágenes que se ven, lo que puede ahorrarte dinero en costos de alojamiento de WordPress.

¿Qué es la carga diferida nativa en WordPress?

Desde WordPress 5.5, la plataforma incluye la 'carga diferida nativa' por defecto. Esto significa que WordPress agrega automáticamente el atributo HTML loading="lazy" a tus etiquetas img.

Esto le indica a los navegadores modernos (como Chrome, Firefox y Safari) que retrasen la carga de la imagen hasta que el usuario se desplace cerca de ella.

Si WordPress hace esto automáticamente, ¿por qué necesito un plugin?

Si bien la carga diferida nativa es un buen comienzo, no es perfecta. Depende completamente del navegador del visitante para decidir cuándo cargar una imagen. Plugins dedicados como WP Rocket ofrecen un mejor rendimiento porque:

• Cargan diferidamente las imágenes de fondo (algo que WordPress nativo no puede hacer).
• Cargan diferidamente específicamente los iframes y videos.
• Usan scripts avanzados que cargan las imágenes más rápido que el comportamiento predeterminado del navegador.

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:

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

Recomendamos usar el plugin WP Rocket para la carga diferida de imágenes en WordPress. Es el mejor plugin de caché de 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.

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

Si tu tráfico excede los límites del plan gratuito, entonces 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 de 'Excluir el primer número de imágenes de la carga diferida'.

Esto detendrá la carga diferida de imágenes en la parte superior de tus publicaciones o páginas. Esto asegura que las imágenes sobre el pliegue se carguen instantáneamente, lo que mejora tu puntuación de Largest Contentful Paint (LCP) para un mejor SEO.

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ás la configuración 'Habilitar carga diferida para imágenes de fondo'. Esto aplicará carga diferida a tus imágenes de fondo, que pueden ser las imágenes más grandes de tu sitio web.

Otra configuración es la carga diferida de videos incrustados e iframes. Si tienes mucho contenido de video incrustado, querrás 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.

Solución de problemas comunes de carga diferida

A veces, habilitar la carga diferida puede hacer que las imágenes desaparezcan o se vean borrosas.

Aquí tienes soluciones comunes:

1. Las imágenes no aparecen

Esto sucede a menudo si tienes dos plugins de carga diferida activos al mismo tiempo (por ejemplo, WP Rocket y la carga diferida integrada de tu tema). Asegúrate de usar solo un método para evitar conflictos.

2. Las imágenes por encima del pliegue aparecen tarde

Si tu logo o imagen de encabezado aparece después del resto de la página, puede afectar tu experiencia de usuario. Como se mencionó en los métodos anteriores, debes excluir las primeras 2-3 imágenes de tu página de la carga diferida para solucionar esto.

3. Cambio de diseño (CLS)

Si tu contenido 'salta' cuando se carga una imagen, perjudica tu puntuación SEO. Para evitarlo, asegúrate de que todas tus imágenes tengan los atributos width y height definidos. WordPress hace esto automáticamente, pero algunos temas podrían anularlo.

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 para imágenes es una característica predeterminada. Sin embargo, esta función nativa es limitada y no se aplica a imágenes de fondo, iframes o videos. Para asegurar que todos tus medios estén optimizados, 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 tu 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 tu velocidad con la carga diferida puede darle a tu 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 general 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 sencilla con solo un par de clics. Si buscas una excelente alternativa gratuita, Optimole es una opción excelente que también ofrece sólidas 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.

6. ¿Cómo desactivo la carga diferida nativa en WordPress?

Si prefieres usar un plugin específico y quieres asegurarte de que la carga diferida nativa de WordPress no interfiera, puedes desactivarla agregando un fragmento de código simple al archivo functions.php de tu tema o usando un plugin de fragmentos de código como WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

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 usando 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 formato de archivo correcto. Si bien los JPEG y PNG son comunes, recomendamos encarecidamente el uso de formatos de próxima generación como WebP. Estos tipos de archivo ofrecen una compresión y calidad superiores, lo que ayuda a que tu sitio cargue significativamente más rápido.

Esperamos que este artículo te haya ayudado a aprender cómo cargar imágenes de forma diferida 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 ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.