Kas ir progresīva renderēšana?

Progresīvais renderings ir tehnoloģiju kopums, kas vērsts uz tīmekļa lapas veiktspējas uzlabošanu, pakāpeniski parādot saturu lietotājam, kamēr pilnīga ielāde nav pabeigta. Tas rada ātrākas ielādes ilūziju un palielina uztveramo veiktspēju.

Galvenās tehnikas:

• Lazy Loading (Lazy Loading): resursu (attēli, video, skripti) ielāde tikai tad, kad tie kļūst redzami skatīšanās zonā vai kad lietotājs ar lapu mijiedarbojas.

  // Piemērs, kā izmantot Intersection Observer API, lai veiktu lazy loading
  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);
  });
  

• Server-side rendering (Server-Side Rendering - SSR): Sākotnējā HTML renderēšana serverī pirms sūtīšanas klientam. Tas ļauj lietotājam redzēt saturu ātrāk, kamēr pārlūkprogramma ielādē un analizē JavaScript.

• Kritiska CSS prioritāte (Critical CSS): CSS izvilkšana un iekļaušana, kas nepieciešama lapas augšējās daļas (above-the-fold content) parādīšanai, lai pārlūkprogramma varētu ātri uzzīmēt sākotnējo skatu. Visu pārējo CSS ielādē asenhroni.

  <!-- Kritiskā CSS iekļaušanas piemērs -->
  <style>
    /* Kritiska CSS augšējai daļai */
    body { margin: 0; }
    h1 { krāsa: zila; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Koda sadalīšana (Code Splitting): JavaScript pakotnes sadalīšana mazākās daļās, kas tiek ielādētas pēc nepieciešamības. Tas samazina sākotnējās ielādes izmēru. Populāri SPA ietvaros, piemēram, React, Vue, Angular.

Progresīvā renderēšanas priekšrocības:

• Uzlabota uztveramā veiktspēja: Lietotājs redz saturu ātrāk, radot iespaidu par ātrāku ielādi.
• Samazina First Contentful Paint (FCP) un Largest Contentful Paint (LCP): Metodes, kas atspoguļo ielādes ātrumu.
• Uzlabota SEO: Meklētājprogrammas var ātrāk indeksēt saturu.
• Tīkla ietaupījums: Īpaši veltīgi ielādējot.

Galvenā ideja — nodrošināt lietotājam noderīgu saturu pēc iespējas ātrāk, pēc tam pakāpeniski ielādējot pārējo, lai neapstādinātu lapas renderēšanu.