Главная / Блог / Разработка сайтов / Скорость загрузки сайта: что на неё влияет

Скорость загрузки сайта: что на неё влияет

Медленный сайт теряет посетителей ещё до того, как они увидели предложение. Разбираем, из чего складывается время загрузки, как его измерить и какие правки дают наибольший эффект.

Почему скорость — это деньги

Посетитель не ждёт. Если страница не показала ничего полезного за 3–4 секунды, значительная часть людей закрывает вкладку и возвращается к поисковой выдаче. На мобильных устройствах терпения ещё меньше: человек стоит в очереди или едет в транспорте, соединение нестабильное, а конкурент находится в соседней строке результатов.

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

Хорошая новость в том, что большая часть потерь устраняется не переписыванием сайта, а точечной работой с несколькими узкими местами. Эти места мы разберём в порядке убывания типичного вклада.

Как измерять: метрики, которые имеют смысл

Фраза «сайт грузится быстро» — оценочная. Для разговора с разработчиком нужны цифры. Основные показатели, которые стоит отслеживать:

TTFB — время до получения первого байта от сервера. Показывает, насколько быстро отвечает бэкенд и сеть. Ориентир: до 600 миллисекунд.
LCP — время отрисовки самого крупного элемента на экране, обычно главного изображения или заголовка. Ориентир: не более 2,5 секунды.
CLS — суммарное смещение элементов в процессе загрузки. Если кнопка прыгает под пальцем, это раздражает и приводит к ошибочным нажатиям. Ориентир: не более 0,1.
INP — задержка реакции на действия пользователя. Страница может показаться загруженной, но не реагировать на нажатия, пока выполняется тяжёлый скрипт.
Вес страницы — суммарный объём передаваемых данных. Для обычной страницы услуги разумный ориентир — до 1,5–2 МБ.

Измерять нужно в двух режимах: лабораторном и полевом. Лабораторные тесты, например встроенный аудит браузера, дают воспроизводимые цифры в контролируемых условиях. Полевые данные собираются от реальных посетителей и показывают разброс по устройствам и сетям. Расхождение между ними часто неприятно удивляет: на мощном ноутбуке разработчика сайт летает, а на бюджетном телефоне с мобильной сетью работает втрое медленнее. Проверяйте на тротлинге: в инструментах разработчика можно включить имитацию медленного соединения и ослабленного процессора.

Изображения: главный источник лишнего веса

В большинстве проектов, которые к нам приходят на оптимизацию, до 70 процентов веса страницы занимают картинки. Типичная картина: дизайнер передал фотографию в исходном размере 4 000 пикселей по ширине, верстальщик вставил её в блок шириной 600 пикселей, а браузер честно скачивает весь файл на несколько мегабайт.

Что делать:

Выбирать современные форматы: WebP и AVIF сжимают заметно лучше JPEG при том же визуальном качестве. Для запасных вариантов оставляйте JPEG.
Готовить несколько размеров одного изображения и подключать их через атрибуты адаптивных картинок, чтобы телефон получал файл поменьше. Эта тема тесно связана с адаптивной вёрсткой.
Включать ленивую загрузку для всего, что находится ниже первого экрана.
Явно указывать ширину и высоту, чтобы браузер резервировал место и не вызывал смещений.
Не использовать картинки там, где достаточно CSS: фоновые градиенты, скругления, тени.

Отдельное предупреждение про главное изображение первого экрана. Оно как раз определяет LCP, поэтому его нельзя грузить лениво. Наоборот, его нужно приоритизировать и при необходимости заранее подсказать браузеру, что его надо скачать первым.

Иконки, анимации и видео

Иконки лучше отдавать в формате SVG: они масштабируются без потери качества и обычно весят сотни байт. Склеивать десятки иконок в одну растровую «спрайт-картинку» уже давно не нужно. Анимации на скриптах, подгруженных ради одного эффекта, часто обходятся дороже, чем выигрывают в красоте. Фоновое видео на первом экране вообще стоит считать роскошью: если оно нужно, сжимайте его до нескольких сотен килобайт и показывайте постер, пока ролик не загрузился.

Скрипты и стили: невидимая нагрузка

Второй по значимости источник проблем — JavaScript. Он не просто скачивается, он ещё и выполняется процессором устройства, а это дорогая операция для слабых телефонов. Встроенные виджеты чата, счётчики аналитики, карты, всплывающие окна, подключаемые «на всякий случай» библиотеки складываются в сотни килобайт кода.

Правила гигиены:

Проводите ревизию подключённых скриптов раз в квартал. Каждый должен иметь владельца и обоснование.
Подключайте сторонние виджеты с задержкой: чат не должен блокировать отображение страницы, его можно запускать после первого взаимодействия.
Используйте отложенное и асинхронное выполнение скриптов, чтобы они не блокировали построение страницы.
Выносите критические стили первого экрана в начало документа, а остальные подгружайте отдельно.
Не тяните целую библиотеку ради одной функции. Подключение тяжёлого фреймворка для лендинга с тремя блоками — типичная ошибка.

Карты заслуживают отдельного упоминания. Интерактивная карта на странице контактов может добавить мегабайт скриптов. Если посетителю нужен только адрес, поставьте статичную картинку с кнопкой «Открыть карту», а интерактивный вариант загружайте по клику.

Сервер, кэш и сеть

Даже идеально оптимизированный фронтенд не выручит, если сервер отвечает долго. На TTFB влияют производительность хостинга, расстояние до пользователя, количество запросов к базе данных и наличие кэширования.

Хостинг и расположение

Дешёвый общий хостинг с сотнями сайтов на одной машине способен показывать TTFB в одну-две секунды в часы пик. Для сайта, который приносит заявки, выделенный или виртуальный сервер с достаточными ресурсами стоит небольших денег по сравнению с потерями. Если аудитория находится в России, сервер должен физически быть недалеко от неё. Для разнесённой географически аудитории помогает сеть доставки контента (CDN): статические файлы раздаются с ближайшего узла.

Кэширование

Кэш бывает трёх видов, и использовать стоит все.

Кэш на стороне сервера. Готовые HTML-страницы хранятся в памяти и отдаются без обращений к базе данных. Для сайта-визитки это превращает ответ в десятки миллисекунд.
Кэш в браузере. Статические файлы получают длительный срок хранения с версионированием в имени, поэтому повторный визит не скачивает ничего лишнего.
Кэш CDN. Снимает нагрузку с основного сервера и ускоряет доставку по регионам.

Дополнительно включите сжатие текстовых ответов. Современное сжатие уменьшает передаваемые HTML, CSS и JavaScript в 3–5 раз и включается одной настройкой веб-сервера. Протокол HTTP/2 или HTTP/3 позволяет загружать много файлов параллельно через одно соединение, что тоже снижает задержки.

Шрифты, сторонние сервисы и то, что обычно забывают

Веб-шрифты кажутся мелочью, но два-три начертания в разных весах легко добавляют 300–500 КБ и вызывают мигание текста. Выбирайте не более двух семейств и не более трёх начертаний, подключайте только нужные наборы символов, используйте формат WOFF2 и настройку, при которой браузер сразу показывает запасной шрифт, а затем подменяет его.

Сторонние сервисы — аналитика, ретаргетинг, онлайн-консультант, виджеты отзывов — работают на чужих серверах, и вы не контролируете их скорость. Составьте таблицу и оцените вклад каждого.

Что подключено	Типичная цена в миллисекундах	Что делать
Система аналитики	50–150	оставить, подключить асинхронно
Онлайн-чат	200–600	загружать после первого действия
Интерактивная карта	300–800	заменить статичной картинкой
Виджет с отзывами	150–400	показывать статичный блок
Пиксель ретаргетинга	50–200	подключать через менеджер тегов

Цифры ориентировочные и зависят от конкретного сервиса, но порядок величин показывает, почему «просто добавить ещё один счётчик» не бывает бесплатным.

Порядок работы по оптимизации

Если вы не знаете, с чего начать, идите по такому плану. Сначала замерьте текущее состояние на трёх ключевых страницах: главной, странице услуги и странице с формой. Затем устраните самое дорогое: сожмите изображения и настройте кэш, этого часто достаточно, чтобы сократить время вдвое. После этого проведите ревизию скриптов и шрифтов. В конце проверьте результат на реальных устройствах и закрепите показатели как требования в техническом задании. Как оформлять такие требования, мы рассказывали в статье про составление ТЗ на сайт.

Скорость нужно удерживать, а не достигать один раз. Любая новая функция, баннер или виджет способны вернуть сайт в исходное состояние, поэтому оптимизация должна быть частью регулярной поддержки сайта. Если нужна помощь с аудитом или разработкой с нуля, посмотрите раздел разработки сайтов и напишите нам на [email protected].

Итоги

Скорость складывается из пяти слагаемых: вес изображений, объём скриптов, отклик сервера, кэширование и сторонние подключения. Измеряйте цифрами, начинайте с картинок и кэша, регулярно пересматривайте подключённые сервисы и не забывайте про мобильные устройства. Быстрый сайт — это не результат единовременного усилия, а привычка команды, которая сопровождает проект.

Нужен датасет под вашу задачу?

Подготовим тестовую партию изображений с разметкой, чтобы вы могли проверить подход на своей модели. Напишите на [email protected] или оставьте заявку.