Что влияет на первую отрисовку страницы?

Первая отрисовка страницы — результат последовательного выполнения нескольких этапов загрузки и обработки ресурсов.

1) Сетевые факторы

Сначала браузер должен получить данные.

1. DNS lookup

2. TCP/TLS соединение

3. Время ответа сервера (TTFB)

Эти этапы могут занимать значительную часть времени при медленной сети.

2) HTML и построение DOM

После получения HTML:

1. Браузер парсит документ.

2. Формирует DOM.

3. Находит внешние ресурсы (CSS, JS, изображения).

Без DOM невозможно начать построение render tree.

3) CSS и CSSOM

CSS влияет на первую отрисовку напрямую:

1. Браузер должен получить CSS.

2. Построить CSSOM.

3. Объединить DOM и CSSOM.

До этого момента первая отрисовка обычно откладывается.

4) JavaScript

JavaScript может:

1. Блокировать парсинг (обычные script).

2. Изменять DOM до первой отрисовки.

3. Замедлять выполнение main thread.

Поэтому тяжёлые скрипты увеличивают время First Paint.

5) Layout и Paint

После готовности render tree:

1. Рассчитываются размеры и позиции.

2. Выполняется первая отрисовка.

6) Практические факторы, которые чаще всего тормозят первую отрисовку

1. Большие CSS-файлы.

2. Блокирующие script.

3. Медленный сервер.

4. Большой HTML.

Вывод: первая отрисовка зависит от всей цепочки — от сети и сервера до CSS и JavaScript. Основные задержки обычно дают блокирующие ресурсы и время ответа сервера.