Carga diferida para WordPress: imágenes, vídeos y más

La carga diferida acelera tu sitio de WordPress al retrasar la carga de imágenes, videos y otros contenidos multimedia hasta que estén a punto de aparecer en pantalla. Esto mejora los tiempos de carga de la página, reduce la carga del servidor y optimiza la experiencia del usuario. Esto es lo que necesitas saber:

• Qué admite la carga diferidaImágenes (totalmente compatibles), videos (basados ​​en complementos), iFrames (parciales), audio (limitado) y bloques personalizados.
• Carga diferida integrada en WordPress:WordPress (desde la versión 5.5) utiliza el loading="lazy" atributo para imágenes y iFrames.
• Complementos para funciones avanzadas:
  • WP Rocket:Agrega umbrales, optimiza videos y ofrece configuraciones específicas para dispositivos móviles.
  • a3 Carga perezosa:Incluye animaciones y carga selectiva.
  • Carga diferida de WP Speed ​​Matters:Ligero y compatible con imágenes WebP.
• Opciones de código personalizado:Utilice JavaScript o modifique el tema functions.php para mayor control.

Comparación rápida de métodos de carga diferida

Método	Ventajas	Desventajas
WordPress integrado	Fácil de usar, no necesita configuración	Limitado a imágenes y iFrames
Plugins	Funciones avanzadas y personalización	Requiere instalación y configuración.
Código Personalizado	Control total sobre el comportamiento	Requiere conocimientos de codificación

Para empezar, audita tus archivos multimedia, elige un método (integrado, plugin o personalizado) y prueba el rendimiento de tu sitio web utilizando herramientas como Google PageSpeed ​​Insights.

WordPress Carga diferida incorporada

Descripción general del sistema predeterminado

A partir de WordPress 5.5, la carga diferida está integrada en el núcleo mediante el código HTML. loading atributo. Esta función agrega automáticamente loading="lazy" a imágenes e iframes, indicando a los navegadores que retrasen la carga de estos elementos hasta que estén cerca de la ventana gráfica.

Así es como funciona:

• agrega el loading atribuir a todos <img> las etiquetas.
• Maneja imágenes responsivas con srcset los atributos.
• Administra contenido iframe, como vídeos o mapas incrustados.
• Se basa en la carga diferida nativa del navegador en lugar de métodos basados ​​en JavaScript.

Administrar la configuración predeterminada

Puede ajustar el comportamiento de carga diferida predeterminado a través de los filtros de tema en el functions.php archivo. A continuación se muestran algunos ejemplos:

Deshabilitar la carga diferida para imágenes específicas:

add_filter('wp_lazy_loading_enabled', function($default, $tag_name) {
    if (is_front_page() && $tag_name === 'img') {
        return false;
    }
    return $default;
}, 10, 2);

Control de carga diferida para tipos de imágenes personalizados:

add_filter('wp_get_attachment_image_attributes', function($attr) {
    if (isset($attr['class']) && strpos($attr['class'], 'hero-image') !== false) {
        $attr['loading'] = 'eager';
    }
    return $attr;
});

Restricciones del sistema integrado

Si bien la función de carga diferida nativa de WordPress es útil, tiene algunas limitaciones:

Limitación	Generar impacto	Solución
Sin control de umbral	Las imágenes se cargan según las decisiones del navegador	Utilice JavaScript para umbrales personalizados
Apoyo limitado de los medios	Sólo funciona para imágenes e iframes.	Instalar complementos para otros tipos de medios
Sin opciones de animación	Comportamiento de carga básico únicamente	Añadir CSS personalizado para cargar efectos
Comportamiento fijo	No se puede ajustar la secuencia de carga	Utilice soluciones de carga diferida de terceros

Para un control más avanzado, considere usar complementos o escribir código personalizado para ampliar la funcionalidad más allá de lo que ofrece el sistema predeterminado.

Cómo agregar carga diferida a WordPress

Carga diferida basada en complementos

Para aquellos que buscan más control que la carga diferida predeterminada de WordPress, los complementos ofrecen una variedad de opciones para ajustar el rendimiento.

Los mejores complementos de carga diferida

La carga diferida integrada de WordPress es un buen comienzo, pero los complementos pueden brindar funciones y flexibilidad adicionales. Estas son algunas opciones populares:

Plugin Name	Características principales	Ideal para
WP Rocket	– Ajustes de umbral avanzados – Optimiza vídeos y iframes – Configuraciones específicas para dispositivos móviles	Sitios web de alto tráfico
a3 Carga perezosa	– Animaciones de carga personalizadas – Reglas para la carga selectiva – Configuración para navegadores específicos	Blogs con muchas imágenes
Carga diferida de WP Speed ​​Matters	– Ligero y eficiente - Interfaz fácil de usar – Soporte WebP incorporado	Sitios web de pequeñas empresas

Guía de instalación del complemento

1. Preparación

Antes de la instalación, realiza una copia de seguridad de tu sitio web y mide la velocidad de carga actual de tus páginas con herramientas como GTmetrix o PageSpeed ​​Insights. Esto te ayudará a realizar un seguimiento de las mejoras.

