El lazy-loading (carga diferida) pospone la descarga de algo hasta que realmente se necesita, normalmente cuando está a punto de aparecer en pantalla al hacer scroll. Esto reduce la carga inicial para que la parte visible de la página cargue más rápido.
El navegador lo hace de forma nativa con un solo atributo:
Mantén siempre width/height para que el navegador reserve espacio (evita el layout shift). Nunca hagas lazy-load de tu imagen LCP: retrasa justo aquello que se está midiendo.
Divide la UI pesada o poco usada (modales, gráficos) en un chunk separado que se carga bajo demanda:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
El import() dinámico le indica al bundler que cree un archivo separado que se descarga solo cuando <Chart> se renderiza por primera vez.
El lazy-loading es la victoria más simple y de mayor impacto para una página pesada: menos que descargar por adelantado significa un LCP más rápido y menos JS que parsear. Los entrevistadores quieren verte no hacer lazy-load de la imagen principal, un error clásico que perjudica la métrica que intentas ayudar.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar