Скорость загрузки сайта: на что влияет и как ускорить
Вы прогнали сайт через PageSpeed Insights и увидели красные числа. Ниже длинный список рекомендаций на языке разработчика. Что из этого действительно съедает заявки, что можно исправить самостоятельно за час, а что стоит делегировать специалисту: разбираем по порядку.
Что теряется из-за медленной загрузки
Медленный сайт — это не абстрактная «плохая метрика». Потери конкретные и бьют сразу в трёх местах.
Посетители уходят до того, как страница загрузилась. Человек нажал на ссылку, секунды идут, экран пустой. Он возвращается назад и открывает следующий результат в выдаче. Это закономерность: показатель отказов у медленных страниц стабильно выше, чем у быстрых. Потенциальный клиент не стал реальным не из-за цены или текста, а потому что сайт не успел открыться.
Позиции в поиске снижаются. Яндекс использует скорость загрузки как один из сигналов ранжирования. Измеряет он её через Core Web Vitals — три метрики реального пользовательского опыта: скорость отрисовки главного контента, стабильность макета при загрузке и отклик интерфейса на действия. Если конкуренты в вашей нише заметно быстрее, поисковик это знает и учитывает при показе результатов.
Растёт стоимость клика в контекстной рекламе. В Яндекс Директе цена клика зависит в том числе от качества посадочной страницы. Медленный сайт получает более низкую оценку, а это значит: за то же место в выдаче вы платите больше, чем конкурент с такой же ставкой, но быстрым сайтом.
Особенно остро всё это проявляется на мобильных устройствах: мобильный интернет медленнее, а терпение пользователей короче. Статья «Мобильная версия сайта: почему половина заявок теряется на телефоне» разбирает удобство интерфейса; здесь мы говорим именно о технической скорости и её цене.
Как измерить честно
Первое, что делает большинство владельцев сайтов: открывают его на своём компьютере и думают «грузится нормально». Это нечестное измерение. У вас быстрый процессор, хорошее соединение, а браузер помнит ресурсы с прошлого визита. Ваш опыт не имеет ничего общего с тем, что видит новый посетитель со смартфона через мобильный интернет.
Инструменты проверки
Google PageSpeed Insights(pagespeed.web.dev) — главный инструмент. Вводите адрес страницы и получаете оценку по шкале от 0 до 100 отдельно для мобильных и для десктопа. Красная зона: до 49, жёлтая: 50–89, зелёная: 90 и выше.
GTmetrix(gtmetrix.com) — альтернативный вариант со своими метриками и удобным водопадом загрузки: можно увидеть, какой именно ресурс тормозит страницу и на сколько миллисекунд.
Лабораторные данные против реальных
PageSpeed показывает два типа данных. Лабораторные— это результат симуляции: инструмент сам «притворяется» медленным смартфоном в сети 4G и грузит вашу страницу. Цифры воспроизводимые, но это эксперимент, а не реальность.
Полевые данные(Field Data / CrUX) — собраны Google из Chrome у реальных пользователей, которые заходили на ваш сайт за последние 28 дней. Они честнее: отражают, как страница открывается у вашей аудитории на их устройствах. Но появляются только если у сайта достаточно трафика.
Правило: если полевые данные есть, смотреть в первую очередь на них. Лабораторные данные нужны для диагностики конкретных проблем и проверки исправлений: вы что-то поменяли, прогнали снова: стало ли лучше?
Три главные причины медленного сайта у малого бизнеса
Технических причин торможения существует несколько десятков. Но в практике малого бизнеса три из них встречаются в подавляющем большинстве случаев. Устранение любой из них заметно ускоряет страницу, а устранение всех трёх обычно переводит сайт из красной зоны в жёлтую или зелёную.
Причина 1: тяжёлые картинки
Это самая распространённая проблема и при этом самая простая для исправления. Типичная история: владелец сайта сфотографировал товар на смартфон и загрузил три снимка по 4–6 МБ прямо в систему управления сайтом. Каждый раз, когда пользователь открывает страницу, браузер скачивает все три: итого 12–18 МБ только на фотографии. На мобильном интернете это ощутимые секунды ожидания.
Часть проблемы решается форматом. Современный формат WebP при сопоставимом визуальном качестве весит в среднем вдвое меньше, чем JPG, и втрое меньше, чем PNG. Если ваш сайт до сих пор отдаёт PNG-логотипы и JPG-фото без предобработки: это прямой кандидат на исправление без разработчика.
Причина 2: чужие скрипты
Современный сайт малого бизнеса нередко загружает десяток сторонних скриптов: счётчик Яндекс.Метрики, Google Analytics, пиксель ВКонтакте, онлайн-чат, виджет обратного звонка, Яндекс.Карты в блоке контактов, виджет отзывов с внешнего сервиса. Каждый скрипт делает отдельный запрос к внешнему серверу: пока браузер ждёт ответа от всех этих сервисов, страница стоит на паузе.
Усугубляет ситуацию то, что многие из этих виджетов были установлены годы назад для какой-то одной задачи, задача прошла, а скрипт остался. Старый пиксель от кампании ВКонтакте, счётчик сервиса email-рассылок, которыми давно не пользуются, всё это продолжает тормозить каждую загрузку страницы.
Причина 3: дешёвый хостинг
Скорость начинается до того, как браузер скачал хоть один байт: сначала он должен дождаться, когда сервер ответит на запрос. Это время называется TTFB (Time To First Byte). На хорошем хостинге оно составляет 200–400 мс, на перегруженном общем хостинге за 200 рублей в месяц может растягиваться до 1–2 секунд, и это ещё без учёта времени на загрузку самих файлов.
Дешёвый хостинг — это десятки, а иногда сотни сайтов на одном сервере. Когда соседний сайт получает всплеск трафика, страдают все остальные. Если PageSpeed показывает высокий TTFB при нормальном размере страницы, стоит задуматься о переезде на VPS или на хостинг с отдельными ресурсами под каждый аккаунт.
Что можно исправить без разработчика
Три задачи, которые владелец сайта или маркетолог решает самостоятельно. Каждая из них влияет на скорость заметнее, чем большинство технических оптимизаций.
Сжать и перевести изображения в WebP
Самый доступный инструмент — Squoosh(squoosh.app, бесплатно). Загружаете фотографию, выбираете формат WebP и качество, видите сравнение «до» и «после» прямо в браузере. Для большинства фото подходит качество 80–85 %: потери незаметны, размер файла уменьшается в 2–4 раза. Альтернатива — TinyPNG (tinypng.com): не переводит в WebP, но отлично сжимает PNG и JPG без потери качества, и работает в пакетном режиме: можно загрузить сразу несколько файлов.
Правило для новых загрузок: никогда не загружать фото прямо с телефона. Сначала сжать, потом загружать. Если CMS умеет сама конвертировать в WebP при загрузке (например, WordPress с соответствующим плагином), включите эту опцию.
Провести аудит сторонних скриптов и виджетов
Откройте любую страницу сайта в браузере Chrome, нажмите F12, перейдите на вкладку Network и перезагрузите страницу. В списке запросов видно всё, что браузер скачивает: собственные файлы сайта и внешние ресурсы с чужих доменов. Пройдитесь по столбцу Domain: если видите адреса сервисов, которыми не пользуетесь активно, это кандидаты на удаление.
Чат-виджет, которым отвечают раз в неделю, и онлайн-консультант, которого никто не мониторит — лучше убрать совсем, а не просто «свернуть». Свёрнутый виджет всё равно загружает свой скрипт при каждом открытии страницы.
Вычистить устаревшие счётчики и пиксели
Зайдите в систему управления сайтом (или попросите разработчика показать установленные скрипты) и проверьте каждый счётчик: он ещё нужен? Данные из него кто-нибудь смотрит? Если ответ «нет» — удалить код счётчика из шаблона сайта, а не просто отключить передачу данных. Счётчик без аккаунта продолжает грузиться и ждать ответа от сервера, которого никогда не будет.
Особое внимание — пикселям рекламных сетей. Пиксель ВКонтакте от прошлогодней кампании, пиксель от сервиса email-рассылок, который вы сменили: каждый из них добавляет несколько сотен миллисекунд к времени загрузки. Оставьте только те, без которых не работает активная реклама или аналитика.
Что потребует разработчика — и когда это оправдано
После того как разобрались с картинками, скриптами и хостингом, дальнейшие улучшения скорости потребуют технического специалиста. Вот что входит в этот список и когда имеет смысл заниматься каждым пунктом.
- Браузерное кэширование. Настройка заголовков сервера, чтобы браузер запоминал статические файлы (картинки, стили, скрипты) и не скачивал их при каждом визите заново. Даёт ощутимый результат для повторных посещений; особенно актуально для сайтов, где клиент возвращается несколько раз перед покупкой.
- Отложенная загрузка изображений (lazy loading). Браузер загружает только те картинки, которые попадают в видимую область экрана, всё что ниже подгружается по мере прокрутки. Стандартно реализуется через атрибут отложенной загрузки на тегах изображений; для большинства современных CMS это настройка плагина, а не сложная разработка.
- Минификация JS и CSS. Удаление пробелов, комментариев и переименование переменных сжимает файлы кода на 20–40 %. Обычно включается в конфигурации сборщика проекта. Ощутимый прирост только если скриптов много и они объёмные.
- CDN (сеть доставки контента). Файлы сайта копируются на серверы в разных городах, и пользователь получает их с ближайшего. Актуально если аудитория размазана по большой географии: например, вы в Москве, а клиенты по всей России. Для сугубо локального бизнеса прирост минимальный.
Когда это оправдано: когда вы уже устранили очевидные проблемы (сжали картинки, убрали лишние скрипты, переехали на нормальный хостинг), а PageSpeed по ключевым страницам всё ещё в красной зоне. Или когда речь о главной посадочной странице с платным трафиком, где каждая лишняя секунда прямо переводится в деньги. Для информационных страниц и статей блога технические оптимизации этого уровня чаще всего не окупаются.
Здравый смысл: зачем 100 баллов не нужно
PageSpeed Insights выдаёт оценку от 0 до 100, и первый порыв добраться до максимума — ловушка. Сайты крупных банков и маркетплейсов нередко набирают 40–60 баллов на мобильных устройствах, потому что у них сложная функциональность, множество скриптов и сознательный выбор в пользу возможностей, а не чистого балла. Их позиции при этом никуда не деваются, потому что поисковик смотрит на скорость в сравнении с конкурентами в нише, а не по абсолютной шкале.
Разумный ориентир для малого бизнеса: не быть в красной зоне. Оценка выше 50 на мобильных и выше 70 на десктопе — уже рабочий уровень. Погоня за последними десятью баллами обычно требует несоразмерных усилий и компромиссов в функциональности.
Важнее баллов — конкретные метрики. Если LCP (загрузка главного контента) укладывается в 2,5 секунды, CLS (сдвиг макета) близок к нулю, а страница не зависает при нажатии на кнопку, сайт с технической точки зрения в порядке, какой бы суммарный балл ни стоял в шапке отчёта.
И главное: если заявок нет, а сайт грузится за 1,5 секунды, проблема не в скорости. Смотрите на ценностное предложение, тексты, доверие, релевантность трафика. Скорость важна, но это один из факторов, а не единственный. Оптимизировать изображения есть смысл всегда: это дёшево и безвредно. Нанимать разработчика на две недели ради пяти баллов в PageSpeed при конверсии 0,3 % имеет смысл редко.
Хотите разобраться, как скорость и техническое состояние сайта влияют на видимость в поиске? Подробнее об этом в статье «SEO изображений: alt-теги, форматы файлов и поиск по картинкам в Яндексе».