Mis on progressiivne renderdamine?

Progressiivne renderdamine on tehnoloogiate kogum, mis on suunatud veebilehe jõudluse parandamisele, järk-järgult sisu kasutajale kuvades kuni täieliku laadimiseni. See loob kiirema laadimise illusiooni ja tõstab tajutavat jõudlust.

Peamised tehnikad:

• Hiliselt laadimine (Lazy Loading): ressursside (piltide, videote, skriptide) laadimine ainult siis, kui need muutuvad nähtavaks vaadeldavas piirkonnas või kui kasutaja interakteerub lehega.

  // Näide piltide hilisest laadimisest Intersection Observer API abil
  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);
  });
  

• Serveripoolne renderdamine (Server-Side Rendering - SSR): Algse HTML renderdamine serveris enne selle saatmist kliendile. See võimaldab kasutajal sisu kiiremini näha, samal ajal kui brauser laadib ja analüüsib JavaScripti.

• Kriitilise CSS prioriteetne renderdamine (Critical CSS): CSS eraldamine ja inliinimine, mis on vajalik lehe ülaosa (above-the-fold content) kuvamiseks, võimaldades brauseril kiiresti algselt vaadet joonistada. Kõik ülejäänud CSS laaditakse asünkroonselt.

  <!-- Näide kriitilise CSS inliinimisest -->
  <style>
    /* Kriitiline CSS lehe ülaosa jaoks */
    body { margin: 0; }
    h1 { värv: sinine; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Koodi jagamine (Code Splitting): JavaScripti paketi jagamine väiksemateks osadeks, mis laaditakse vastavalt vajadusele. See vähendab alglaadimise suurust. Populaarne SPA raamistikus nagu React, Vue, Angular.

Progressiivse renderdamise eelised:

• Parandab tajutavat jõudlust: Kasutaja näeb sisu kiiremini, mis loob kiirema laadimise tunde.
• Vähendab First Contentful Paint (FCP) ja Largest Contentful Paint (LCP): Mõõdikud, mis peegeldavad laadimiskiirust.
• Parandab SEO-d: Otsingumootorid saavad sisu kiiremini indekseerida.
• Säästab liiklust: Eriti hilise laadimise korral.

Peamine mõte — pakkuda kasutajale kasulikku sisu võimalikult kiiresti ning seejärel järk-järgult laadida ülejäänud, et vältida lehe renderdamise blokeerimist.