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

Question

На первую отрисовку влияют скорость сети, время ответа сервера, объём и порядок загрузки CSS и JavaScript, а также структура HTML. Браузер должен получить HTML, построить DOM и CSSOM, после чего сформировать render tree. Только затем происходит layout и первая отрисовка. Чем меньше блокирующих ресурсов, тем быстрее пользователь увидит страницу.

YeaHub · Accepted Answer

Первая отрисовка страницы — результат последовательного выполнения нескольких этапов загрузки и обработки ресурсов.1) Сетевые факторыСначала браузер должен получить данные.DNS lookupTCP/TLS соединениеВремя ответа сервера (TTFB)Эти этапы могут занимать значительную часть времени при медленной сети.2) HTML и построение DOMПосле получения HTML:Браузер парсит документ.Формирует DOM.Находит внешние ресурсы (CSS, JS, изображения).Без DOM невозможно начать построение render tree.3) CSS и CSSOMCSS влияет на первую отрисовку напрямую:Браузер должен получить CSS.Построить CSSOM.Объединить DOM и CSSOM.До этого момента первая отрисовка обычно откладывается.4) JavaScriptJavaScript может:Блокировать парсинг (обычные script).Изменять DOM до первой отрисовки.Замедлять выполнение main thread.Поэтому тяжёлые скрипты увеличивают время First Paint.5) Layout и PaintПосле готовности render tree:Рассчитываются размеры и позиции.Выполняется первая отрисовка.6) Практические факторы, которые чаще всего тормозят первую отрисовкуБольшие CSS-файлы.Блокирующие script.Медленный сервер.Большой HTML.Вывод: первая отрисовка зависит от всей цепочки — от сети и сервера до CSS и JavaScript. Основные задержки обычно дают блокирующие ресурсы и время ответа сервера.