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

Աջակցվող բովանդակության առաջադեմ ռենդերինգը՝ տեխնիկա է, որը բարձրացնում է վեբ էջերի արտադրողականությունը՝ այնպիսի կերպ, որ բովանդակությունը բեռնվում և ցուցադրվում է փուլերով, ոչ թե ամբողջությամբ միանգամից։ Սա բարելավում է ընկալվող արտադրողականությունը և ինտերակտիվությունը, թույլ տալով օգտվողին տեսնել և փոխազդել էջի մասի հետ մինչև բոլոր ռեսուրսների ամբողջական բեռնումը։

Հիմնական մոտեցումները՝

• Անվճար բեռնում (Lazy Loading): Բեռնում պատկերներ, տեսանյութեր կամ այլ ռեսուրսային տարրեր միայն այն ժամանակ, երբ դրանք դառնում են տեսանելի օգտվողի viewport-ում։

  <!-- lazy loading պատկեր -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Նկարագրություն պատկերին">
  

• Տարածքային ռենդերինգ (Streaming Rendering): HTML կոդի ուղարկում մասերով, թույլ տալով բրաուզերին սկսել վերլուծել և ռենդերել մինչև ամբողջ էջի ստացումը։

• Ռենդերինգ սերվերից (SSR) կամ Հիդրատացիա (Hydration): Սկզբնական HTML-ի ստեղծում սերվերից՝ արագ ցուցադրման համար, ապա "ապրել" ստատիկ մարկափը հաճախորդի կողմից JavaScript-ի միջոցով՝ ինտերակտիվության համար։

  // Հիդրատացիայի կոնցեպտի օրինակ
  // Հաճախորդի կողմից
  const appElement = document.getElementById('app');
  // Vue/React/etc. հավելվածի մոնտաժում արդեն գոյություն ունեցող DOM կառուցվածքի վրա
  Vue.createApp(App).mount(appElement);
  // կամ React.hydrate(<App />, appElement);
  

• Տեսանելի բովանդակության առաջնահերթություն (Above-the-fold rendering): Բեռնում և ռենդերինգ տեսանելի բովանդակության առաջին մասի համար (առանց սքրոլինգի), մնացածի հետ հետաձգված բեռնումով։

Աջակցվող առաջադեմ ռենդերինգը բարելավում է Web Vitals հիմնական մետրիկաները՝

• Largest Contentful Paint (LCP): Արագացնում է ամենամեծ տարրի ցուցադրմանը։
• First Contentful Paint (FCP): Կրճատում է առաջին բովանդակության հայտնվելու ժամանակը։
• Cumulative Layout Shift (CLS): Չնայած ոչ ուղղակի, ճիշտ օգտագործումը placeholder-ների և lazy loading-ի կարող է օգնել նվազեցնել անսպասելի բովանդակության տեղափոխումները։