Какво е прогресивно рендериране?

Прогресивното рендериране е техника за подобряване на производителността на уеб страниците, при която съдържанието се зарежда и показва на етапи, а не наведнъж. Това подобрява възприеманата производителност и интерактивност, като позволява на потребителя да вижда и взаимодейства с част от страницата преди цялото съдържание да бъде напълно заредено.

Основни подходи:

• Lazy Loading (бавна зареждане): Зареждане на изображения, видеа или други ресурсоемки елементи само когато станат видими в изгледа на потребителя.

  <!-- изображение с lazy loading -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Описание на изображението">
  

• Streaming rendering: Изпращане на HTML кода на части, позволявайки на браузъра да започне анализ и рендеринг преди да получи цялата страница.

• Server-side rendering (SSR) или Hydration: Генериране на началния HTML на сървъра за бързо показване на съдържанието, след което "оживяване" на статичната структура на клиента с помощта на JavaScript за интерактивност.

  // Пример за концепция за хидратация
  // На клиента
  const appElement = document.getElementById('app');
  // Монтиране на приложението Vue/React/и др. върху съществуващата DOM структура
  Vue.createApp(App).mount(appElement);
  // или React.hydrate(<App />, appElement);
  

• Приоритизиране на видимото съдържание (Above-the-fold rendering): Зареждане и рендериране на съдържанието, видимо в първата част на страницата (без превъртане), с отложено зареждане на останалото.

Прилагането на прогресивно рендериране подобрява основните метрики Web Vitals:

• Largest Contentful Paint (LCP): Ускорява показването на най-големия елемент.
• First Contentful Paint (FCP): Намалява времето до появата на първото съдържание.
• Cumulative Layout Shift (CLS): Въпреки че не е директно, правилната употреба на placeholders и lazy loading може да помогне за намаляване на неочакваните премествания на съдържанието.