Co je to progresivní vykreslování?

Progresivní renderování je soubor technik zaměřených na zlepšení výkonu webové stránky postupným zobrazováním obsahu uživateli, dokud není dokončeno úplné načtení. To vytváří iluzi rychlejšího načítání a zvyšuje vnímaný výkon.

Klíčové techniky:

• Líné načítání (Lazy Loading): Načítání zdrojů (obrázků, videí, skriptů) pouze tehdy, když se stanou viditelnými v oblasti zobrazení uživatele, nebo když uživatel interaguje se stránkou.

  // Příklad líného načítání obrázků pomocí 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é renderování (Server-Side Rendering - SSR): Renderování počátečního HTML na serveru před odesláním klientovi. To umožňuje uživateli vidět obsah rychleji, zatímco prohlížeč načítá a analyzuje JavaScript. Příklady frameworků: Next.js, Nuxt.js.

• Renderování s prioritou kritického CSS (Critical CSS): Extrahování a inlinování CSS, které je nezbytné pro zobrazení horní části stránky (above-the-fold content), aby prohlížeč mohl rychle vykreslit počáteční vzhled. Zbytek CSS se načítá asynchronně.

  <!-- Příklad inlinování kritického CSS -->
  <style>
    /* Kritické CSS pro horní část stránky */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Rozdělení kódu (Code Splitting): Rozdělení JavaScriptového balíčku na menší části, které se načítají podle potřeby. To snižuje velikost počátečního načítání. Populární v SPA rámcích typu React, Vue, Angular.

Výhody progresivního renderování:

• Zlepšení vnímaného výkonu: Uživatel vidí obsah rychleji, což vytváří dojem rychlejšího načítání.
• Snížení First Contentful Paint (FCP) a Largest Contentful Paint (LCP): Metryky odrážející rychlost načítání viditelného obsahu.
• Zlepšení SEO: Vyhledávací systémy mohou rychleji indexovat obsah.
• Úspora datového přenosu: Zejména při líném načítání.

Hlavní myšlenkou je poskytnout uživateli užitečný obsah co nejdříve a poté postupně načítat zbytek, aby nedocházelo k blokování vykreslování stránky.