Этапы загрузки сайта: от DNS до LCP — что происходит за 2 секунды

Ваш клиент набирает адрес сайта в телефоне. Нажимает Enter. И ждет. Что происходит в эти 1,5-3 секунды? Десятки технических операций, от каждой из которых зависит — уйдет клиент или купит. Если вы маркетолог или владелец бизнеса, эта статья переведет техническую магию в деньги.

Это не абстрактная цифра. Это каждый второй человек, на привлечение которого вы уже потратили рекламный бюджет. Рассчитать, сколько стоит привлечение одного клиента, можно в нашем калькуляторе CAC — и вы поймете, почему каждая лишняя секунда загрузки буквально сжигает деньги.

Как устроена загрузка: ресторанная метафора

Прежде чем нырять в технику, представьте загрузку сайта как поход в ресторан.

Теперь разберем каждый «этап обслуживания» по порядку.

Этап 1. DNS Lookup — найти адрес ресторана

Что происходит. Браузер не знает, где физически находится сервер сайта. Он знает только доменное имя — например, example.ru. DNS (Domain Name System) — это телефонная книга интернета: она переводит человеческий адрес в числовой IP-адрес сервера.

Сколько занимает: 20-120 мс, иногда до 200 мс для удаленных DNS-серверов.

Что это значит для бизнеса. Если ваш DNS-провайдер медленный, каждый первый визит на сайт начинается с задержки. Решение простое: используйте быстрые DNS-сервисы (Cloudflare, Google DNS, или российские аналоги).

Этап 2. TCP Connection — сесть за столик

Что происходит. Браузер и сервер обмениваются «рукопожатием» (TCP handshake) — три сообщения туда-обратно, чтобы договориться о соединении. Это как бронирование: «Я хочу поговорить» — «Ок, давай» — «Отлично, начинаем».

Сколько занимает: 10-50 мс при хорошей связи, до 150+ мс при плохой.

Этап 3. TLS/SSL Handshake — показать паспорт

Что происходит. Если сайт работает по HTTPS (а он должен — Google снижает позиции HTTP-сайтов), добавляется еще один «диалог» — шифрование. Браузер и сервер договариваются о ключах безопасности.

Сколько занимает: 50-150 мс. С TLS 1.3 (современный стандарт) — быстрее, потому что нужен всего один обмен вместо двух.

Для бизнеса. Если у вас до сих пор HTTP, вы теряете и безопасность, и SEO-позиции. А если сертификат настроен неправильно, каждый посетитель тратит лишние миллисекунды на шифрование.

Этап 4. TTFB — когда официант принес первый ответ

Time to First Byte — время от запроса браузера до получения первого байта ответа от сервера. Это ключевая метрика, которую Google использует как сигнал ранжирования.

Сколько занимает: хороший результат — до 800 мс, отличный — до 200 мс.

Что влияет на TTFB:

• Расстояние до сервера (сервер в Москве vs. Франкфурте для российского пользователя)
• Время обработки на сервере (тяжелые запросы к базе данных, неоптимизированный код)
• Использование CDN (сеть доставки контента)
• Кеширование (статическая страница отдается за 50 мс, динамическая генерируется за 500+ мс)

Критически важно: TTFB > 800 мс — это сигнал о том, что сервер работает медленно. Googlebot тоже тратит время на ожидание ответа при сканировании, что влияет на crawl budget и скорость индексации. По данным Google, хороший TTFB не должен превышать 800 мс для 75% посещений.

Посмотрите, как обстоят дела с TTFB у сайтов вашей отрасли — в наших рейтингах скорости. Например, рейтинг скорости сайтов банков России показывает разброс от 300 мс до 3+ секунд внутри одной индустрии.

Визуализация: все сетевые этапы на одной шкале

Итого типичное время: 500 мс — 2500 мс от клика до видимого контента. У хорошего сайта — менее 1.5 секунды. У плохого — 5+ секунд.

Этап 5. Загрузка и разбор HTML — чтение меню

Сервер отправляет HTML-документ. Браузер начинает его читать сверху вниз, строя DOM (Document Object Model) — дерево всех элементов страницы. Каждый заголовок, каждая картинка, каждая кнопка — узел в этом дереве.

Параллельно браузер обнаруживает ссылки на CSS-файлы, JavaScript, шрифты, картинки — и начинает их запрашивать.

Этап 6. CSS + CSSOM + Render Tree — оформление блюда

Браузер скачивает CSS (стили оформления) и строит CSSOM (CSS Object Model). Потом объединяет DOM и CSSOM в Render Tree — финальную карту того, что и как показать на экране.

