Cómo aplazar las imágenes fuera de pantalla en WordPress

Un sitio que carga rápidamente es absolutamente fundamental para ofrecer una buena experiencia de usuario y mejorar la optimización para motores de búsqueda. Una forma de mejorar el rendimiento de tu sitio de WordPress es aplazar las imágenes fuera de pantalla, una técnica conocida comúnmente como carga diferida.

Con la carga diferida, las imágenes que no son visibles de inmediato en una página solo se cargan cuando es necesario. En última instancia, esto reduce los tiempos de carga de la página y conserva el ancho de banda. 

Esta guía explica cómo aplazar las imágenes fuera de pantalla en WordPress, y aborda diversos métodos, herramientas y prácticas recomendadas. ¡Empecemos!

Cómo funciona el aplazamiento de imágenes fuera de pantalla

El aplazamiento de imágenes fuera de pantalla pospone la carga de las imágenes que no están dentro del área visible actual del visitante, en lugar de mostrarlas todas simultáneamente. A medida que el visitante se desplaza, se cargan imágenes adicionales justo antes de que entren en el área visible. Este enfoque mejora la velocidad de la página y optimiza el uso de los recursos.

Ventajas de aplazar las imágenes fuera de pantalla

Implementar la carga diferida ofrece varias ventajas:

• Mejores tiempos de carga de la página: Al cargar solo las imágenes visibles, disminuye la cantidad de datos transferidos durante la carga inicial de la página, lo que da como resultado una mayor velocidad.
  
• Menor uso del ancho de banda: La carga diferida conserva el ancho de banda al mostrar las imágenes solo cuando es necesario, lo que beneficia a quienes tienen planes de datos limitados o conexiones lentas.
  
• Mejor experiencia de usuario: Las páginas que cargan más rápido ofrecen una experiencia de navegación más fluida, reducen las tasas de rebote y aumentan la interacción de los usuarios.
  
• Mejor rendimiento del servidor: Reducir el número de solicitudes de imágenes simultáneas disminuye la carga del servidor y le permite gestionar más visitantes de manera eficiente.

Métodos para aplazar las imágenes fuera de pantalla en WordPress

Hay dos métodos principales para implementar la carga diferida en WordPress:

1. Usar la función nativa de carga diferida

Las versiones 5.5 y posteriores de WordPress admiten la carga diferida nativa al añadir el atributo loading=”lazy” a las etiquetas <img>. Este método depende de la compatibilidad del navegador y es sencillo de implementar.

Pasos para implementar la carga diferida nativa:

1. Actualizar WordPress a la versión más reciente: Verifica que tu instalación de WordPress sea de la versión 5.5 o posterior.
   
2. Añadir imágenes con normalidad: Al añadir imágenes en el editor de WordPress, el atributo loading=”lazy” se añade automáticamente.
   
3. Verificar la implementación: Inspecciona el HTML de tu sitio para confirmar que el atributo loading=”lazy” está presente en las etiquetas de imagen.

Nota: Aunque la carga diferida nativa es eficaz, la compatibilidad con los navegadores varía y es posible que algunos navegadores antiguos no admitan esta función.

2. Implementar manualmente la carga diferida con JavaScript

Para tener un mayor control, puedes implementar manualmente la carga diferida mediante JavaScript. Estos son algunos aspectos que intervienen:

1. La API Intersection Observer: Esta API moderna permite detectar cuándo un elemento entra en el área visible y cargar las imágenes en consecuencia.
   
2. Controladores de eventos de JavaScript: Al asociar escuchas de eventos a los eventos de desplazamiento, cambio de tamaño u orientación, puedes activar la carga de imágenes cuando sea necesario.

Implementación con la API Intersection Observer:

1. Añade el siguiente código de JavaScript al archivo de tu tema functions.php:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

2. Modifica las etiquetas de tus imágenes para incluir la clase lazy y el atributo data-src:

<img class="lazy" data-src="image.jpg" alt="Descripción">

Nota: La implementación manual requiere conocimientos de programación y puede ser más compleja de mantener.

Optimizar las imágenes para mejorar el rendimiento

Además de aplazar las imágenes fuera de pantalla, optimizar los archivos de imagen mejora el rendimiento del sitio web. Estos son otros tres pasos que puedes seguir: 

