Mis on progressiivne renderdamine?

Progresseeriv renderdamine — see on tehnika, mis tõstab veebilehtede jõudlust, laadides ja kuvades sisu etapiviisiliselt, mitte kohe kogu ulatuses. See parandab tajutavat jõudlust ja interaktiivsust, võimaldades kasutajal näha ja suhelda osa leheküljest enne kõigi ressursside täielikku laadimist.

Peamised lähenemisviisid:

• Lazy Loading (Hilisem laadimine): piltide, videote või teiste ressursside laadimine ainult siis, kui need muutuvad nähtavaks kasutaja vaateväljas.

  <!-- Lazy loading pilt -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Pildi kirjeldus">
  

• Striiming-rendamine (Streaming Rendering): HTML-koodi saatmine osade kaupa, võimaldades brauseril alustada analüüsi ja renderdamist enne kogu lehe saamist.

• Serveripoolne renderdamine (SSR) või Hüdraatimine (Hydration): algse HTML genereerimine serveris, et kiiremini sisu kuvada, ning seejärel "elustamine" staatiline markup kliendi poolel JavaScripti abil, et saavutada interaktiivsus.

  // Hüdraatimise kontseptsiooni näide
  // Kliendi poolel
  const appElement = document.getElementById('app');
  // Vue/React jms kasutamine, rakenduse monteerimine juba olemasolevale DOM-ile
  Vue.createApp(App).mount(appElement);
  // või React.hydrate(<App />, appElement);
  

• Nähtava sisu prioriseerimine (Above-the-fold rendering): laadida ja kuvada esimene osa leheküljest (ilma kerimiseta), ülejäänud osa hiljem laadida.

Progresseeriv renderdamine parandab Web Vitals põhimeetrikaid:

• Largest Contentful Paint (LCP): kiirendab suurima elemendi kuvamist.
• First Contentful Paint (FCP): vähendab esimese sisu ilmumise aega.
• Cumulative Layout Shift (CLS): kuigi mitte otseselt, aitab õigesti kasutatavad placeholderid ja lazy loading vähendada ootamatuid sisu liikumisi.