¿Qué es el renderizado progresivo?

El renderizado progresivo es una técnica para mejorar el rendimiento de las páginas web, en la que el contenido se carga y muestra por etapas, en lugar de todo de una vez. Esto mejora la percepción del rendimiento y la interactividad, permitiendo al usuario ver e interactuar con una parte de la página antes de que se carguen todos los recursos.

Enfoques principales:

Carga diferida (Lazy Loading): Cargar imágenes, videos u otros elementos que consumen muchos recursos solo cuando se vuelven visibles en la vista del usuario.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descripción de la imagen">
```
Renderizado por streaming: Enviar el código HTML en partes, permitiendo que el navegador comience a analizar y renderizar antes de recibir toda la página.

Renderizado en el lado del servidor (SSR) o Hidratación: Generar el HTML inicial en el servidor para una visualización rápida del contenido, y luego "revivir" la estructura estática en el cliente con JavaScript para la interactividad.

// Ejemplo de concepto de hidratación
// En el cliente
const appElement = document.getElementById('app');
// Montar la aplicación Vue/React/etc. en la estructura DOM existente
Vue.createApp(App).mount(appElement);
// o React.hydrate(<App />, appElement);

Priorizar contenido visible (renderizado por encima del pliegue): Cargar y renderizar el contenido visible en la primera parte de la página (sin desplazarse), con carga diferida del resto.

La aplicación del renderizado progresivo mejora las métricas principales de Web Vitals:

Largest Contentful Paint (LCP): Acelera la visualización del elemento más grande.
First Contentful Paint (FCP): Reduce el tiempo hasta que aparece el primer contenido.
Cumulative Layout Shift (CLS): Aunque no directamente, un uso correcto de placeholders y lazy loading puede ayudar a reducir desplazamientos inesperados del contenido.