Skip to main content

Critical render path

Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.

Основные этапы критического пути рендеринга:​

  1. Загрузка HTML:
    • Браузер загружает HTML-документ и начинает его парсить.
    • Во время парсинга браузер встречает ссылки на внешние ресурсы (CSS, JavaScript, изображения) и начинает их загружать.
  2. Построение DOM (Document Object Model):
    • Браузер преобразует HTML в дерево DOM.
    • Каждый HTML-элемент становится узлом в DOM.
  3. Загрузка CSS:
    • Браузер загружает CSS-файлы и встроенные стили (<style>).
    • CSS парсится и преобразуется в CSSOM (CSS Object Model).
  4. Построение CSSOM (CSS Object Model):
    • CSSOM представляет собой дерево стилей, где каждый узел соответствует CSS-правилу.
    • CSSOM используется для определения стилей элементов.
  5. Создание дерева рендеринга (Render Tree):
    • Браузер объединяет DOM и CSSOM в дерево рендеринга.
    • Дерево рендеринга содержит только видимые элементы (например, элементы с display: none не включаются).
  6. Компоновка (Layout):
    • Браузер рассчитывает положение и размеры каждого элемента на странице.
    • Этот процесс также называется рефлоу (reflow).
  7. Отрисовка (Painting):
    • Браузер отрисовывает пиксели на экране на основе данных из дерева рендеринга.
    • Этот процесс включает в себя растеризацию (rasterization) и отрисовку слоев.
  8. Композиция (Composition):
    • Браузер объединяет слои (например, элементы с position: fixed или анимации) для финального отображения.

Critical render path

Как оптимизировать критический путь рендеринга?​

Оптимизация CRP направлена на ускорение загрузки и отображения контента, особенно "выше сгиба" (above the fold). Основные подходы:

  1. Минимизация размера файлов:
    • Сжимайте HTML, CSS и JavaScript (например, с помощью Gzip или Brotli).
    • Удаляйте лишние пробелы, комментарии и неиспользуемый код.
  2. Уменьшение количества ресурсов:
    • Объединяйте CSS и JavaScript-файлы.
    • Используйте встроенные стили для критического CSS (Critical CSS).
  3. Оптимизация загрузки CSS:
    • Разделяйте CSS на критический и некритический.
    • Используйте media-атрибуты для загрузки только необходимых стилей:
  4. Оптимизация загрузки JavaScript:
    • Используйте атрибуты async или defer для загрузки скриптов без блокировки рендеринга:
    • Переносите скрипты в конец документа (перед закрывающим тегом </body>).
  5. Приоритизация загрузки ресурсов:
    • Используйте <link rel="preload"> для приоритетной загрузки критических ресурсов:
  6. Оптимизация изображений:
    • Используйте современные форматы (WebP, AVIF).
    • Сжимайте изображения и используйте srcset для адаптивной загрузки.
  7. Минимизация количества рефлоу и репинтов:
    • Избегайте изменения стилей, которые вызывают рефлоу (например, width, height, margin).
    • Используйте transform и opacity для анимаций, так как они не вызывают рефлоу.
  8. Использование кеширования:
    • Настройте кеширование статических ресурсов (CSS, JS, изображения) на стороне сервера.

Пример оптимизации CRP:​

  1. Критический CSS:
    • Встраивайте стили, необходимые для отображения контента "выше", прямо в HTML
  2. Асинхронная загрузка скриптов:
    • Используйте async или defer для загрузки JavaScript
  3. Предзагрузка шрифтов:
    • Загружайте шрифты заранее, чтобы избежать задержек

Почему это важно?​

  • Ускорение загрузки: Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP).
  • Улучшение пользовательского опыта: Быстрая загрузка страницы повышает удовлетворенность пользователей.
  • SEO: Скорость загрузки страницы влияет на ранжирование в поисковых системах.

🚀 Источник: DeepSeek
🚀 Источник: https://www.youtube.com/watch?v=Ff_IZrs4GcY