Ի՞նչ է պրոգրեսիվ ռենդերէնգը։

Ավելի առաջադեմ ռենդերինգը տեխնիկաների հավաքածու է, որը նպատակ ունի բարելավել վեբ էջի կատարողականությունը աստիճանաբար ցուցադրելով բովանդակությունը օգտվողին, մինչեւ ամբողջական բեռնումը ավարտվի: Սա ստեղծում է ավելի արագ բեռնումի էֆեկտ և բարձրացնում ընկալվող կատարողականությունը:

Հիմնական տեխնիկաներ՝

• Անվճար բեռնում (Lazy Loading): ռեսուրսների (պատկերներ, տեսանյութեր, սցեններ) բեռնում միայն այն ժամանակ, երբ դրանք դառնում են տեսանելի դիտման տարածքում կամ երբ օգտվողը փոխազդում է էջի հետ:

  // Օրինակ՝ պատկերների անուշադրության բեռնում Intersection Observer API-ի միջոցով
  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 - SSR): Արդիական HTML-ի ռենդերինգը սերվերում նախքան ուղարկելը հաճախորդին: Սա թույլ է տալիս օգտվողին տեսնել բովանդակությունը ավելի արագ, մինչդեռ բրաուզերը բեռնում և վերլուծում է JavaScript-ը:

• Կրիտիկական CSS-ի առաջնահերթ ռենդերինգ (Critical CSS): CSS-ի հանելը և ներքին գծագրումը, որը անհրաժեշտ է էջի վերևի մասի (above-the-fold content) ցուցադրման համար, որպեսզի բրաուզերը կարողանա արագ նկարել սկզբնական տեսքը:

  <!-- Կրիտիկական CSS-ի ներքին գծագրության օրինակ -->
  <style>
    /* Կրիտիկական CSS վերևի մասի համար */
    body { margin: 0; }
    h1 { գույնը՝ կապույտ; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Կոդի բաժանում (Code Splitting): JavaScript բանդլի բաժանում ավելի փոքր մասերի, որոնք բեռնվում են ըստ անհրաժեշտության:

  // Օրինակ՝ JavaScript բանդլի բաժանում ըստ անհրաժեշտության
  import('./module.js').then(module => {
    // օգտագործել մոդուլը
  });
  

Առավելություններ՝

• Բարելավում է ընկալվող կատարողականությունը: Օգտվողը տեսնում է բովանդակությունը ավելի արագ, ինչը ստեղծում է ավելի արագ բեռնումի զգացում:
• Նվազում է First Contentful Paint (FCP) և Largest Contentful Paint (LCP): Մետրիկներ, որոնք արտացոլում են բեռնում արագությունը:
• Բարելավում է SEO-ն: Որոնողական համակարգերը կարող են ավելի արագ ինդեքսավորել բովանդակությունը:
• Զտում է տրաֆիկը: Հատկապես անուշադրության բեռնումում:

Հիմնական գաղափարը՝ օգտվողին հնարավորինս շուտ տրամադրել օգտակար բովանդակություն, իսկ հետո աստիճանաբար բեռնել մնացորդը՝ էջի ռենդերումը չխոչընդոտելու համար։