Mis on progressiivne renderdamine?

Progresseeriv renderdamine — see on meetod, mis optimeerib veebilehe laadimis- ja kuvamiskiirust, kus sisu laaditakse ja kuvatakse etapivi, mitte kohe täielikult.

Selle peamised eelised:

Esmase tähendusliku sisu (First Meaningful Paint) kiire kuvamine.
Parandatud kasutaja tajutav laadimiskiirus.
Aja kuni interaktiivsuseni (Time to Interactive) vähendamine.

Peamised tehnikad:

Lazy Loading (Hilisem laadimine): Vähemoluliste ressursside (näiteks piltide või videote) edasilükkamine kuni kasutaja neid vajab (kuni ta kerib lehte nende juurde).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Näidispilt" loading="lazy">
```

Serveripoolne renderdamine (Server-Side Rendering - SSR): HTML lehe koostamine serveris ja juba renderdatud sisu saatmine brauserile.

// Näide SSR kasutamisest (näiteks Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Andmete saamine serveris
//   const data = await fetchData();
//   return {
//     props: { data },
//   }
// }
//
// function MyPage({ data }) {
//   // Komponendi renderdamine andmetega
//   return <div>{/* ... */}</div>
// }

Kliendipoolne renderdamine (Client-Side Rendering - CSR) ja hüdraatimine: Brauser saab minimaalne HTML ja JavaScripti. JavaScript laadib andmed ja renderdab lehe täielikult brauseris. Hüdraatimine — see on protsess, kus juba renderdatud SSR sisu juurde lisatakse sündmuste töötlejad.

HTML voogedastus (Streaming HTML): HTML saadetakse osadena, kui see genereeritakse serveris, võimaldades brauseril alustada analüüsi ja renderdamist enne kogu dokumendi täielikku laadimist.

<!-- Hüpoteetiline voogedastuse näide -->
<html>
  <head>
    <title>Voogedastuse leht</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Esimene HTML osa, mis juba saadetud -->
    <h1>Pealkiri</h1>
    <script src="script.js" async></script>
    <!-- Ülejäänud HTML võib hiljem saata -->
  </body>
</html>

Kriitiline CSS / Inline CSS (Critical CSS / Inline Critical CSS): CSS-stiilide inline-ülesehitus, mis on vajalik nähtava osa (Above the Fold) kiireks kuvamiseks, et kiirendada esmast renderdamist. Teised stiilid laaditakse asünkroonselt.

Tehnika	Kirjeldus	Eelised	Miinused
Lazy Loading	Ressursside hilinenud laadimine väljaspool nähtavat ala	Kiire nähtava sisu laadimine	Võib nõuda JS-i rakendamiseks
SSR	Serveripoolne renderdamine, valmis HTML saatmine	Kiire esimese sisu kuvamine, SEO-sõbralikkus	Serveri koormuse suurenemine
CSR koos hüdraatimisega	Algne renderdamine kliendi poolel koos SSR sisu hüdraatimisega	Dünaamilised rakendused	Pikk laadimine ja interaktiivsus ilma SSR-ita
HTML voogedastus	HTML saatmine osadena, kui see genereeritakse serveris, võimaldades alustada analüüsi	Kiire analüüsi algus	Sõltub serveri rakendamisest
Kriitiline CSS	CSS stiilide inline-ülesehitus — nähtava osa jaoks	Kiire nähtava osa renderdamine	Vajalik tööriistad kriitilise CSS eraldamiseks

Progresiivne renderdamine — see on nende ja teiste tehnikate kombinatsioon, mis on suunatud kasutajakogemuse parandamisele, kiirendades veebilehe kuvamist.