Progressiv rendering nima?

Progressiv rendering — bu sahifa ish faoliyatini yaxshilash uchun maqsad qilingan texnikalar to'plamidir, bu texnikalar foydalanuvchiga kontentni bosqichma-bosqich ko'rsatish orqali amalga oshiriladi va to'liq yuklash tugaguniga qadar davom etadi. Bu, yuklash tezligini yaxshilash va qabul qilinadigan ishlashni oshirish uchun illyuziya yaratadi.

Asosiy texnikalar:

• Lazy Loading (Lazily yuklash): Resurslarni (rasmlar, videolar, skriptlar) faqat foydalanuvchi ko'rish maydoniga kirganida yoki u saytda harakat qilganda yuklash.

  // Intersection Observer API yordamida rasmni kechiktirib yuklash misoli
  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): Birinchi HTML-ni serverda render qilish va uni mijozga yuborish. Bu foydalanuvchiga kontentni tezroq ko'rish imkonini beradi, browser JavaScript-ni yuklayotganda va tahlil qilayotganda. Misol uchun: Next.js, Nuxt.js.

• Kritik CSS bilan render qilish (Critical CSS): Sahifaning yuqori qismi (above-the-fold content) uchun zarur bo'lgan CSS-ni chiqarish va inline qilish, shunda browser dastlabki ko'rinishni tezda chizishi mumkin. Qolgan CSS asinxron tarzda yuklanadi.

  <!-- Kritikal CSS-ni inline qilish misoli -->
  <style>
    /* Sahifaning yuqori qismi uchun kritik CSS */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Kodlarni bo'lish (Code Splitting): JavaScript paketini ehtiyoj bo'lsa, kichikroq qismlarga bo'lish. Bu boshlang'ich yuklash hajmini kamaytiradi. SPA frameworklarida mashhur: React, Vue, Angular.

Progressiv renderning afzalliklari:

• Qabul qilinadigan ishlashni yaxshilash: Foydalanuvchi kontentni tezroq ko'radi, bu esa yuklash tezligini oshiradi.
• First Contentful Paint (FCP) va Largest Contentful Paint (LCP) ni kamaytirish: Bu metrikalar, ko'rinadigan kontentning yuklanish tezligini aks ettiradi.
• SEO ni yaxshilash: Qidiruv tizimlari kontentni tezroq indekslay oladi.
• Trafikni tejash: Ayniqsa, lazy loading bilan.

Asosiy g'oya — foydalanuvchiga imkon qadar tezroq foydali kontent taqdim etish va qolganini asta-sekin yuklab, sahifa chizilishini to'xtatmaslik.