• Comprime las imágenes: Usa herramientas como ImageOptim o plugins como Jetpack para reducir el tamaño de los archivos de imagen sin reducir significativamente la calidad.
  
• Usar formatos adecuados: Utiliza formatos de imagen modernos como WebP para obtener un mejor equilibrio entre compresión y calidad.
  
• Implementar imágenes adaptables: Asegúrate de que tu sitio cargue el tamaño de imagen correcto para el dispositivo o la resolución de pantalla de cada visitante. WordPress genera varios tamaños para cada imagen subida, y el uso del atributo srcset permite que los navegadores elijan la más adecuada.

Consideraciones al usar imágenes de fondo

La carga diferida normalmente se aplica a las etiquetas <img>, pero las imágenes de fondo establecidas mediante CSS no se gestionan de forma predeterminada. Si tu tema o plugin utiliza imágenes de fondo para elementos de diseño, tendrás que adoptar un enfoque diferente.

Técnicas para cargar imágenes de fondo de forma diferida:

• Usa JavaScript para aplicar imágenes de fondo dinámicamente cuando un elemento entre en el área visible.
  
• Usa bibliotecas compatibles con la carga diferida de imágenes de fondo, como Lozad.js o LazySizes.
  
• Añade marcadores de posición con imágenes de baja resolución o bloques de color sólido antes de que se cargue la imagen completa.

Ejemplo con JavaScript y Intersection Observer:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

CSS:

/* Reserva espacio para reducir CLS */
img {
  height: auto;
}

/* Opcional: efecto de marcador de posición sutil para las imágenes diferidas que controlas */
img.lazy {
  filter: blur(8px);
  transform: scale(1.01);
}
img.lazy.is-loaded {
  filter: none;
  transform: none;
  transition: filter 250ms ease, transform 250ms ease;
}

Probar y validar la carga diferida

Una vez implementada la carga diferida, es importante confirmar que funciona según lo esperado y que no afecta a la funcionalidad de tu sitio ni a su SEO.

Pasos para validar la implementación:

• Usar las herramientas de desarrollo del navegador:
  
  • Abre Chrome Developer Tools o Firefox DevTools.
    
  • Inspecciona los elementos <img> para confirmar loading=”lazy” o atributos de datos personalizados como data-src.
    
• Desplazarse por la página:
  
  • Asegúrate de que las imágenes se carguen solo cuando aparezcan en el área visible.
    
• Usar las auditorías de Lighthouse:
  
  • Ejecuta una auditoría de PageSpeed Insights o un informe de Lighthouse en las herramientas de desarrollo de Chrome. Comprueba si hay sugerencias de rendimiento relacionadas con la carga de imágenes.
    
  • Actualización importante (Lighthouse 13 / PageSpeed Insights): La auditoría «Aplazar las imágenes fuera de pantalla» se eliminó de Lighthouse 13. Si buscas esta información porque una prueba antigua, el panel de tu proveedor de alojamiento o un informe en caché mostraba la advertencia, la práctica recomendada subyacente sigue siendo importante: carga rápidamente las imágenes de la parte superior de la página y retrasa las imágenes realmente fuera de pantalla; no obstante, debes validar usando las comprobaciones actuales de Lighthouse/PageSpeed y los Core Web Vitals de usuarios reales.
    
• Probar en varios dispositivos y navegadores:
  
  • Asegúrate de que haya compatibilidad y funcionalidad en distintos entornos.

Evitar errores comunes

La carga diferida es potente, pero una implementación incorrecta puede causar problemas de usabilidad o hacer que se pierdan oportunidades de SEO. Ten en cuenta los siguientes problemas:

• Las imágenes no se cargan en absoluto:
  
  • Asegúrate de usar correctamente data-src, la lógica de JavaScript y los mecanismos de respaldo.
    
• Problemas de SEO:
  
  • Usa un texto alternativo adecuado y asegúrate de que las imágenes importantes sigan siendo detectables.
    
  • Usa datos estructurados para hacer referencia a las imágenes cuando sea necesario.
    
• Cambios en la distribución del contenido:
  
  • Reserva espacio para las imágenes usando los atributos de ancho y alto o reglas de CSS para evitar saltos en la distribución.
    
• Uso excesivo de bibliotecas de JavaScript:
  
  • Evita combinar demasiadas soluciones de Lazy Load, ya que pueden entrar en conflicto.
    
