Šta je progresivno renderovanje?

Прогресивно рендерирање је скуп техника усмерених на побољшање перформанси веб странице постепеним приказивањем садржаја кориснику, док не заврши потпуно учитавање. Ово ствара илузију бржег учитавања и повећава перципиране перформансе.

Кључне технике:

• Ленино учитавање (Lazy Loading): Учитавање ресурса (слика, видео, скрипти) само када постану видљиви у области прегледа (viewport) корисника или када корисник интерагује са страницом.

  // Пример ленивог учитавања слика помоћу Intersection Observer API
  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): Рендеровање почетног HTML-а на серверу пре слања клијенту. Ово омогућава кориснику да види садржај брже, док прегледач учитава и парсира JavaScript. Примери фрејмворка: Next.js, Nuxt.js.

• Рендерирање са приоритетом критичног CSS (Critical CSS): Извлачење и инлајновање CSS-а који је неопходан за приказивање врха странице (above-the-fold content), како би прегледач могао брзо да изрисује почетни изглед. Цео остали CSS се учитава асинхроно.

  <!-- Пример инлајновања критичног CSS -->
  <style>
    /* Критични CSS за врх странице */
    body { margin: 0; }
    h1 { боја: плаво; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Дељење кода (Code Splitting): Дељење JavaScript пакета на мање делове који се учитавају по потреби. Ово смањује величину почетног учитавања. Популарно у SPA фрејмворцима као што су React, Vue, Angular.

Предности прогресивног рендерирања:

• Побољшање перципиране перформансе: Корисник види садржај брже, што ствара утисак бржег учитавања.
• Смањење First Contentful Paint (FCP) и Largest Contentful Paint (LCP): Метрике које одражавају брзину учитавања видљивог садржаја.
• Побољшање SEO: Трагачи могу брже индексирати садржај.
• Уштеда саобраћаја: Посебно при леном учитавању.

Основна идеја је да кориснику што пре пружимо користан садржај, а затим постепено учитавамо остатак како бисмо избегли блокирање рендеровања странице.