Técnica de optimización que retrasa la carga de recursos hasta que son realmente necesarios.
Mejora la velocidad de carga inicial de las aplicaciones. Se aplica a imágenes, componentes y módulos.
// Lazy loading de imágenes HTML5 <img src="placeholder.jpg" data-src="imagen-real.jpg" loading="lazy" alt="Descripción" /> // Lazy loading en React import { lazy, Suspense } from 'react'; // Importar componente de forma lazy const ComponentePesado = lazy(() => import('./ComponentePesado')); function App() { return ( <Suspense fallback={<div>Cargando...</div>}> <ComponentePesado /> </Suspense> ); } // Code splitting con React Router const Home = lazy(() => import('./pages/Home')); const About = lazy(() => import('./pages/About')); // Intersection Observer para imágenes const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); });