• Problemas de accesibilidad:
  
  • No uses la carga diferida para imágenes fundamentales para la navegación o la comprensión del contenido.

Compatibilidad fluida con temas y constructores

Muchos temas y constructores de páginas de WordPress tienen sus propios mecanismos de carga diferida o capas de compatibilidad. Es importante entender cómo interactúan con tus otros métodos.

Consejos para la compatibilidad con temas y constructores:

• Consulta la documentación de tu tema para comprobar si la carga diferida está incluida o recomendada.
  
• Desactiva las funciones de carga diferida del plugin si tu tema ya las incluye.
  
• Usa temas hijo para aplicar JavaScript personalizado sin modificar los archivos principales del tema.
  
• Prueba los constructores visuales después de activar la carga diferida para que el contenido dinámico se cargue correctamente.

Cuándo no posponer la carga de imágenes

Aunque la carga diferida es útil, no todas las imágenes deben posponerse. Las imágenes fundamentales que aparecen en la parte visible inicialmente o que forman parte de la navegación o la identidad de marca deben cargarse de inmediato.

Imágenes que normalmente no deberías cargar de forma diferida:

• Logotipos del encabezado
  
• Imágenes principales visibles en la ventana gráfica al cargar la página
  
• Iconos o ilustraciones esenciales de la interfaz situados en la parte visible inicialmente
  
• Imágenes con loading=”eager” cuando el beneficio de rendimiento supera al de la carga diferida

Usa la carga diferida de forma selectiva para obtener el mejor rendimiento y la mejor experiencia de usuario.

Lleva la optimización más allá con Jetpack Boost

Una vez implementada la carga diferida y optimizadas las imágenes, el siguiente paso es agilizar el resto del rendimiento de tu sitio. Ahí es donde entra Jetpack Boost.

Jetpack Boost es un plugin gratuito de rendimiento diseñado específicamente para WordPress. Incluye un conjunto de herramientas de optimización que mejoran los tiempos de carga sin necesidad de conocimientos técnicos. Para los propietarios de sitios que quieren asegurarse de que cada página sea lo más rápida y eficiente posible, Jetpack Boost ofrece funciones prácticas que puedes activar con unos pocos clics.

Estas son solo algunas de las formas en que Jetpack Boost mejora el rendimiento:

• Pospone el JavaScript no esencial: JavaScript puede bloquear la representación, pero Jetpack Boost ayuda posponiendo los scripts no esenciales para que la página se pueda usar más rápido.
  
• Optimiza la carga de CSS: El plugin crea CSS crítico para tu página de inicio, entradas y páginas. El contenido se muestra más rápido, incluso antes de que se haya cargado la página completa.
  
• Imágenes mediante CDN: Sirve las imágenes desde una CDN global y las convierte a formatos eficientes como WebP.

Si tu objetivo es tener un sitio de WordPress rápido y fácil de usar sin dedicar horas al código o la configuración, Jetpack Boost hace que las buenas prácticas de rendimiento sean accesibles y aplicables.

Descubre aquí todas las funciones incluidas en Jetpack Boost: /boost/

Preguntas frecuentes

¿Cuál es la diferencia entre posponer las imágenes fuera de la pantalla y la carga diferida?

La carga diferida es la técnica utilizada para posponer las imágenes fuera de la pantalla. Posponer una imagen significa impedir que se cargue hasta que sea necesaria. La carga diferida es el método popular que logra esto esperando a cargar una imagen hasta que una persona se desplaza cerca de ella. Por tanto, estos términos funcionan conjuntamente. Pospones las imágenes implementando la carga diferida. El objetivo principal es acelerar la carga inicial de la página cargando únicamente las imágenes que están visibles de inmediato.

¿Posponer las imágenes fuera de la pantalla perjudicará el SEO de mi sitio web?

Posponer las imágenes fuera de la pantalla ayuda al SEO cuando se hace correctamente. Hace que tu página se cargue más rápido, lo que mejora los Core Web Vitals, un factor conocido de posicionamiento en Google. El principal riesgo es aplicar la carga diferida a la imagen «Largest Contentful Paint» (LCP). La imagen LCP es la imagen principal que aparece en la parte superior de tu página. Si aplicas la carga diferida a esta imagen, puede ralentizar el tiempo de carga percibido y perjudicar tu puntuación de SEO.

