¿Qué es el renderizado progresivo?

El renderizado progresivo es un conjunto de técnicas destinadas a mejorar el rendimiento de una página web mediante la visualización gradual del contenido al usuario, mientras se completa la carga total. Esto crea la ilusión de una carga más rápida y aumenta el rendimiento percibido.

Técnicas clave:

• Carga diferida (Lazy Loading): Cargar recursos (imágenes, videos, scripts) solo cuando se vuelven visibles en el área de vista del usuario o cuando interactúa con la página.

  // Ejemplo de carga diferida de imágenes usando Intersection Observer API
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  
  images.forEach(image => {
    observer.observe(image);
  });
  

• Renderizado del lado del servidor (Server-Side Rendering - SSR): Renderizado del HTML inicial en el servidor antes de enviarlo al cliente. Permite que el usuario vea el contenido más rápido mientras el navegador carga y analiza JavaScript. Frameworks de ejemplo: Next.js, Nuxt.js.

• Renderizado con prioridad de CSS crítico (Critical CSS): Extracción e incorporación en línea del CSS necesario para mostrar la parte superior de la página (contenido por encima del pliegue), para que el navegador pueda renderizar rápidamente la vista inicial. Todo el CSS restante se carga de forma asíncrona.

  <!-- Ejemplo de incorporación en línea de CSS crítico -->
  <style>
    /* CSS crítico para la parte superior de la página */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• División de código (Code Splitting): Dividir el paquete de JavaScript en partes más pequeñas que se cargan según sea necesario. Esto reduce el tamaño de la carga inicial. Popular en frameworks SPA como React, Vue, Angular.

Ventajas del renderizado progresivo:

• Mejora del rendimiento percibido: El usuario ve el contenido más rápido, creando la sensación de una carga más rápida.
• Reducción de First Contentful Paint (FCP) y Largest Contentful Paint (LCP): Métricas que reflejan la velocidad de carga del contenido visible.
• Mejora del SEO: Los motores de búsqueda pueden indexar el contenido más rápidamente.
• Ahorro de tráfico: Especialmente con carga diferida.

La idea principal es proporcionar al usuario contenido útil lo antes posible y luego cargar gradualmente el resto para no bloquear el renderizado de la página.