Что такое прогрессивный рендеринг?

Прогрессивный рендеринг — техника повышения производительности веб-страниц, при которой контент загружается и отображается поэтапно, а не сразу целиком. Это улучшает воспринимаемую производительность и интерактивность, позволяя пользователю видеть и взаимодействовать с частью страницы до полной загрузки всех ресурсов.

Основные подходы:

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

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

• Потоковый рендеринг (Streaming Rendering): Отправка HTML-кода частями, позволяя браузеру начать парсинг и рендеринг до получения всей страницы.

• Рендеринг на стороне сервера (SSR) или Гидратация (Hydration): Генерация начального HTML на сервере для быстрого отображения контента, затем "оживление" статической разметки на клиенте с помощью JavaScript для интерактивности.

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

• Prioritizing visible content (Above-the-fold rendering): Загрузка и рендеринг контента, видимого в первой части страницы (не прокручивая), с отложенной загрузкой остального.

Применение прогрессивного рендеринга улучшает основные метрики Web Vitals:

• Largest Contentful Paint (LCP): Ускоряется отображение самого крупного элемента.
• First Contentful Paint (FCP): Уменьшается время до появления первого контента.
• Cumulative Layout Shift (CLS): Хотя не напрямую, грамотное использование placeholders и lazy loading может помочь уменьшить неожиданные сдвиги контента.