Progressif render nedir?

İlerleyici renderleme, içeriği kademeli olarak kullanıcıya göstererek web sayfasının performansını artırmaya yönelik teknikler bütünüdür ve tam yükleme tamamlanana kadar devam eder. Bu, daha hızlı yüklenme izlenimi yaratır ve algılanan performansı artırır.

Ana teknikler:

• Tembel Yükleme (Lazy Loading): Kaynakları (görseller, videolar, betikler) yalnızca kullanıcının görünüm alanında görünür hale geldiğinde veya kullanıcı sayfayla etkileşime geçtiğinde yükleme.

  // Intersection Observer API kullanarak görsellerin tembel yüklenmesine örnek
  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);
  });
  

• Sunucu Tarafı Renderleme (Server-Side Rendering - SSR): İlk HTML'nin sunucuda render edilip istemciye gönderilmesi. Bu, kullanıcının içeriği daha hızlı görmesini sağlar ve tarayıcı JavaScript'i yüklerken ve analiz ederken devam eder. Örnek frameworkler: Next.js, Nuxt.js.

• Kritik CSS ile renderleme (Critical CSS): Sayfanın üst kısmını (above-the-fold içeriği) göstermek için gereken CSS'nin çıkarılması ve inline edilmesi, böylece tarayıcı hızlıca ilk görünümü çizebilir. Diğer CSS asenkron olarak yüklenir.

  <!-- Kritik CSS'nin inline örneği -->
  <style>
    /* Sayfanın üst kısmı için kritik CSS */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Kod Bölme (Code Splitting): JavaScript paketini ihtiyaç duyulduğunda yüklenen daha küçük parçalara ayırma. Bu, başlangıç yükleme boyutunu azaltır. React, Vue, Angular gibi SPA framework'lerinde popülerdir.

İlerleyici renderlemenin avantajları:

• Algılanan performansın iyileştirilmesi: Kullanıcı içeriği daha hızlı görür, bu da daha hızlı yükleniyor izlenimi yaratır.
• First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) metriklerinin azaltılması: Görünen içeriğin yüklenme hızını yansıtan metrikler.
• SEO'nun iyileştirilmesi: Arama motorları içeriği daha hızlı indeksleyebilir.
• Veri tasarrufu: Özellikle tembel yüklemede.

Ana fikir, kullanıcıya mümkün olan en kısa sürede faydalı içerik sağlamak ve ardından kalanını kademeli olarak yükleyerek sayfa renderını engellememektir.