Важный нюанс: CSS является render-blocking ресурсом. Пока браузер не скачает и не обработает все CSS — он не покажет ни одного пикселя. Поэтому тяжелые CSS-файлы напрямую замедляют появление контента.

Этап 7. Blocking Resources — пробка на кухне

Некоторые ресурсы блокируют рендеринг — браузер не может показать страницу, пока не обработает их:

• CSS в <head> — всегда блокирует (браузер не рисует без стилей)
• JavaScript без async/defer — блокирует парсинг HTML (браузер останавливается и выполняет скрипт)
• Шрифты — могут вызвать «мигание» текста (FOIT/FOUT)

Для бизнеса. Если ваш разработчик подключает 15 JS-скриптов в <head> без defer — он буквально заставляет браузер стоять в пробке, пока не загрузит и не выполнит каждый скрипт. Пользователь в это время видит белый экран.

Совет: попросите разработчика проверить, сколько render-blocking ресурсов на вашем сайте. Каждый лишний — это лишние сотни миллисекунд ожидания.

Этап 8. FCP — хлебная корзина на столе

First Contentful Paint — момент, когда браузер впервые показывает хоть что-то: текст, картинку, SVG. Это первый визуальный сигнал пользователю: «Сайт жив, подождите еще чуть-чуть».

По данным HTTP Archive, медианный FCP мобильных сайтов в 2024 году составил 2.4 секунды. Это значит, что половина интернета заставляет пользователей ждать дольше 2 секунд даже до первого визуального отклика.

Этап 9. LCP — главное блюдо на столе

Largest Contentful Paint — один из трех Core Web Vitals Google. Это момент, когда загружается самый крупный видимый элемент страницы: hero-картинка, заголовок, видео-баннер.

Что измеряет LCP:

• Блочные изображения (hero-баннеры, обложки товаров)
• Элементы <img>, <video> с постером
• Элементы с фоновыми картинками через CSS
• Крупные текстовые блоки (заголовки)

Деньги в цифрах. По исследованию Google/SOASTA, улучшение скорости мобильного сайта на 0.1 секунды увеличивает конверсию на 8% для ритейла и на 10% для сайтов путешествий. Посчитайте, сколько это в рублях для вашего бизнеса с помощью калькулятора конверсии.

Мы регулярно замеряем LCP сайтов в разных отраслях. Посмотрите, как обстоят дела в вашей нише: рейтинг скорости ТОП-100 сайтов России или рейтинг скорости сайтов FMCG-ритейлеров.

Этап 10. TTI и TBT — можно ли уже кликать?

Time to Interactive (TTI) — момент, когда страница не просто видна, но и реагирует на клики. До этого момента кнопки могут выглядеть активными, но при нажатии — ничего не происходит. Знакомо?

Total Blocking Time (TBT) — суммарное время, когда главный поток браузера был заблокирован JavaScript-задачами длиннее 50 мс. Чем больше TBT — тем дольше сайт «подвисает» при попытке взаимодействия.

Порог TBT: хороший результат — менее 200 мс, плохой — более 600 мс.

Главный виновник высокого TBT — тяжелый JavaScript. Аналитика, чаты, рекламные пиксели, виджеты соцсетей — каждый скрипт добавляет миллисекунды блокировки. У среднего e-commerce сайта — 30-50 сторонних скриптов. Каждый из них — камень на шее вашей производительности.

Этап 11. CLS — прыгающая тарелка

Cumulative Layout Shift — второй Core Web Vital. Измеряет, насколько контент «прыгает» во время загрузки. Баннер вдруг сдвигается вниз. Текст скачет, потому что загрузился шрифт. Кнопка «Купить» уехала, и пользователь кликнул на «Удалить из корзины».

Типичные причины высокого CLS:

• Картинки без указанных размеров (width/height)
• Рекламные баннеры, которые загружаются с задержкой
• Динамически вставляемый контент (попапы, уведомления)
• Веб-шрифты, которые меняют размер текста при загрузке

Для бизнеса. CLS > 0.25 — это не просто «некрасиво». Это реальные неправильные клики, случайные покупки, раздраженные пользователи. По данным Google, высокий CLS напрямую ухудшает пользовательский опыт и является одним из трёх Core Web Vitals, влияющих на ранжирование.

Этап 12. INP — насколько быстро сайт реагирует

Interaction to Next Paint (INP) — третий и новейший Core Web Vital. С марта 2024 Google заменил FID (First Input Delay) на INP. Разница принципиальная: FID измерял только первый клик, INP — все взаимодействия за весь визит.

