Критический путь рендеринга

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

После открытия страницы браузер не отображает её мгновенно. Он последовательно получает данные с сервера, анализирует HTML-документ, загружает CSS, выполняет JavaScript, формирует структуру страницы и только после этого отображает готовый интерфейс.

Упрощённо критический путь рендеринга состоит из нескольких этапов:

1. Загрузка HTML-документа.
2. Построение DOM-дерева.
3. Загрузка и обработка CSS.
4. Формирование CSSOM.
5. Объединение DOM и CSSOM в Render Tree.
6. Расчёт расположения элементов (Layout).
7. Отрисовка страницы (Paint) и вывод её на экран.

На скорость прохождения Critical Rendering Path влияют:

• объём HTML-, CSS- и JavaScript-кода;
• количество подключаемых файлов;
• скорость ответа сервера;
• использование сторонних библиотек;
• размер изображений;
• применение ленивой загрузки (Lazy Loading);
• настройка кэширования и CDN.

Если на одном из этапов возникает задержка, пользователь дольше ожидает появления содержимого страницы. Особенно негативно на производительность влияют блокирующие CSS- и JavaScript-файлы, которые браузер должен обработать до начала отображения интерфейса.

Оптимизация критического пути рендеринга включает:

• минимизацию и сжатие HTML, CSS и JavaScript;
• удаление неиспользуемого кода;
• отложенную загрузку второстепенных ресурсов;
• использование асинхронной загрузки скриптов;
• оптимизацию изображений;
• сокращение количества сетевых запросов.