Скорость загрузки сайта

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

Что такое скорость загрузки сайта

Скорость загрузки сайта — это не одно число, а целый набор метрик, каждая из которых описывает отдельный этап между кликом пользователя и полноценным взаимодействием со страницей. Браузер запрашивает HTML, получает его, начинает загружать CSS и JavaScript, строит визуальное дерево элементов, рендерит пиксели на экране — и только после всего этого пользователь видит готовую страницу. Разные системы измерения фиксируют разные точки этого процесса: время до первого байта (TTFB), время до первого отображения контента (FCP), время до крупнейшего элемента (LCP), время до полной интерактивности (TTI). Понимать, какую именно метрику ты измеряешь, критично — иначе можно оптимизировать не то и не видеть реального прогресса.

История измерения скорости сайтов начинается с 2000-х, когда интернет-соединения были медленными по умолчанию и разработчики просто старались делать страницы легкими. Переломным стал 2010 год: Google официально объявил скорость сигналом ранжирования для десктопного поиска, а в 2018 — для мобильного. Яндекс добавил скорость в факторы коммерческого ранжирования примерно в тот же период. С 2021 года Google ввел Core Web Vitals — набор из трех метрик, напрямую влияющих на позиции, две из которых связаны со скоростью: LCP (скорость загрузки главного контента) и FID/INP (отзывчивость на взаимодействие).

В digital-маркетинге скорость загрузки влияет сразу на три канала: органический поиск (через ранжирование и поведенческие факторы), платную рекламу (Google и Яндекс снижают ставки за клик для медленных посадочных страниц) и прямые заходы (пользователи, которые уже знают бренд, тоже уходят, если страница грузится дольше 3 секунд). По данным Google, 53% мобильных пользователей закрывают страницу, если загрузка занимает более 3 секунд. Исследование Deloitte для розничных сайтов показало: ускорение на 0,1 секунды увеличивает конверсию на 8,4% для мобильных покупателей.

Маркетологу и владельцу бизнеса важно понимать скорость загрузки по нескольким причинам. Во-первых, это один из немногих технических факторов, который напрямую переводится в деньги — можно посчитать, сколько клиентов ты теряешь каждую секунду задержки. Во-вторых, конкуренты не стоят на месте: если твой сайт грузится за 4 секунды, а конкурент запустил CDN и стал грузиться за 1,5 — поисковик начнет отдавать ему приоритет, а пользователи будут возвращаться именно туда. В-третьих, скорость — это пространство для роста без увеличения рекламного бюджета: те же деньги на трафик, но больше пользователей доходят до покупки.

Как работает загрузка страницы

1. DNS-резолюция и установка соединения. Когда пользователь вводит адрес, браузер сначала обращается к DNS-серверу, чтобы узнать IP сервера. Этот шаг занимает от 20 до 120 миллисекунд в зависимости от провайдера и кешированности записи. После получения IP браузер устанавливает TCP-соединение и, если сайт на HTTPS, проходит TLS-рукопожатие — это еще 50-150 мс. Именно поэтому хостинг вблизи пользователя и CDN так ощутимо влияют на первое впечатление.
2. Получение HTML и построение DOM. Сервер отдает HTML-документ — это первый байт, который фиксируется как TTFB (Time to First Byte). Браузер начинает парсить HTML сверху вниз, строя Document Object Model. Если в head встречается тяжелый JavaScript без атрибута defer или async, парсинг блокируется — браузер ждет загрузки и выполнения скрипта, прежде чем двигаться дальше. Блокирующий JS — одна из главных причин, по которой пользователь видит белый экран первые 2-5 секунд.
3. Загрузка CSS и построение CSSOM. Параллельно с HTML браузер загружает таблицы стилей и строит CSS Object Model. Рендеринг страницы невозможен без полного CSSOM — это блокирующий ресурс по умолчанию. Критический CSS (стили для контента, видимого без прокрутки) лучше инлайнить прямо в head, чтобы браузер мог нарисовать первый экран без ожидания внешних файлов. Это снижает FCP на 0,5-1,5 секунды на медленных соединениях.
4. Загрузка и декодирование изображений. Изображения — самый весомый ресурс на большинстве страниц. Браузер начинает их загрузку, как только встречает тег img в HTML. Незаоптимизированные изображения (например, PNG 3 МБ там, где нужен WebP 150 КБ) могут растягивать загрузку страницы на 5-10 секунд на мобильном 4G. Атрибут loading=»lazy» позволяет откладывать загрузку изображений, которые не видны на первом экране, — это существенно ускоряет LCP.
5. Выполнение JavaScript и достижение интерактивности. После парсинга HTML и загрузки DOM браузер выполняет JavaScript. Тяжелые скрипты (React-приложения, множество сторонних плагинов, аналитика) могут блокировать главный поток на 2-8 секунд — в этот момент страница выглядит загруженной, но на клики не реагирует. Метрика TTI (Time to Interactive) фиксирует именно этот момент. Разбивка скриптов на чанки и ленивая загрузка не критичных модулей — стандартная практика для снижения TTI.
6. Финальный рендеринг и LCP. Браузер объединяет DOM и CSSOM в Render Tree, вычисляет размеры и позиции элементов (Layout), рисует их на экране (Paint) и компонует слои (Composite). Момент, когда крупнейший видимый элемент страницы — обычно hero-изображение или заголовок h1 — полностью отрендерен, фиксируется как LCP. Google считает хорошим LCP до 2,5 секунд. Именно этот показатель сейчас наиболее важен для ранжирования из всех связанных со скоростью метрик.