INP отвечает на вопрос: когда пользователь кликает, тапает, нажимает клавишу — через сколько миллисекунд экран обновляется?

Почему INP важнее FID. Старый FID измерял только самый первый клик. Сайт мог отреагировать на первый клик за 30 мс, но на пятый (например, добавление в корзину) — за 800 мс. FID показывал «все хорошо», а пользователь бесился. INP честнее: он берет самое худшее взаимодействие (точнее, 98-й перцентиль).

Сводная таблица: пороги Core Web Vitals

Что каждый этап значит для денег

Давайте переведем техническую таблицу в бизнес-последствия.

TTFB > 800 мс — Google дает меньше трафика. Медленный сервер = ниже позиции в поиске. Если вы инвестируете в SEO и контент-маркетинг, но сервер отвечает медленно — вы буквально подрезаете сами себе крылья. Рассчитайте окупаемость вашего контент-маркетинга через калькулятор ROI и подумайте, какую долю этого ROI съедает медленный сервер.

LCP > 2.5 с — пользователи уходят. По данным Google, каждые +0.1 секунды к времени загрузки = минус 8% конверсий в ритейле. Для интернет-магазина с выручкой 10 млн руб./мес. улучшение LCP с 4 до 2.5 секунд может дать +1-2 млн руб. дополнительной выручки.

CLS > 0.1 — клики мимо. Пользователь хотел нажать «Купить», а нажал «Отменить», потому что страница дернулась. Это не гипотеза — это ежедневная реальность сайтов с плохим CLS. Каждый такой случай — потерянная конверсия, которую можно посчитать в калькуляторе воронки продаж.

INP > 500 мс — сайт ощущается «тормозным». Пользователь нажимает кнопку, и ничего не происходит полсекунды. Он нажимает снова. Получает двойной заказ или ошибку. Уходит. Такие проблемы особенно критичны для e-commerce: по данным исследования аудитории ecom в России, 82% россиян уже покупают онлайн — и у всех них есть альтернативы с быстрым сайтом.

Квиз: проверь себя

Инструменты для измерения: что использовать

Совет маркетологу: начните с PageSpeed Insights. Вбейте URL своего сайта и посмотрите на три числа: LCP, CLS, INP. Если хотя бы одно в красной зоне — покажите этот отчет разработчику. Он поймет.

Хотите узнать, сколько денег теряет ваш сайт из-за каждой лишней секунды загрузки? Посчитайте точную цифру в калькуляторе потерь от скорости загрузки — вводите трафик, конверсию и средний чек, получаете ответ в рублях.

А чтобы сравнить свой сайт с конкурентами — загляните на cruxdata.ru. Это база живых данных CrUX (Chrome User Experience Report) по всем сайтам России: реальные значения LCP, CLS, INP, TTFB от настоящих пользователей Chrome, обновляется ежемесячно. Можно найти любой домен и сравнить с отраслью. Или посмотрите наш рейтинг скорости сайтов — у нас десятки индустрий уже разложены по полочкам.

Чеклист: что проверить на своем сайте прямо сейчас

• Откройте PageSpeed Insights и вбейте URL главной страницы
• Проверьте LCP: если > 2.5 с — попросите разработчика оптимизировать hero-картинку (WebP, lazy load)
• Проверьте CLS: если > 0.1 — ищите картинки без width/height и динамические баннеры
• Проверьте INP: если > 200 мс — слишком много JavaScript, нужен аудит скриптов
• Откройте Search Console, раздел Core Web Vitals — посмотрите, сколько страниц в красной зоне
• Сравните себя с конкурентами: введите их URL в PageSpeed Insights
• Посчитайте стоимость медленной загрузки: калькулятор потерь от скорости — вводите трафик и конверсию, получаете потери в рублях

Главный вывод

Скорость сайта — это не техническая прихоть разработчика. Это прямой маркетинговый канал. Google использует Core Web Vitals (LCP, CLS, INP) как сигнал ранжирования. Пользователи голосуют кнопкой «Назад». Каждые 0.1 секунды — это проценты конверсии, а значит — реальные деньги.

Не нужно разбираться в TCP-хэндшейках. Достаточно знать три числа своего сайта: LCP, CLS, INP. Если все три в зеленой зоне — вы не теряете клиентов на скорости. Если хотя бы один в красной — вы платите за рекламу, которая работает на конкурентов с быстрым сайтом.

Следите за свежими данными о рынке и скорости сайтов в нашем разделе новостей — рынок меняется, и пороги Google тоже обновляются.

А если хотите посчитать, сколько стоит потерянный трафик — загляните в калькулятор ROAS или калькулятор медиабюджета.