La carga diferida retrasa un recurso no crítico hasta que se necesita, lo que reduce el trabajo inicial siempre que el contenido diferido siga siendo detectable, utilizable y disponible para los rastreadores.
Elige qué puede esperar
La carga diferida es adecuada para contenido bastante por debajo del viewport inicial, como las imágenes de galerías inferiores, los embeds o las miniaturas de listas largas. Es una mala opción por defecto para una imagen principal de cabecera, una imagen de producto que el comprador necesita de inmediato, el elemento de contenido más grande (LCP) o un componente necesario para la navegación por teclado. Diferir un recurso visible en la primera pantalla puede retrasar justo el momento en que la página se vuelve útil.
Haz un inventario del viewport inicial en anchos habituales de móvil y de escritorio. Identifica el candidato probable a LCP antes de añadir atributos de carga. Usa width y height explícitos, o una proporción reservada equivalente, para que las imágenes no empujen el texto al llegar.
Usa un marcado robusto
En las imágenes corrientes, el atributo nativo loading="lazy" del navegador suele bastar. Mantén un valor alt significativo para los medios informativos, un alt vacío solo para los decorativos, y una fuente de imagen real que siga disponible sin un script que dependa del desplazamiento. En las imágenes adaptables, proporciona srcset y sizes adecuados para que el navegador no descargue por defecto un recurso sobredimensionado.
No coloques enlaces, encabezados ni información de producto esenciales solo dentro de un componente de carga diferida en el cliente. Un rastreador y un usuario sin ejecución correcta del script deberían seguir descubriendo el contenido principal de la página. Los Intersection Observer pueden ser útiles para widgets especializados, pero añaden modos de fallo que el marcado nativo evita.
Prueba el límite del viewport
Usa una prueba en móvil con la red limitada y una carga normal del navegador. Comprueba si la imagen principal arranca pronto, si los medios por debajo del pliegue se difieren y si, al hacer scroll, cada recurso aparece sin marcadores de posición vacíos ni desplazamientos de diseño. Inspecciona el DOM y la cascada de red: una imagen marcada como diferida pero descargada de inmediato puede estar cerca del viewport; una imagen descargada demasiado tarde puede haberse diferido con demasiada agresividad.
En un artículo con un diagrama después de la introducción, la carga diferida puede ser razonable si el diagrama no es el elemento LCP y se reservan sus dimensiones. En una página de producto, la imagen principal del producto suele ser una mala candidata, porque es central para la primera decisión.
Límites y verificación
Un número menor de peticiones iniciales no demuestra por sí solo que la página sea más rápida o mejor. Mide por separado la respuesta del documento, el LCP, la estabilidad del diseño y la interacción. Vuelve a comprobar el HTML tras el renderizado y una muestra del rastreo tras los cambios de plantilla, para que los medios diferidos conserven su texto alternativo previsto, el contexto de la URL canónica y los enlaces internos.