Decide qué se necesita ahora, no lo que aparece temprano en el markup
La carga diferida marca un recurso como no crítico hasta que sea necesario. Clasifica según el recorrido real: elementos esenciales de la primera vista, medios por debajo del pliegue, embeds opcionales y código para una ruta o panel posterior. La posición en el CMS no es suficiente evidencia; una imagen puede estar fuera de la ventana en una plantilla y ser central en otra.
Revisa cargas en frío en un teléfono pequeño y en un escritorio típico. También prueba enlaces de campaña y anclas en la página, que pueden situar a un visitante más abajo. Esa revisión te dice qué debe estar listo sin una solicitud activada por desplazamiento.
La tarea inicial, la navegación visible, el copy clave y el primer visual significativo deben estar disponibles inmediatamente.
Galerías de partes bajas de la página, mapas, embeds sociales, reproductores fuera de pantalla y código para características no elegidas son candidatos comunes.
Protege el hero y la vista inicial
No cargues de forma diferida contenido que probablemente sea visible cuando se abra la página. Google advierte contra ello, y el análisis de web.dev muestra que cargar de forma diferida imágenes de la ventana inicial puede retrasar el LCP. El elemento LCP puede ser un hero, imagen de producto, póster o texto; verifica en cada plantilla importante en lugar de adivinar.
Carga una imagen confirmada como LCP de forma anticipada. Si las pruebas muestran que una imagen crítica pierde atención de la red, prueba un hint de fetch-priority alto para ella. Es una pista, no una orden. Una imagen de fondo crítica en CSS puede necesitar un preload temprano porque el parser no puede descubrirla directamente; mide ese caso.
Revisa los valores por defecto del CMS y de los plugins para imágenes destacadas que estén marcadas incorrectamente como lazy en páginas de listado.
Usa cargas en frío en móvil y escritorio, no solo una vista previa de diseño en escritorio.
Reserva espacio antes de que lleguen los medios
Cambio acumulativo de diseño (Cumulative Layout Shift, CLS) es el movimiento inesperado del contenido visible. Una imagen diferida sin altura conocida puede empujar texto y controles después de que un lector empieza a escanear o intenta pulsar un botón. Eso es un riesgo de interacción, no solo un problema de métrica.
Proporciona atributos width y height precisos para imágenes y vídeo, o reserva la forma con CSS aspect-ratio. Usa un placeholder con la huella final del componente. Para un frame de terceros, reserva su altura y proporciona un estado claro de carga o indisponibilidad.
Almacena las dimensiones del medio junto con el activo cuando sea posible; una proporción genérica no es fiable para formas de imagen mixtas.
Desplázate, filtra, abre paneles, rota un dispositivo móvil y usa la navegación atrás para encontrar cambios de diseño posteriores.
Mantén el contenido descubrible y las interacciones comprensibles
Google Search Central dice que Google no interactúa con las páginas desplazando o haciendo clic. El contenido lazy-loaded importante debería cargarse cuando sea visible, y el HTML renderizado debe exponer el contenido esperado o las URLs de medios. Inspecciona páginas representativas en Search Console después de la implementación.
Una lista infinita indexable necesita una ruta paginada para cada porción duradera: una URL única persistente, contenido estable en esa URL y enlaces a través de la secuencia. Esto también crea un punto compartible al que las personas puedan volver.
Cuando una acción revela contenido, mantiene el control operable por teclado y hace que el resultado sea comprensible. Para una actualización no focalizada significativa, como 'resultados cargados', expón el estado programáticamente para que las tecnologías asistivas puedan anunciarlo sin mover el foco.
Detalles del producto, cuerpo del artículo, información de elegibilidad e instrucciones de tareas no deberían existir primero solo después de una acción del visitante.
No retrases controles requeridos de checkout o autenticación. Haz que revisores cualificados de seguridad y cumplimiento evalúen cambios en pagos, identidad y scripts de terceros.
Usa el mecanismo menos frágil
Para imágenes e iframes ordinarios fuera de la ventana, la carga diferida nativa del navegador suele ser el punto de partida más sencillo. El navegador decide cuándo inicia una solicitud cercana a la ventana; esa distancia no es una garantía. El evento window load puede dispararse mientras recursos lazy siguen incompletos.
Usa un Intersection Observer cuando un componente nombrado necesite activación personalizada, como montar un panel costoso poco antes de que aparezca. Mantén el observer estrecho y comienza el trabajo lo bastante pronto para desplazamientos rápidos. Usa code splitting para rutas no iniciales o funciones opcionales, no como excusa para retrasar la tarea actual.
No reemplaces una source simple con atributos data, varios scripts y una librería a menos que el comportamiento añadido resuelva una necesidad probada.
Un embed opcional debe tener una alternativa clara o un estado de omisión, no un spinner permanente.
Mide, publica y remedia juntos
Compara una línea base y un candidato en las mismas URLs, estado de caché, viewport y ruta de usuario. Usa pruebas en frío y móviles con condiciones limitadas más comprobaciones en dispositivo real cuando sea posible. Registra LCP, secuencia visible, shifts de diseño, errores de medios, HTML renderizado y acciones esenciales. Los datos de campo complementan las pruebas de laboratorio.
Lanza un cambio reversible y limitado por plantilla. Registra los activos movidos de eager a deferred, referencia del despliegue, acción de caché, propietario y primer paso de reversión. Si LCP pasa a ser lazy o una ruta de conversión queda incompleta, elimina la regla para ese activo crítico y verifica de nuevo. Revisa después de cambios en tema, CMS, servicio de imágenes, tag o embed.
Centra la atención en prevenir y remediar una experiencia rota, no en informes de estado actual o alertas.
Invierte la configuración afectada de la plantilla antes de retocar cada imagen en todo el sitio.