Progressif render nedir?

İlerleyici renderleme, web sayfalarının performansını artırmak için kullanılan bir tekniktir; içerik aşamalar halinde yüklenir ve gösterilir, tümü bir kerede değil. Bu, algılanan performansı ve etkileşimi artırır, kullanıcının sayfanın tamamı yüklenmeden önce bir kısmını görmesine ve etkileşime girmesine olanak tanır.

Ana yaklaşımlar:

• Tembel Yükleme (Lazy Loading): Görüntüler, videolar veya diğer kaynak yoğun öğeler, yalnızca görünüm alanında görünür hale geldiklerinde yüklenir.

  <!-- lazy loading ile görüntü -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Görüntü açıklaması">
  

• Akışkan renderleme: HTML kodu parçalara gönderilir, böylece tarayıcı tüm sayfayı almadan önce analiz etmeye ve render etmeye başlayabilir.

• Sunucu tarafı renderleme (SSR) veya Hidratasyon: İçeriğin hızlı görüntülenmesi için başlangıç HTML'si sunucuda oluşturulur, ardından JavaScript kullanılarak statik yapı canlandırılır.

  // Hidratasyon kavramı örneği
  // Müşteri tarafında
  const appElement = document.getElementById('app');
  // Vue/React/etc. uygulamasını mevcut DOM yapısına monte et
  Vue.createApp(App).mount(appElement);
  // veya React.hydrate(<App />, appElement);
  

• Görünür içeriğin önceliklendirilmesi (Above-the-fold renderleme): Sayfanın ilk bölümünde görünen içeriğin yüklenmesi ve render edilmesi (kaydırmadan), kalan içeriğin gecikmeli yüklenmesi.

İlerleyici renderleme kullanımı, Web Vitals temel metriklerini iyileştirir:

• Largest Contentful Paint (LCP): En büyük öğenin gösterimini hızlandırır.
• First Contentful Paint (FCP): İlk içeriğin görünmesine kadar geçen süreyi azaltır.
• Cumulative Layout Shift (CLS): Doğrudan olmasa da, placeholders ve lazy loading doğru kullanımı, beklenmedik içerik kaymalarını azaltmaya yardımcı olabilir.