Прогрессивный рендеринг — это методика оптимизации скорости загрузки и отображения веб-страницы, при которой содержимое загружается и отображается поэтапно, а не полностью сразу.
Его основные преимущества:
- Более быстрая отрисовка первого значимого контента (First Meaningful Paint).
- Улучшенное восприятие скорости загрузки пользователем.
- Снижение времени до интерактивности (Time to Interactive).
Основные техники прогрессивного рендеринга включают:
- Ленивая загрузка (Lazy Loading): Откладывание загрузки несущественных ресурсов (например, изображений или видео) до тех пор, пока они не понадобятся пользователю (пока он не пролистает страницу до них).
html
- Рендеринг на стороне сервера (Server-Side Rendering - SSR): Формирование HTML-страницы на сервере и отправка уже отрисованного контента браузеру.
javascript
- Рендеринг на стороне клиента (Client-Side Rendering - CSR) с гидратацией: Браузер получает минимальный HTML и JavaScript. JavaScript затем загружает данные и полностью рендерит страницу в браузере. Гидратация — это процесс аттачинга обработчиков событий к уже отрисованному SSR-контенту на клиенте.
- Потоковая передача HTML (Streaming HTML): Отправка HTML частями по мере его генерации на сервере, что позволяет браузеру начать парсинг и рендеринг еще до полной загрузки всего документа.
html
- Критические CSS / CSS-инлайн (Critical CSS / Inline Critical CSS): Инлайн-встраивание CSS-стилей, необходимых для отображения видимой части страницы (Above the Fold), чтобы ускорить первоначальную отрисовку. Остальные стили загружаются асинхронно.
| Техника | Описание | Преимущества | Недостатки |
|---|
| Ленивая загрузка | Отложенная загрузка ресурсов вне видимой области | Быстрая загрузка видимого контента | Может требовать JS для реализации |
| SSR | Рендеринг на сервере, отправка готового HTML | Быстрая отрисовка первого контента, SEO-дружелюбность | Увеличение нагрузки на сервер |
| CSR с гидратацией | Начальный рендеринг на клиенте с последующей гидрацией SSR контента | Динамичные приложения | Долгая загрузка и интерактивность без SSR |
| Потоковая передача HTML | Отправка HTML частями | Быстрый старт парсинга | Зависит от серверной реализации |
| Критические CSS | Инлайн-встраивание стилей для видимой части | Быстрая отрисовка видимой части | Требует инструментов для выделения критического CSS |
Прогрессивный рендеринг — это комбинация этих и других техник, направленная на улучшение пользовательского опыта за счет ускорения отрисовки веб-страницы.