Рендерингии пешрафта чӣ аст?

Рендерингии пешрафта — ин маҷмӯи техникҳо, ки барои беҳтар кардани иҷрои вебсафҳа тавассути намоиши тадриҷии мундариҷа ба корбар равона шудаанд, то ки пурра боркунии онро анҷом диҳад. Ин иллюзияи боркунии тезтарро эҷод мекунад ва иҷрои эҳсосшавандаро баланд мебардорад.

Техникҳои асосӣ:

• Лозимӣ боркунӣ (Lazy Loading): Боркунии захираҳо (тасвирҳо, видеоҳо, скриптҳо) танҳо вақте ки онҳо дар минтақаи тамошо (viewport) корбар пайдо мешаванд ё вақте ки корбар бо саҳифа ҳамкорӣ мекунад.

  // Намунаи лозимӣ боркунӣ бо истифода аз 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-ро бор мекунад ва парс мекунад. Намунаҳои рамкҳо: Next.js, Nuxt.js.

• Рендеринг бо афзалият барои CSSи критикӣ (Critical CSS): Гузаронидан ва инлайнинг CSS, ки барои намоиши қисми болоии саҳифа (above-the-fold content) зарур аст, то ки браузер зудтар намоиш диҳад. Боқӣ CSS асинхрон бор карда мешавад.

  <!-- Намунаи инлайнинг CSSи критикӣ -->
  <style>
    /* CSSи критикӣ барои қисми болоии саҳифа */
    body { margin: 0; }
    h1 { ранг: кабуд; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Тақсим кардани коди (Code Splitting): Тақсим кардани бандли JavaScript ба қисмҳои хурдтар, ки мувофиқи эҳтиёҷ бор карда мешаванд. Ин андозаи боркунии ибтидоиро кам мекунад. Дар SPA рамзҳо истифода мешаванд, мисли React, Vue, Angular.

Манфиатҳои рендерингии пешрафта:

• Беҳтар кардани иҷрои эҳсосшаванда: Корбар мундариҷаро зудтар мебинад, ки ҳисси боркунии тезтарро эҷод мекунад.
• Кам кардани First Contentful Paint (FCP) ва Largest Contentful Paint (LCP): Метрикҳо, ки суръати боркунии мундариҷаи диданиро нишон медиҳанд.
• Беҳтар кардани SEO: Ҷустуҷӯҳо метавонанд мундариҷаро зудтар индекс кунанд.
• Ҳифзи трафик: Хусусияти лозимӣ боркунии тадриҷӣ.

Нақшаи асосӣ — ба корбар мундариҷаи муфидро ҳарчи зудтар пешниҳод кардан ва сипас ба тадриҷ бор кардани дигар қисмҳо, то ки боркунии саҳифа банд нашавад.