Kas ir progresīva renderēšana?

Progresīvais attēlojums — tā ir tehnika, kas uzlabo tīmekļa lapu veiktspēju, pakāpeniski ielādējot un attēlojot saturu, nevis uzreiz visu. Tas uzlabo uztveramo veiktspēju un interaktivitāti, ļaujot lietotājam redzēt un mijiedarboties ar daļu lapas līdz pilnīgai visu resursu ielādei.

Galvenie pieejas veidi:

• Lazy Loading (Aizkavēta ielāde): attēlu, video vai citu resursu ielāde tikai tad, kad tie kļūst redzami lietotāja skatījumā.

  <!-- Lazy loading attēls -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Attēla apraksts">
  

• Straumēšanas atveidošana (Streaming Rendering): HTML koda sūtīšana pa daļām, ļaujot pārlūkprogrammai sākt analīzi un attēlošanu pirms visa lapas saņemšanas.

• Servera puses atveidošana (SSR) vai Hidratācija (Hydration): sākotnējā HTML ģenerēšana serverī, lai ātrāk attēlotu saturu, pēc tam "atdzīvinot" statisko marķējumu klienta pusē ar JavaScript, lai nodrošinātu interaktivitāti.

  // Hidratācijas koncepcijas piemērs
  // Klienta pusē
  const appElement = document.getElementById('app');
  // Vue/React utt. izmantošana, uzstādot lietojumprogrammu jau esošajā DOM struktūrā
  Vue.createApp(App).mount(appElement);
  // vai React.hydrate(<App />, appElement);
  

• Redzama satura prioritāte (Above-the-fold rendering): ielādēt un attēlot pirmo lapas daļu (ne ritinot), ar atliktu citu daļu ielādi.

Progresīvais attēlojums uzlabo galvenos Web Vitals rādītājus:

• Largest Contentful Paint (LCP): paātrina lielākā elementa attēlošanu.
• First Contentful Paint (FCP): samazina pirmā satura parādīšanās laiku.
• Cumulative Layout Shift (CLS): lai arī netieši, pareiza vietturu un lazy loading izmantošana var palīdzēt samazināt negaidītas satura pārvietojumus.