Kas yra progresyvus atvaizdavimas?

Progresyvusis atvaizdavimas — tai technika, skirta didinti tinklalapių našumą, kai turinys įkeliama ir rodomas etapais, o ne iš karto visa. Tai pagerina suvokiamą našumą ir interaktyvumą, leidžiant vartotojui matyti ir sąveikauti su dalimi puslapio iki visų išteklių pilno įkėlimo.

Pagrindiniai požiūriai:

• Lazy Loading (Vėlyvas įkėlimas): vaizdų, vaizdo įrašų ar kitų išteklių įkėlimas tik tada, kai jie tampa matomi vartotojo peržiūros lange.

  <!-- Lazy loading vaizdas -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Vaizdo aprašymas">
  

• Srautinis atvaizdavimas (Streaming Rendering): HTML kodo siuntimas dalimis, leidžiant naršyklei pradėti analizuoti ir atvaizduoti iki viso puslapio gavimo.

• Serverio pusės atvaizdavimas (SSR) arba Hidratacija (Hydration): Pradinis HTML generavimas serveryje, siekiant greito turinio rodymo, tada "atgaivinimas" statinio maketo kliento pusėje naudojant JavaScript, siekiant interaktyvumo.

  // Hidratacijos koncepcijos pavyzdys
  // Kliento pusėje
  const appElement = document.getElementById('app');
  // Vue/React ir kt. naudojimas, montuojant programą jau egzistuojančioje DOM struktūroje
  Vue.createApp(App).mount(appElement);
  // arba React.hydrate(<App />, appElement);
  

• Matomą turinį prioritetas (Above-the-fold rendering): įkeliama ir atvaizduojama matoma pirmoji puslapio dalis (ne slenkant), o likęs turinys įkeliamas vėliau.

Progresyvusis atvaizdavimas pagerina pagrindinius Web Vitals rodiklius:

• Largest Contentful Paint (LCP): pagreitina didžiausio elemento rodymą.
• First Contentful Paint (FCP): sumažina pirmojo turinio pasirodymo laiką.
• Cumulative Layout Shift (CLS): nors ir ne tiesiogiai, teisingas placeholder'ų ir lazy loading naudojimas gali padėti sumažinti netikėtus turinio judesius.