Виды метрик скорости загрузки

• TTFB (Time to First Byte). Время от отправки запроса до получения первого байта ответа от сервера. Отражает качество серверной инфраструктуры: хостинг, кеширование на сервере, скорость выполнения запросов к базе данных. Хорошим значением считается TTFB до 200 мс. Если TTFB больше 600 мс — нужно смотреть на сервер: медленный PHP, запросы к БД без индексов, отсутствие объектного кеша. Для WordPress-сайтов типичная причина — 50+ SQL-запросов на каждый просмотр страницы.
• FCP (First Contentful Paint). Время до момента, когда браузер нарисовал первый значимый элемент: текст, изображение или SVG. Показывает, когда пользователь перестает видеть белый экран и понимает, что страница реально загружается. Хорошее значение — до 1,8 секунды. Основные рычаги улучшения: устранение render-blocking ресурсов, инлайн критического CSS, предзагрузка шрифтов через rel=»preload».
• LCP (Largest Contentful Paint). Момент отрисовки крупнейшего видимого элемента на первом экране. Это ключевая метрика Google Core Web Vitals, напрямую влияющая на ранжирование. Цель — до 2,5 секунды. Чаще всего LCP — это hero-изображение или крупный блок текста. Для e-commerce-сайтов основная причина плохого LCP — неоптимизированные изображения товаров в формате JPEG или PNG вместо WebP/AVIF.
• TTI (Time to Interactive). Время до момента, когда страница не просто выглядит загруженной, но и реально отвечает на действия пользователя. Разрыв между FCP и TTI — это период, когда пользователь видит страницу, нажимает кнопки, но ничего не происходит. Такой опыт раздражает сильнее, чем просто долгая загрузка. Характерна для сайтов с большими бандлами JavaScript.
• CLS (Cumulative Layout Shift). Не прямая метрика скорости, но тесно связана с воспринимаемой быстротой загрузки. Фиксирует непредвиденные смещения элементов при загрузке: кнопка «Купить» ушла вниз, потому что над ней загрузился баннер — пользователь нажал не туда. Google включил CLS в Core Web Vitals. Хорошее значение — менее 0,1. Основная причина высокого CLS — изображения и рекламные блоки без заданных размеров.
• Speed Index. Синтетическая метрика Lighthouse и WebPageTest, показывающая, насколько быстро визуально заполняется страница в целом. Вычисляется по видеозаписи загрузки: чем быстрее пиксели появляются на экране, тем лучше. Удобна для сравнения разных страниц между собой, а не для прямой диагностики конкретной проблемы.

Сравнение инструментов оценки скорости

Пример использования

Интернет-магазин детских товаров с трафиком 22 000 визитов в месяц обратился за аудитом после падения конверсии. Google PageSpeed Insights показывал LCP 7,2 секунды на мобильных устройствах, TTFB 840 мс, Score 23 из 100. Bounce rate составлял 74%, а конверсия в заказ — 0,7%. При этом SEO-трафик за предыдущие полгода вырос на 35% за счет наращивания контента, но выручка не следовала за трафиком — пользователи приходили и уходили, не дождавшись загрузки.

За три недели выполнили: перевели 1 400 изображений товаров из JPEG в WebP (средний вес упал с 320 КБ до 68 КБ), подключили CDN с серверами в Москве и Санкт-Петербурге, включили Redis Object Cache для WordPress (TTFB упал с 840 до 180 мс), вынесли критический CSS инлайн и добавили lazy loading на все изображения ниже первого экрана. LCP улучшился до 1,8 секунды, Score вырос до 82. Bounce rate снизился до 51%, конверсия выросла с 0,7% до 2,1% — при том же рекламном бюджете и том же объеме трафика выручка увеличилась в три раза.

Частые вопросы