Kas yra progresyvus atvaizdavimas?

Progresyvusis renderavimas yra technikų rinkinys, skirtas pagerinti tinklalapio našumą palaipsniui rodyti turinį naudotojui, kol nebus baigtas pilnas įkėlimas. Tai sukuria įspūdį greitesnio įkėlimo ir padidina suvokiamą našumą.

Pagrindinės technikos:

• Vėlyvas įkėlimas (Lazy Loading): išteklių (vaizdų, vaizdo įrašų, skriptų) įkėlimas tik tada, kai jie tampa matomi peržiūros srityje arba kai naudotojas sąveikauja su puslapiu.

  // Pavyzdys, kaip naudoti Intersection Observer API vėlyvam įkėlimui
  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);
  });
  

• Serverio pusės renderavimas (Server-Side Rendering - SSR): Pagrindinio HTML renderavimas serveryje prieš siunčiant klientui. Tai leidžia naudotojui matyti turinį greičiau, kol naršyklė įkelia ir analizuoja JavaScript.

• Kritinio CSS prioritetinis renderavimas (Critical CSS): CSS išgavimas ir įterpimas, reikalingas viršutinės puslapio dalies (above-the-fold content) rodymui, kad naršyklė galėtų greitai nupiešti pradinį vaizdą. Likęs CSS įkeliama asinchroniškai.

  <!-- Kritinio CSS įterpimo pavyzdys -->
  <style>
    /* Kritinis CSS viršutinės puslapio dalies */
    body { margin: 0; }
    h1 { spalva: mėlyna; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Kodo skaidymas (Code Splitting): JavaScript paketo skaidymas į mažesnes dalis, kurios įkeliamos pagal poreikį. Tai sumažina pradinio įkėlimo dydį. Populiaru SPA frameworkuose kaip React, Vue, Angular.

Privalumai progresyvaus renderavimo:

• Pagerina suvokiamą našumą: Naudotojas mato turinį greičiau, sukuriantį įspūdį apie greitesnį įkėlimą.
• Sumažina First Contentful Paint (FCP) ir Largest Contentful Paint (LCP): Metodai, atspindintys įkėlimo greitį.
• Pagerina SEO: Paieškos sistemos gali greičiau indeksuoti turinį.
• Taupo srautą: Ypač vėlyvo įkėlimo atveju.

Pagrindinė idėja — suteikti naudotojui naudingą turinį kuo greičiau, o tada palaipsniui įkelti likusį, kad nebūtų blokuojamas puslapio renderavimas.