Ce este redarea progresivă?

Redarea progresivă este un set de tehnici destinate îmbunătățirii performanței paginii web prin afișarea treptată a conținutului către utilizator, până la finalizarea încărcării complete. Aceasta creează iluzia unei încărcări mai rapide și crește performanța percepută.

Tehnici cheie:

• Încărcare întârziată (Lazy Loading): Încărcarea resurselor (imagini, videoclipuri, scripturi) doar atunci când devin vizibile în zona de vizualizare a utilizatorului sau când acesta interacționează cu pagina.

  // Exemplu de încărcare întârziată a imaginilor folosind API-ul Intersection Observer
  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);
  });
  

• Redare pe partea serverului (Server-Side Rendering - SSR): Redarea HTML-ului inițial pe server înainte de a fi trimis către client. Permite utilizatorului să vadă conținutul mai rapid în timp ce browserul încarcă și analizează JavaScript. Exemple de framework-uri: Next.js, Nuxt.js.

• Redare cu prioritate CSS critic (Critical CSS): Extrage și inserează CSS-ul necesar pentru afișarea părții superioare a paginii (above-the-fold content), astfel încât browserul să poată reda rapid aspectul inițial. Restul CSS-ului este încărcat asincron.

  <!-- Exemplu de inline CSS critic -->
  <style>
    /* CSS critic pentru partea superioară a paginii */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Divizarea codului (Code Splitting): Împărțirea pachetului JavaScript în părți mai mici, care sunt încărcate după nevoie. Acest lucru reduce dimensiunea încărcării inițiale. Popular în framework-urile SPA precum React, Vue, Angular.

Avantajele renderizării progresive:

• Îmbunătățirea performanței percepute: Utilizatorul vede conținutul mai rapid, creând impresia unei încărcări mai rapide.
• Reducerea First Contentful Paint (FCP) și Largest Contentful Paint (LCP): Măsurători care reflectă viteza de încărcare a conținutului vizibil.
• Îmbunătățirea SEO: Motoarele de căutare pot indexa mai rapid conținutul.
• Economisirea traficului: În special cu încărcarea întârziată.

Ideea principală este de a oferi utilizatorului conținut util cât mai curând posibil și apoi de a încărca treptat restul, pentru a nu bloca randarea paginii.