Čo je progresívne vykresľovanie?

Progresívne renderovanie je súbor techník zameraných na zlepšenie výkonu webovej stránky postupným zobrazovaním obsahu používateľovi, kým sa úplne nenačíta. To vytvára ilúziu rýchlejšieho načítania a zvyšuje vnímaný výkon.

Kľúčové techniky:

• Lazivé načítanie (Lazy Loading): Načítanie zdrojov (obrázkov, videí, skriptov) iba vtedy, keď sa stanú viditeľnými v oblasti zobrazenia používateľa alebo keď používateľ interaguje so stránkou.

  // Príklad lazivého načítania obrázkov pomocou 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);
  });
  

• Serverové renderovanie (Server-Side Rendering - SSR): Renderovanie počiatočného HTML na serveri pred odoslaním klientovi. To umožňuje používateľovi vidieť obsah rýchlejšie, zatiaľ čo prehliadač načítava a analyzuje JavaScript. Príklady frameworkov: Next.js, Nuxt.js.

• Renderovanie s prioritou kritického CSS (Critical CSS): Extrahovanie a inlinovanie CSS, ktoré je nevyhnutné pre zobrazenie hornej časti stránky (above-the-fold content), aby prehliadač mohol rýchlo vykresliť počiatočný vzhľad. Zvyšok CSS sa načítava asynchrónne.

  <!-- Príklad inlinovania kritického CSS -->
  <style>
    /* Kritické CSS pre hornú časť stránky */
    body { margin: 0; }
    h1 { farba: modrá; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Rozdelenie kódu (Code Splitting): Rozdelenie JavaScript balíka na menšie časti, ktoré sa načítajú podľa potreby. To znižuje veľkosť počiatočného načítania. Populárne v SPA rámcoch ako React, Vue, Angular.

Výhody progresívneho renderovania:

• Zlepšenie vnímaného výkonu: Používateľ vidí obsah rýchlejšie, čo vytvára dojem rýchlejšieho načítania.
• Zníženie First Contentful Paint (FCP) a Largest Contentful Paint (LCP): Metódy odrážajúce rýchlosť načítania viditeľného obsahu.
• Zlepšenie SEO: Vyhľadávače môžu rýchlejšie indexovať obsah.
• Úspora dátového prenosu: Obzvlášť pri lazivom načítaní.

Hlavná myšlienka je poskytnúť používateľovi užitočný obsah čo najskôr a potom postupne načítavať zvyšok, aby sa nezablokovalo vykresľovanie stránky.