САЙТЫ И РАЗРАБОТКА
Посетитель готов ждать страницу две или три секунды. Дальше он закрывает вкладку и уходит туда, где всё открывается сразу. Если трафик приходит из платных каналов, каждый такой уход означает оплаченный клик без единого просмотра. Мы уже сравнивали SEO и контекстную рекламу как источники трафика, и вывод для обоих одинаковый: медленная посадочная страница обесценивает любой канал […]
Посетитель готов ждать страницу две или три секунды. Дальше он закрывает вкладку и уходит туда, где всё открывается сразу. Если трафик приходит из платных каналов, каждый такой уход означает оплаченный клик без единого просмотра. Мы уже сравнивали SEO и контекстную рекламу как источники трафика, и вывод для обоих одинаковый: медленная посадочная страница обесценивает любой канал ещё до первого касания с вашим предложением.
Скорость влияет и на поиск. Яндекс и Google учитывают её при ранжировании, а поведенческие факторы усиливают эффект: люди быстрее уходят с медленных страниц, доля отказов растёт, и позиции постепенно проседают. Получается замкнутый круг, который дешевле разорвать один раз, чем годами компенсировать рекламным бюджетом.
В большинстве случаев сайт тормозит по четырём или пяти типовым причинам, и все они находятся за 20 минут двумя бесплатными инструментами. Ниже: что означают метрики Core Web Vitals, какие причины тормозов встречаются чаще всего, как провести диагностику своими руками и в каком порядке чинить найденное. Технический бэкграунд не потребуется: хватит браузера и адреса вашего сайта.
Core Web Vitals: три метрики, которые понимает и поисковик, и посетитель
Google свёл оценку скорости к небольшому набору показателей и назвал их Core Web Vitals. Они описывают опыт живого человека: как быстро появился контент, не прыгает ли вёрстка и отзывается ли страница на действия. Эти же данные показывает PageSpeed Insights, поэтому разобраться в них полезно даже владельцу без технической подготовки.
LCP: как быстро появляется главный контент
LCP (Largest Contentful Paint) фиксирует момент, когда на экране отрисовался самый крупный элемент: обложка или главное фото товара. Для посетителя это ощущение «страница открылась». Пока крупный блок не появился, человек смотрит на белый экран и решает, ждать дальше или закрыть вкладку. Норма: до 2,5 секунды.
CLS: прыгает ли вёрстка при загрузке
CLS (Cumulative Layout Shift) измеряет сдвиги макета во время загрузки. Знакомая ситуация: вы целитесь пальцем в кнопку, сверху догружается баннер, всё съезжает вниз, и нажатие приходится на рекламу. Каждый такой сдвиг увеличивает CLS. Комфортное значение: до 0,1.
INP: как быстро сайт отвечает на действия
INP (Interaction to Next Paint) показывает, сколько миллисекунд проходит между действием пользователя и видимой реакцией интерфейса. Нажали на фильтр в каталоге, а страница замерла — это высокий INP. Порог комфорта: 200 миллисекунд.
Ориентиры по всем порогам удобно держать перед глазами в одной таблице. Значения между «хорошо» и «плохо» считаются зоной роста: сайт работает, но часть посетителей уже теряет.
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| LCP | Появление самого крупного элемента страницы | до 2,5 с | больше 4 с |
| CLS | Стабильность вёрстки во время загрузки | до 0,1 | больше 0,25 |
| INP | Скорость отклика на действия пользователя | до 200 мс | больше 500 мс |
Типичные причины тормозов
За годы аудитов список виновников почти не меняется. Проверьте свой сайт по этим пунктам: с высокой вероятностью проблема найдётся уже в первых двух.
Тяжёлые картинки
Самая частая причина. Дизайнер отдал макет с фотографиями по 3-5 МБ, контент-менеджер загрузил их на сайт как есть, и страница стала весить как небольшой фильм. Браузер честно скачивает эти мегабайты, а посетитель в это время смотрит на пустой экран.
Что помогает: сжатие без видимой потери детализации, современные форматы WebP и AVIF, отдельные версии под мобильные экраны и отложенная загрузка изображений ниже первого экрана. Фото шириной 4000 пикселей в колонке на 400 пикселей просто тратит трафик впустую. Ресайз и сжатие делаются пакетно, поэтому даже каталог на сотни товаров приводится в порядок за разумное время.
Лишние шрифты
Каждое начертание шрифта — отдельный файл. Подключили четыре начертания двух гарнитур, и браузер вынужден скачать восемь файлов до того, как показать текст в финальном виде. Полные файлы со всеми алфавитами и символами весят сотни килобайт.
Лечится это подмножествами: из файла оставляют только нужные символы, обычно кириллицу и латиницу, и конвертируют результат в формат WOFF2. Когда мы делали собственный сайт агентства КРЕАТЕК, файл шрифта похудел с 379 КБ примерно до 24 КБ без единого визуального отличия. В списке загрузок это одна строка, а на слабом мобильном интернете такая строка стоит нескольких сотен миллисекунд.
Сторонние скрипты
Онлайн-чат, пиксели соцсетей, карта проезда, виджет отзывов: каждый такой блок тянет свой код с чужого сервера. По отдельности они выглядят безобидно, вместе способны удвоить время загрузки. Дополнительный риск в том, что чужие серверы вам не подчиняются: если сервис виджета тормозит, вместе с ним тормозит и ваша страница.
Проведите ревизию. Скрипты, которыми никто не пользуется, удалите совсем. Остальные переведите на отложенную загрузку, чтобы они подключались после появления основного контента.
Отсутствие кэширования
Кэш разрешает браузеру не скачивать одни и те же файлы при каждом визите. Если заголовки кэширования не настроены, постоянный клиент при каждом заходе грузит сайт заново, как будто видит его впервые. Настройка занимает у разработчика меньше часа и ускоряет повторные визиты в разы. Сюда же относится сжатие ответов сервера (gzip или brotli) и серверный кэш для страниц, которые редко меняются.
Диагностика за 20 минут: PageSpeed Insights и вкладка Network
Для первичной проверки хватит двух бесплатных инструментов. Порядок такой.
- Откройте PageSpeed Insights (pagespeed.web.dev) и введите адрес страницы. Сначала смотрите на блок с данными реальных пользователей: это статистика из браузеров живых людей за последние 28 дней. Лабораторная оценка ниже помогает искать причины, но сама по себе она условна и зависит от тестового окружения.
- Пролистайте отчёт до раздела с рекомендациями. Ищите пункты про изображения, неиспользуемый код, шрифты и ресурсы, блокирующие отрисовку. Возле каждой рекомендации указана ожидаемая экономия в секундах: из этого складывается список работ с приоритетами.
- Откройте свой сайт в Chrome, нажмите F12 и перейдите на вкладку Network. Поставьте галочку Disable cache и обновите страницу. Внизу появится сводка: количество запросов и общий вес. Если стартовая страница весит больше 3-4 МБ, разбирательство точно себя окупит.
- Отсортируйте запросы по колонке Size. Первые строки списка и есть главные кандидаты на оптимизацию: обычно там фотографии и шрифты.
- Посмотрите на самый первый запрос, сам HTML-документ. Если сервер отдаёт его дольше 600 миллисекунд, узкое место находится на стороне хостинга или движка, и сжатие картинок тут не спасёт: сначала придётся разбираться с сервером.
- Снимите галочку Disable cache и обновите страницу ещё раз. Вес почти не изменился: значит, кэширование не работает, и постоянные посетители грузят сайт с нуля.
Замер повторите на нескольких ключевых страницах, например на главной и на карточке товара. Проблемы у них часто разные.
Что чинить в первую очередь
Универсальный порядок работ строится по одному принципу: сначала дешёвые действия с заметным эффектом, потом тонкая настройка.
- Картинки. Сжатие и перевод в WebP дают самый большой выигрыш на единицу усилий. Часто минус половина веса страницы за один день работы.
- Шрифты. Убрать лишние начертания, сделать подмножества, перейти на WOFF2. Эффект особенно заметен на мобильных.
- Сторонние скрипты. Удалить неиспользуемые, остальные грузить отложенно.
- Кэш и сжатие ответов сервера. Разовая настройка, которая ускоряет каждый повторный визит.
- Сервер и код. Смена тарифа или хостинга плюс оптимизация движка и базы. Самый дорогой пункт, поэтому он идёт последним и только по показаниям из диагностики.
Этот порядок мы применили на собственном сайте: стартовый вес страницы был 19,5 МБ, бюджет новой версии 1,5 МБ, это в 13 раз меньше. Основную экономию принесли изображения и шрифты, а серверные настройки добавили последние десятые доли секунды.
Скорость входит в технический фундамент, на котором держится продвижение: без него вложения в контент и ссылки окупаются хуже. Подробнее о том, как устроена эта работа целиком, мы писали в статье про этапы SEO-продвижения сайта. А если сайт только планируется, требования к скорости разумно внести в техническое задание с самого начала: что ещё должно туда войти, разбирали в материале о стоимости разработки сайта.
Если внутренней команды нет, передайте список из этого раздела подрядчику как готовое задание на аудит. Как выстроена такая работа у нас, видно в описании процесса на главной странице.
Частые вопросы
Какая скорость загрузки считается нормальной?
Ориентир: главный контент появляется за 2,5 секунды на среднем мобильном интернете. Полная загрузка со всеми виджетами может длиться дольше, и это нормально, если человек уже видит страницу и может ей пользоваться.
Влияет ли ускорение сайта на позиции в поиске?
Да, хотя и в связке с остальными факторами. Скорость учитывается алгоритмами напрямую, а ещё сильнее работает поведение: с быстрых страниц реже уходят, глубина просмотра растёт, и поисковики читают это как признак полезного ресурса. Ждать взлёта позиций от одного лишь ускорения не нужно. Снижение отказов проявляется быстрее и заметнее.
Можно ли ускорить сайт на конструкторе?
Частично. Картинки и лишние виджеты доступны для оптимизации почти на любой платформе. Серверная часть и код самого конструктора остаются вне вашего контроля. Если после чистки контента показатели всё ещё в красной зоне, потолок платформы достигнут, и дальше поможет только переезд на другую технологию.
Сколько времени занимает ускорение сайта?
Зависит от диагноза. Сжатие картинок и настройка кэша выполняются за несколько дней. Переработка кода или переезд на другой хостинг растягиваются на недели. Точный срок появляется после аудита, когда понятно, сколько проблем в списке и какие из них главные.
Почему сайт снова замедлился после оптимизации?
Скорость деградирует от обычной жизни сайта: контент-менеджер загрузил несжатые фотографии, а маркетолог добавил ещё один сторонний пиксель. Помогает простой регламент: проверять вес каждой новой страницы перед публикацией и раз в квартал прогонять ключевые страницы через PageSpeed Insights.
Обязательно ли переделывать сайт целиком?
Чаще всего нет. По нашему опыту большая часть тормозов лечится работой с контентом и настройками, без переписывания кода. Полная пересборка оправдана, когда сайт живёт на устаревшем движке и каждая доработка обходится дороже новой версии.
Коротко: чеклист скорости
Проверьте сайт по списку:
- главный контент появляется быстрее 2,5 секунды на телефоне;
- вес страницы во вкладке Network не превышает 2-3 МБ;
- изображения сжаты и отдаются в WebP или AVIF;
- шрифтовых файлов мало и все они в формате WOFF2;
- сторонние скрипты пересмотрены, лишние удалены;
- повторная загрузка проходит заметно быстрее первой.
Если по трём и более пунктам ответ «нет», сайт теряет посетителей каждый день. Диагностику из этой статьи реально провести самостоятельно за один вечер. А когда нужен результат без погружения в технические детали, передайте задачу агентству КРЕАТЕК: найдём, где сайт теряет секунды и клиентов, и доведём показатели до зелёной зоны. Работаем до результата.