¿La versión más reciente de WordPress pospone automáticamente las imágenes fuera de la pantalla?

Sí, desde la versión 5.5, WordPress aplica automáticamente la carga diferida básica a las imágenes. WordPress añade el atributo loading=”lazy” a las etiquetas img. Esto indica a los navegadores que pospongan las imágenes situadas más abajo de la parte visible inicialmente. Aunque es un buen punto de partida, no es una solución completa.

No aplica la carga diferida a las imágenes de fondo ni al contenido de los iframe, y puede no ser tan eficiente como los métodos basados en JavaScript utilizados por los plugins de rendimiento, que ofrecen más control y mejores resultados para las puntuaciones de velocidad de la página.

¿Puedo posponer las imágenes de fondo establecidas en mi CSS?

Sí, puedes posponer la carga de las imágenes de fondo en CSS, pero es más complejo. La carga diferida estándar en WordPress solo funciona con las etiquetas de tu HTML. No funciona con imágenes cargadas como propiedad background-image en tus archivos CSS.

Para posponerlas, necesitas un plugin que utilice un enfoque basado en JavaScript. El script puede detectar cuándo un elemento con una imagen de fondo está a punto de entrar en la vista al desplazarse y aplicar entonces la imagen. Es una función avanzada presente en muchos plugins de rendimiento premium.

¿Cómo puedo evitar que una imagen específica, como mi logotipo, se cargue de forma diferida?

Debes impedir que tu logotipo, las imágenes del encabezado y cualquier contenido situado en la parte visible inicialmente se carguen de forma diferida. La mejor manera es usar un plugin que permita especificar exclusiones. Algunos plugins permiten añadir una clase CSS, como no-lazy, a una etiqueta de imagen. Esto indica al script que omita esa imagen específica.

Si tu plugin tiene una opción para «excluir las imágenes iniciales», puedes configurarlo para excluir automáticamente la primera o las dos primeras imágenes. Esto garantiza que tus elementos visuales más importantes se carguen de inmediato para ofrecer una mejor experiencia de usuario.

¿Cómo puedo comprobar si el aplazamiento de las imágenes fuera de la pantalla funciona en mi sitio?

Puedes usar las herramientas de desarrollo de tu navegador para verificar que funciona. En Chrome o Firefox, haz clic con el botón derecho en la página y selecciona «Inspeccionar». Ve a la pestaña «Red» y selecciona el filtro «Img».

Ahora, vuelve a cargar la página. Solo deberías ver que se cargan unas pocas imágenes en la parte superior de la lista. A medida que te desplazas hacia abajo por la página, verás que aparecen nuevos archivos de imagen en el registro de red mientras se cargan. Si ves que todas las imágenes de tu página se cargan al mismo tiempo justo al principio, entonces no está funcionando correctamente.

¿Funciona posponer la carga de imágenes con formatos modernos como WebP o AVIF?

Sí, posponer la carga funciona con todos los formatos de imagen, incluidos los modernos como WebP y AVIF, así como con los más antiguos como PNG y JPG. La carga diferida no tiene en cuenta el tipo de archivo de la imagen.

El proceso funciona retrasando la carga del elemento HTML en sí, independientemente del archivo de origen de la imagen. Esto significa que puedes combinar las ventajas de los formatos de imagen modernos y más pequeños con las mejoras de velocidad de la carga diferida para conseguir un sitio web aún más rápido. Es recomendable utilizar ambos métodos juntos.

Además de las imágenes, ¿qué más puedo posponer para mejorar la velocidad de la página?

Posponer la carga de imágenes es un excelente comienzo, pero también puedes posponer otros recursos. Los más comunes son los archivos de JavaScript y los vídeos. Puedes posponer los archivos de JavaScript no críticos para evitar que bloqueen la representación del contenido de tu página. Esto suele llamarse «retrasar» o «posponer» JS.

En el caso de los vídeos, especialmente las inserciones de YouTube, puedes sustituir el reproductor de vídeo pesado por una imagen de vista previa ligera. El reproductor de vídeo completo solo se carga después de que el usuario hace clic en el botón de reproducción. Posponer la carga de estos recursos reduce aún más los tiempos de carga iniciales y mejora tus Core Web Vitals.