Mi az a progresszív renderelés?

A progresszív renderelés egy olyan technikák összessége, amelyek célja egy weboldal teljesítményének javítása azáltal, hogy fokozatosan jelenítik meg a tartalmat a felhasználó számára, amíg a teljes betöltés be nem fejeződik. Ez gyorsabb betöltés illúzióját kelti, és növeli a észlelt teljesítményt.

Kulcsfontosságú technikák:

• Lazy Loading (Lusta betöltés): Erőforrások (képek, videók, szkriptek) csak akkor töltődnek be, amikor a felhasználó látóterében (viewport) megjelennek, vagy amikor a felhasználó interakcióba lép a oldallal.

  // Példa a lazy loading képekre Intersection Observer API segítségével
  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);
  });
  

• Szerveroldali renderelés (Server-Side Rendering - SSR): Az elsődleges HTML renderelése a szerveren, mielőtt elküldenék a kliensnek. Ez lehetővé teszi a felhasználó számára, hogy gyorsabban lássa a tartalmat, miközben a böngésző betölti és elemzi a JavaScriptet. Példák keretrendszerekre: Next.js, Nuxt.js.

• Kritikus CSS prioritásával történő renderelés (Critical CSS): A CSS kivonása és inline-be helyezése, amely szükséges a oldal felső részének (above-the-fold tartalom) megjelenítéséhez, így a böngésző gyorsan kirajzolhatja az első látványt. A többi CSS aszinkron módon töltődik be.

  <!-- Kritikus CSS inline példája -->
  <style>
    /* Kritikus CSS a felső részhez */
    body { margin: 0; }
    h1 { szín: kék; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Kód szétválasztása (Code Splitting): A JavaScript csomag felosztása kisebb részekre, amelyek szükség szerint töltődnek be. Ez csökkenti az elsődleges betöltés méretét. Népszerű SPA keretrendszerekben, mint például React, Vue, Angular.

A progresszív renderelés előnyei:

• Észlelt teljesítmény javítása: A felhasználó gyorsabban látja a tartalmat, ami gyorsabb betöltés érzetét kelti.
• First Contentful Paint (FCP) és Largest Contentful Paint (LCP) csökkentése: Olyan metrikák, amelyek a látható tartalom betöltési sebességét tükrözik.
• SEO javítása: A keresőmotorok gyorsabban indexelhetik a tartalmat.
• Adatforgalom megtakarítása: Különösen a lazy loading esetén.

A fő ötlet az, hogy a felhasználónak a lehető leggyorsabban hasznos tartalmat nyújtsunk, majd fokozatosan töltsük be a többit, hogy ne blokkoljuk az oldal renderelését.