2. Proceso de instalación

Ve al panel de control de WordPress, ve a Plugins > Añadir nuevo y busca el plugin que quieras. Haz clic en "Instalar ahora" y luego en "Activar". Para plugins premium como WP Rocket, sube el archivo ZIP con el cargador de plugins.

3. Configuración inicial

Asegúrate de que el plugin sea compatible con tu tema, prueba tu sitio en diferentes dispositivos y navegadores, y comprueba si hay conflictos con otras herramientas de optimización. Una vez que todo funcione correctamente, ajusta la configuración del plugin para que se ajuste a las necesidades de tu sitio.

Guía de configuración de complementos

Ajuste del umbral de carga

Por ejemplo, WP Rocket permite establecer un límite para cargar imágenes antes de que se visualicen. Esto se puede configurar así:

define('WP_ROCKET_LAZYLOAD_THRESHOLD', '200px');

Configuración de tipos de medios

A continuación se muestra una guía rápida para configurar la carga diferida para diferentes medios:

Tipo de medio	Configuración sugerida	Notas
Imágenes	Habilitar para todas las imágenes	Excluir imágenes por encima del pliegue para una mejor experiencia del usuario
Videos	Habilitar con un retraso de 3 segundos	Reduce los cambios de diseño durante la carga.
Marcos	Habilitar selectivamente	Ajustar según las necesidades de interacción del usuario

Consejos de rendimiento

• Establezca umbrales entre 150 y 300 px para equilibrar el rendimiento y la experiencia del usuario.
• Habilite la carga diferida nativa como opción alternativa.
• Utilice configuraciones separadas para dispositivos móviles y de escritorio.
• Convierte imágenes al formato WebP para velocidades de carga más rápidas.

Estos ajustes pueden ayudarle a optimizar el rendimiento de su sitio manteniendo una experiencia de usuario fluida.

sbb-itb-608da6a

Código de carga diferida personalizado

Usar código personalizado de carga diferida te da control total sobre cómo se cargan los archivos multimedia en tu sitio de WordPress. A diferencia de los plugins que incluyen configuraciones predefinidas, el código personalizado te permite ajustar la carga diferida a tus necesidades específicas. Funciona bien con plugins, ofreciendo un control más detallado.

Atributos de carga HTML

Con código personalizado, puedes agregar atributos directamente a tus elementos multimedia. Por ejemplo, puedes usar el loading atributo como este:

<img src="image.jpg" loading="lazy" alt="Description" width="800" height="600">
<iframe src="video-url" loading="lazy" width="560" height="315"></iframe>

Si está trabajando con archivos de plantilla de WordPress, puede modificar elementos multimedia usando PHP:

<?php
$image_attributes = array(
    'loading' => 'lazy',
    'src' => get_the_post_thumbnail_url(),
    'alt' => get_the_title()
);
echo wp_get_attachment_image($attachment_id, 'full', false, $image_attributes);
?>

Implementación de JavaScript

También puedes implementar la carga diferida usando JavaScript para monitorear la posición de desplazamiento del usuario:

document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img[data-src]');

    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => imageObserver.observe(img));
});

Para incluir este script en su tema de WordPress, utilice el sistema de cola:

function enqueue_lazy_load_script() {
    wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_lazy_load_script');

Soluciones de soporte para navegadores

Es importante tener en cuenta la compatibilidad del navegador. A continuación, se muestra un ejemplo de una solución alternativa:

if ('loading' in HTMLImageElement.prototype) {
    // Native lazy loading supported
    const images = document.querySelectorAll('img[loading="lazy"]');
} else {
    // Fallback to Intersection Observer
    const script = document.createElement('script');
    script.src = '/path/to/intersection-observer-polyfill.js';
    document.head.appendChild(script);
}

Versión del navegador	Tipo de soporte	Solución requerida
Chrome 76 +	Nativo	Atributo de carga HTML
Firefox 75 +	Nativo	Atributo de carga HTML
Safari 15.4 +	Nativo	Atributo de carga HTML
IE11 y anteriores	Sin soporte	Polyfill de JavaScript
Borde (Cromo)	Nativo	Atributo de carga HTML

Probando su implementación

Para garantizar que su configuración de carga diferida funcione como se espera:

• Utilice Chrome DevTools para simular velocidades de red más lentas.
• Pruebe su sitio en diferentes navegadores para confirmar la compatibilidad.
• Verifique el rendimiento en una variedad de dispositivos para detectar posibles problemas.

Estos ejemplos están listos para añadirse a los archivos de tu tema. Prueba siempre los cambios en un entorno de pruebas antes de aplicarlos a un sitio web en producción.

SEO y optimización de velocidad

Directrices para los motores de búsqueda

Google recomienda cargar el contenido de la mitad superior de la página inmediatamente para garantizar que tanto los rastreadores como los usuarios puedan acceder a información crítica. Para hacerlo eficazmente, configure el umbral de carga diferida para precargar el contenido entre 500 y 1,000 píxeles antes de que aparezca en la ventana gráfica.

A continuación se presentan algunas prácticas clave de SEO a seguir:

• Utilice el marcado adecuado:Agregue texto alternativo descriptivo y metadatos a sus imágenes.
• Mantener el texto alternativo intacto:Asegúrese de que todas las imágenes cargadas de forma diferida conserven su texto alternativo descriptivo.

Estos pasos ayudan a establecer una base sólida para mejorar Core Web Vitals.

Optimización de Web Vitals

La carga diferida no solo ayuda con el SEO; también mejora las métricas de rendimiento críticas vinculadas a la experiencia del usuario.

La carga diferida afecta a las métricas web principales como Largest Contentful Paint (LCP) , Cumulative Layout Shift (CLS) y First Input Delay (FID) . A continuación, se explica cómo optimizarlas:

Web Vital	Puntuación objetivo	Cómo optimizar
LCP	Bajo 2.5s	Cargue imágenes clave (como imágenes de héroes) inmediatamente
CLS	Menores de 0.1 años	Defina las dimensiones de la imagen dentro del HTML para evitar cambios de diseño
DEFENSOR	Menos de 100 ms	Aplazar la carga de medios no esenciales para reducir demoras

Para mejorar estas métricas:

• Centrarse en el contenido crítico:Cargue primero las imágenes esenciales y posponga las que no lo son.
• Garantizar la estabilidad visual:Evite cambios de diseño estableciendo explícitamente las dimensiones de las imágenes y precargando imágenes cruciales.
• Siga Su Progreso:Utilice herramientas como Google Search Console para supervisar sus Web Vitals.

Test de rendimiento

Para evaluar el rendimiento de la carga diferida, confíe en estas herramientas:

	Propósito	Las métricas clave
PageSpeed ​​Insights	Análisis del rendimiento general	Elementos fundamentales de la Web
WebPageTest	Revisión del desempeño en profundidad	Progreso visual y comportamiento de carga
DevTools de Chrome	Pruebas locales	Cascada de red y uso de recursos

Al ejecutar pruebas:

• Realice pruebas en diferentes dispositivos y velocidades de red para obtener una imagen completa.
• Compare los tiempos de carga de la página antes y después de implementar la carga diferida.
• Supervise el uso de los recursos del servidor bajo diferentes niveles de tráfico para garantizar la escalabilidad.

Para los usuarios de WordPress, presten especial atención a métricas como el tiempo de carga de la página, la interactividad, el uso de memoria, la respuesta del servidor y el rendimiento de carga de imágenes. Esta información les ayudará a optimizar la velocidad de su sitio y la experiencia del usuario.

Próximos Pasos

¿Listo para implementar la carga diferida? Aquí te explicamos cómo empezar con estos pasos prácticos.

Lista de verificación de implementación

• Audite sus medios:Revise los tipos y tamaños de imágenes, videos y otros medios en su sitio para determinar qué se debe cargar de forma diferida.
• Elige tu método:Decide si utilizarás la carga diferida integrada de WordPress, complementos de terceros o código personalizado según las necesidades de tu sitio web.
• Prueba en todos los dispositivos:Garantizar que las funciones de carga diferida funcionen correctamente en diferentes navegadores y dispositivos.
• Seguimiento del rendimiento : Utilice herramientas como Google Insights PageSpeed y WebPageTest para monitorear Core Web Vitals y la velocidad general del sitio.

Fase de prueba	Acciones Clave	Herramientas para usar
Pre lanzamiento	Ejecutar una prueba de velocidad de referencia	PageSpeed ​​Insights
Implementación	Realizar pruebas entre navegadores	DevTools de Chrome
Lanzamiento posterior	Monitorizar el desempeño continuo	WebPageTest

Uno nueve Servicios

Si buscas ayuda experta, OneNine ofrece servicios integrales para mejorar el rendimiento de tu sitio web. Esto es lo que dicen sus clientes:

Después de que OneNine se hiciera cargo del portafolio de sitios web de uno de mis clientes, hemos visto cómo la velocidad de cada sitio aumentó más de un 700 %. Los tiempos de carga ahora rondan el segundo. Son muy asequibles, tienen una comunicación excepcional y siempre sentimos que recibimos MÁS de lo que pagamos.

OneNine es extremadamente útil al brindar soporte técnico y de implementación continuos. Han completado varios proyectos con ellos y siempre cumplen con nuestros plazos y se ajustan al presupuesto.

Lo que ofrece OneNine:

• Pruebas de velocidad periódicas y ajustes inmediatos por parte de los desarrolladores
• Se realizan capturas de pantalla cada 3 horas para detectar problemas visuales.
• Optimización centrada en Core Web Vitals
• Mantenimiento y soporte técnico continuo

Sus planes de administración cubren todo, desde la carga diferida hasta la optimización de la velocidad a gran escala y soporte continuo para mantener su sitio funcionando sin problemas.

Blog y artículos

• 5 formas de mejorar la experiencia del usuario en su sitio web en 2025
• Cómo optimizar la velocidad de su sitio web de WordPress: guía paso a paso
• Prácticas recomendadas de HTML para sitios web más rápidos
• Cómo afectan los scripts de terceros a la velocidad del sitio web