Czym jest progresywne renderowanie?

Progresywne renderowanie to zbiór technik mających na celu poprawę wydajności strony internetowej poprzez stopniowe wyświetlanie treści użytkownikowi, aż do zakończenia pełnego ładowania. Tworzy to iluzję szybszego ładowania i zwiększa postrzeganą wydajność.

Kluczowe techniki:

• Lazy Loading (leniwe ładowanie): Ładowanie zasobów (obrazów, wideo, skryptów) tylko wtedy, gdy stają się widoczne w obszarze widoku użytkownika lub gdy użytkownik wchodzi w interakcję ze stroną.

  // Przykład leniwego ładowania obrazów za pomocą API Intersection Observer
  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);
  });
  

• Renderowanie po stronie serwera (Server-Side Rendering - SSR): Renderowanie początkowego HTML na serwerze przed wysłaniem do klienta. Pozwala użytkownikowi zobaczyć treść szybciej, podczas gdy przeglądarka ładuje i analizuje JavaScript. Przykładowe frameworki: Next.js, Nuxt.js.

• Renderowanie z priorytetem krytycznego CSS (Critical CSS): Ekstrakcja i wstawianie CSS niezbędnego do wyświetlenia górnej części strony (above-the-fold content), aby przeglądarka mogła szybko wyrenderować początkowy widok. Pozostały CSS jest ładowany asynchronicznie.

  <!-- Przykład wstawiania krytycznego CSS inline -->
  <style>
    /* Krytyczny CSS dla górnej części strony */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Podział kodu (Code Splitting): Dzielić pakiet JavaScript na mniejsze części, które są ładowane w razie potrzeby. Zmniejsza to rozmiar początkowego ładowania. Popularne w frameworkach SPA, takich jak React, Vue, Angular.

Zalety progresywnego renderowania:

• Poprawa postrzeganej wydajności: Użytkownik widzi treść szybciej, co tworzy wrażenie szybszego ładowania.
• Zmniejszenie First Contentful Paint (FCP) i Largest Contentful Paint (LCP): Metryki odzwierciedlające szybkość ładowania widocznej treści.
• Poprawa SEO: Wyszukiwarki mogą szybciej indeksować treść.
• Oszczędność transferu: Szczególnie przy leniwym ładowaniu.

Główną ideą jest dostarczenie użytkownikowi przydatnej treści tak szybko, jak to możliwe, a następnie stopniowe ładowanie reszty, aby nie blokować renderowania strony.