Почему одна и та же страница приносит продажи конкуренту и простаивает у вас, хотя текст и цены похожи. Разбираем, как проверить скорость сайта через PageSpeed и что делать, если она низкая.
Содержание
Почему скорость сайта - это деньги, а не техническая мелочь
Логика проста. Каждая секунда загрузки – это часть людей, которые не дождались. Исследование Google по мобильным страницам показало: когда время загрузки растёт с 1 до 3 секунд, вероятность отказа (bounce) поднимается на 32%. С 1 до 5 секунд – уже на 90%. Это не линейная история, обвал происходит быстро. Детали методологии Google открыто публикует на web.dev – ресурсе команды, которая и разрабатывает эти метрики.
Что такое Core Web Vitals простыми словами
- Быстро ли появилось главное? – за это отвечает LCP.
- Быстро ли сайт реагирует, когда я тыкаю? – за это отвечает INP.
- Не прыгает ли всё под рукой, пока грузится? – за это отвечает CLS.
Три метрики: LCP, INP и CLS
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| LCP - Largest Contentful Paint | За какое время появляется самый крупный видимый элемент (баннер, заголовок, изображение) | до 2,5 с | более 4 с |
| INP - Interaction to Next Paint | Насколько быстро сайт реагирует на клик, касание и ввод текста | до 200 мс | более 500 мс |
| CLS - Cumulative Layout Shift | Насколько сильно смещается контент во время загрузки страницы | до 0,1 | более 0,25 |
LCP - "когда я наконец увидел главное"
INP - "я тыкнул, а оно думает"
CLS - "хотел нажать одно, нажал другое"
Как проверить скорость сайта: PageSpeed, Lighthouse, GTmetrix
PageSpeed Insights - откуда начинать
Заходите на pagespeed.web.dev, вставляете адрес страницы, жмёте “Анализировать”. За минуту получаете оценку от 0 до 100 отдельно для мобильных и десктопа, все три метрики Core Web Vitals и список конкретных рекомендаций с оценкой, сколько секунд сэкономит каждая. Это главный инструмент, потому что он показывает и полевые, и лабораторные данные одновременно (о разнице – ниже). Проверяйте обязательно мобильную версию: Google ранжирует сайты по ней, да и большинство украинского трафика идёт с телефонов.
Lighthouse - то же самое, но в браузере
GTmetrix - когда надо копнуть глубже
Лабораторные данные против полевых: почему цифры разные
Лабораторные данные (Lab) – это разовый тест в стерильных условиях: эмуляция одного устройства, стабильный канал. Удобно для диагностики, потому что даёт одинаковый результат при повторе. Но это не то, что видят ваши реальные клиенты.
Полевые данные (Field) – это статистика от настоящих пользователей Chrome за последние 28 дней, с реальных телефонов и реальных сетей. Google собирает её в отчёте CrUX (Chrome User Experience Report) и именно её учитывает для ранжирования. Если страница новая или имеет мало трафика, полевых данных может просто не быть – тогда ориентируйтесь на лабораторные.
Практическое правило: для решений по SEO смотрите на полевые данные, для поиска конкретной технической проблемы – на лабораторные. Когда они сильно расходятся, это сигнал, что где-то есть “узкое место”, которое проявляется только на реальных медленных устройствах.
«Чаще всего к нам приходят не с вопросом “у меня плохой LCP”. Приходят с вопросом “почему реклама настроена хорошо, а заявок мало”. Половина таких случаев заканчивается не на стороне рекламы, а на стороне сайта: он просто не успевает показать предложение, пока человек ещё заинтересован. Скорость – это не про технику, это про то, сколько оплаченных кликов доходит до формы».
Типичные причины медленного сайта
- Тяжёлые, несжатые изображения. Самая распространённая причина. Фото товара в формате 4000×3000 пикселей и весом 5 МБ, которое на сайте показывается размером 400 пикселей. Браузер вынужден загрузить весь файл. Решение – сжатие и современные форматы (WebP, AVIF).
- Куча сторонних скриптов. Чат, два счётчика аналитики, пиксель Facebook, виджет отзывов, попап-сбор контактов. Каждый тянет свой код, и вместе они блокируют отклик сайта (портят INP).
- Дешёвый или перегруженный хостинг. Сервер долго “думает”, прежде чем отдать первый ответ. Это бьёт по LCP ещё до того, как началась загрузка картинок.
- Перегруженная тема или конструктор. Готовые темы WordPress с сотней функций, из которых вы используете пять, тянут весь код “про запас”.
- Отсутствие кеширования. Сайт каждый раз собирает страницу заново вместо того, чтобы отдать готовую сохранённую версию.
- Шрифты и баннеры без размеров. Главная причина прыжков макета (плохой CLS).
Как ускорить WordPress, Tilda и OpenCart
WordPress
Tilda
Тут меньше контроля, потому что платформа закрытая, но базовое сделать можно: сжимать картинки до загрузки на сайт (Tilda не уменьшит за вас оригинал), включить встроенную оптимизацию изображений, убрать лишние анимации и тяжёлые видеофоны, минимизировать сторонние вставки кода. Потолок скорости на Tilda задаёт сама платформа – выше него не прыгнуть, и это стоит учитывать ещё на этапе выбора.
OpenCart
Не хотите погружаться в технические детали? Мы делаем проверку скорости сайта с конкретными рекомендациями: что именно тормозит, на сколько секунд это можно ускорить и что сделать первоочередно. Не общий отчёт из PageSpeed, а приоритизированный список действий под ваш сайт. Проверка скорости с рекомендациями – 5 000 грн.
С чего начинать: приоритет исправлений
- Изображения. Почти всегда номер один. Сжать, перевести в WebP, задать размеры, отложить загрузку тех, что ниже экрана. Это бьёт сразу по двум метрикам: LCP (потому что главное фото грузится быстрее) и CLS (потому что картинки с размерами не прыгают). Часто только это переводит страницу из красной зоны в жёлтую.
- Кеширование. Самый дешёвый выигрыш по соотношению усилий к результату. Сайт перестаёт собирать страницу заново при каждом заходе. Прямо улучшает LCP.
- Сторонние скрипты. Аудит того, что реально нужно. Чат, в который никто не пишет, два счётчика аналитики вместо одного, виджет, забытый с прошлого года. Убрать лишнее и отложить загрузку остального на потом. Лечит INP.
- Фикс сдвигов макета. Задать размеры всем картинкам, баннерам, рекламным блокам. Прелоад шрифтов, чтобы текст не "перепрыгивал". Точечно лечит CLS.
- Хостинг и сервер. Если после всего вышеперечисленного сервер всё ещё долго "думает" перед первым ответом - время смотреть на хостинг или серверное кеширование. Это уже более глубокая работа, но без неё потолок не пробить.
Ошибки самостоятельной оптимизации
Погоня за цифрой 100, а не за реальными клиентами. Человек ставит цель “хочу 100 баллов” и тратит недели, вылизывая последние пять пунктов, которые никто из посетителей не почувствует. Тем временем мобильная версия, где сидит большинство трафика, остаётся медленной. PageSpeed – инструмент, а не самоцель. Важна не оценка, а то, что чувствует живой человек на своём телефоне.
Несколько плагинов кеширования одновременно. Классическая ошибка на WordPress: поставили два-три плагина “на всякий случай”. Они конфликтуют между собой, сайт начинает отдавать битые страницы или вообще ломается. Кеш должен быть один, настроенный под вашу конфигурацию.
Агрессивная минимизация, ломающая вёрстку. Включили “объединить и сжать весь CSS и JS” – и сайт поплыл: кнопки не нажимаются, слайдер не крутится, форма не отправляется. Это самое коварное, потому что владелец может не заметить поломку на главной, а она сидит на странице оплаты, где как раз и теряются деньги. После любой оптимизации надо кликнуть весь путь клиента до конца.
Оптимизировали главную, забыли остальное. PageSpeed по умолчанию проверяет одну страницу. Владелец загоняет в зелёную зону главную и считает работу сделанной. А страницы товаров, корзина, блог остаются медленными – именно там, где происходит конверсия. Проверять надо ключевые типы страниц, не одну.
Сжали фото “на максимум” и убили качество. Перегиб в другую сторону: сжали изображения так, что товар выглядит размытым. В магазине это прямо бьёт по продажам – человек не покупает то, что плохо видно. Скорость важна, но не ценой того, ради чего человек пришёл.
Кому скорость критична, а кому можно выдохнуть
Критично – интернет-магазины. Тут скорость прямо конвертируется в деньги. Каждая секунда задержки на странице товара или в корзине – это брошенные корзины и недополученный доход. На большом каталоге разница между быстрым и медленным сайтом легко измеряется процентами выручки. Если у вас e-commerce – скорость в приоритете всегда.
Критично – сайты под платный трафик. Если вы льёте рекламу на лендинг или сайт, медленная посадочная страница сливает бюджет ещё до того, как человек увидит предложение. Тут скорость окупается быстрее всего: оптимизировали страницу – тот же рекламный бюджет приносит больше заявок без единой копейки дополнительно.
Важно, но без фанатизма – контентные и информационные сайты. Блог, медиа, портал. Скорость влияет на SEO и дочитывание, но тут нет мгновенного “корзина брошена”. Достаточно держать метрики в зелёной зоне, без погони за каждым баллом.
Можно выдохнуть – простая визитка для офлайн-бизнеса. Если сайт – это по сути электронная вывеска, на которую заходит десяток людей в день проверить адрес и телефон, гнаться за идеальным INP нет смысла. Достаточно, чтобы страница нормально открывалась на телефоне и не заставляла ждать. Деньги на глубокую оптимизацию тут лучше вложить во что-то другое.
Когда хватит доработки, а когда нужен редизайн
Хватит доработки, если сайт современный, структура нормальная, дизайн вас устраивает, а проблемы точечные: тяжёлые картинки, лишние скрипты, нет кеша. Это лечится доработкой сайта за несколько дней без переделки всего. Лучшее соотношение результата к вложениям.
Нужен редизайн, если сайт сделан лет 5-7 назад на устаревшей тяжёлой теме, код запутанный, каждая правка ломает что-то другое, а скорость – лишь одна из многих проблем рядом с неудобной мобильной версией и слабой конверсией. В таком случае оптимизировать старое – как ремонтировать двигатель, который уже отработал ресурс. Часто редизайн сайта с нуля на лёгкой основе выходит и дешевле, и надёжнее, чем бесконечное латание.
Если вы планируете новый сайт, закладывайте скорость в техническое задание сразу. Дешевле построить быстро с самого начала, чем оптимизировать после запуска. То же касается SEO – его тоже лучше закладывать на этапе создания сайта, а не доклеивать потом.
И последнее: скорость – не разовая акция. Сайт обрастает новыми страницами, акциями, баннерами, скриптами – и через полгода снова тормозит. Поэтому разумно держать мониторинг Core Web Vitals в рамках поддержки сайта, чтобы видеть проблему раньше, чем её увидит Google и посетитель. А если хотите целостную картину “где я сливаю деньги” – скорость входит отдельным блоком в маркетинговый аудит.
FAQ
-
Что такое Core Web Vitals простыми словами?
Это три метрики Google, которые в цифрах описывают удобство сайта для человека: быстро ли появилось главное (LCP), быстро ли сайт реагирует на клики (INP) и не прыгает ли контент во время загрузки (CLS). Сайт проходит проверку, когда все три показателя в зелёной зоне для 75% реальных посетителей. -
Как проверить скорость сайта - PageSpeed Insights, GTmetrix или Lighthouse?
Начните с PageSpeed Insights (pagespeed.web.dev): он бесплатный, показывает все три метрики Core Web Vitals и конкретные рекомендации. GTmetrix нужен для более глубокой диагностики через waterfall-диаграмму, а Lighthouse удобен для проверки страниц, закрытых от публичного доступа. Обязательно проверяйте мобильную версию - Google ранжирует именно по ней. -
Что такое LCP, INP и CLS и какие значения считаются хорошими?
LCP (появление главного элемента) хорошо до 2,5 секунды. INP (скорость отклика на действия) хорошо до 200 миллисекунд. CLS (прыжки макета) хорошо до 0,1. INP заменил старую метрику FID в марте 2024 года и измеряет отклик на все взаимодействия за сессию, а не только на первое. -
Как скорость сайта влияет на конверсии и SEO?
На конверсии - напрямую: по данным Google, при росте времени загрузки с 1 до 3 секунд вероятность отказа растёт на 32%, с 1 до 5 секунд - на 90%. То есть часть оплаченного рекламного трафика уходит, не дождавшись страницы. На SEO - через сигнал Page Experience: при прочих равных более быстрый и стабильный сайт ранжируется выше. -
Как ускорить WordPress, Tilda или OpenCart сайт?
Начинайте со сжатия изображений и перевода их в формат WebP - это самый большой выигрыш на любой платформе. Для WordPress добавьте кеширование и уберите лишние плагины. На Tilda сжимайте картинки до загрузки и убирайте тяжёлые анимации. Для OpenCart главное - серверное кеширование и оптимизация запросов к базе данных.