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

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

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

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

  html

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

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

  javascript

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

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

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