Proqressiv render nədir?

Proqressiv renderləmə veb səhifələrin performansını artırmaq üçün texnikadır; burada məzmun mərhələlər şəklində yüklənir və göstərilir, bütün məzmun bir anda deyil. Bu, performansın qavranılmasını və interaktivliyi yaxşılaşdırır, istifadəçiyə səhifənin bir hissəsini görməyə və onunla qarşılıqlı əlaqəyə girməyə imkan verir, bütün resurslar tam yüklənmədən əvvəl.

Əsas yanaşmalar:

• Lazımsız Yükləmə (Lazy Loading): Şəkillər, videolar və ya digər resurs tələbatlı elementlər yalnız istifadəçinin görünüş sahəsinə daxil olduqda yüklənir.

  <!-- Lazy loading ilə şəkil -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Şəkil təsviri">
  

• Axın əsaslı renderləmə: HTML kodunu hissələrə göndərmək, brauzerin bütün səhifəni almadan əvvəl analiz və render etməyə başlamasına imkan verir.

• Server tərəfi renderləmə (SSR) və ya Hidratasiya: Məzmunun sürətli göstərilməsi üçün ilkin HTML serverdə yaradılır, sonra JavaScript ilə statik quruluş "canlandırılır".

  // Hidratasiya konseptinin nümunəsi
  // Müştəri tərəfində
  const appElement = document.getElementById('app');
  // Vue/React/etc. tətbiqini mövcud DOM strukturuna yerləşdirin
  Vue.createApp(App).mount(appElement);
  // və ya React.hydrate(<App />, appElement);
  

• Görünən məzmunun prioritetləşdirilməsi (Above-the-fold renderləmə): Səhifənin ilk hissəsində görünən məzmunu yükləmək və render etmək (scroll etmədən), qalanını gecikdirilmiş yüklə.

Proqressiv renderləmə tətbiqi Web Vitals əsas metriklərini yaxşılaşdırır:

• Largest Contentful Paint (LCP): Ən böyük elementin göstərilməsini sürətləndirir.
• First Contentful Paint (FCP): İlk məzmunun görünmə vaxtını azaldır.
• Cumulative Layout Shift (CLS): Düzgün placeholders və lazy loading istifadə edilərsə, gözlənilməz məzmun dəyişikliklərini azaltmağa kömək edə bilər.