Core Web Vitals: как ускорить сайт и что это даёт в выдаче

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

Клиент сидит в других условиях. Он едет в автобусе по Юнусабаду, телефону три года, из четырёх делений сети горят два. На третьей секунде белого экрана он нажимает «назад» и открывает конкурента.

Google измеряет ровно эту разницу и называет её Core Web Vitals. Это три показателя, которые снимаются из браузеров живых посетителей. Ниже — что они значат, как читать отчёт и с чего начинать, если сайт надо ускорить.

Что такое Core Web Vitals и что измеряют три показателя

Core Web Vitals — три числа о том, насколько удобно страница открывается для человека. Их снимают не секундомером в офисе, а из браузеров тех, кто действительно заходил на сайт. Оценку ставят не по среднему значению, а по 75-му процентилю визитов: каждый четвёртый самый тяжёлый заход тоже идёт в зачёт.

LCP — когда дорисовалось главное

LCP показывает, когда полностью отрисовался самый крупный видимый элемент страницы — обычно это главная картинка или большой заголовок. Границы Google: до 2,5 секунды хорошо, до 4 секунд надо править, дальше плохо.

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

INP — сколько ждёт ответа нажатие

INP меряет, как быстро страница отвечает на нажатие, тап и ввод с клавиатуры: вы нажали кнопку — когда на экране что-то изменилось. Границы: до 200 миллисекунд хорошо, до 500 миллисекунд надо править, выше плохо. Прокрутка и движение мыши сюда не входят.

Главная причина плохого INP — скрипты, занявшие браузер. В магазине кнопка «В корзину» полсекунды молчит, клиент жмёт второй раз, и в корзине оказываются две штуки. Дальше он видит удвоенную сумму в окне оплаты Payme и уходит совсем.

CLS — прыгает ли страница перед глазами

CLS считает неожиданные сдвиги: вы начали читать, сверху догрузился баннер, и весь текст уехал вниз. Границы: до 0,1 хорошо, до 0,25 надо править, выше плохо.

Обычные виновники — картинки без указанных размеров и виджеты, которые приезжают последними. Карта 2GIS на странице контактов встаёт позже текста и сдвигает вниз кнопку «Отправить заявку». Палец в этот момент уже летит по старым координатам.

Как читать отчёт PageSpeed Insights

Большинство открывает PageSpeed Insights и смотрит одно число — балл сверху, от 0 до 100. Именно здесь начинается главная путаница.

В отчёте два разных набора данных, и меряют они не одно и то же:

• Данные живых пользователей. Верхний блок собран из браузера Chrome по визитам за последние 28 дней. Оценка Core Web Vitals берётся именно отсюда.
• Лабораторный замер. Нижний цветной балл — результат Lighthouse, который открыл страницу один раз на условном устройстве. Он удобен, чтобы искать ошибки, но это не оценка.

Поэтому балл бывает 92 при красных живых данных — и наоборот. Руководителю показывайте не балл, а три верхних показателя.

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

Те же три показателя лежат отдельным отчётом в Google Search Console, там страницы сгруппированы по типам. После правок проверку запускают вручную, а система наблюдает 28 дней. Если Search Console ещё не подключён, начните с инструкции как подключить Google Search Console. Заодно заведите Яндекс.Вебмастер: у Яндекса своя диагностика, и две панели смотрят на сайт по-разному.

Как ускорить сайт: пять главных причин медленной загрузки

Проблема почти всегда оказывается одной из этих пяти. Они расставлены по силе влияния.

• Сервер долго отвечает. Пока не пришёл первый ответ, рисовать нечего. На дешёвом общем хостинге на одной машине живут сотни сайтов, и появляется очередь.
• Тяжёлые картинки. Файл с телефона загружают как есть. Сорок товаров в каталоге — и страница весит десятки мегабайт.
• Лишние скрипты. Слайдер, виджет чата, два счётчика аналитики, пиксель рекламы. Каждый — отдельный файл и отдельное ожидание.
• Шрифты и стили блокируют отрисовку. Пока они не загрузились, браузер не показывает текст, и экран стоит пустой.
• Страница приезжает кусками. Каждый новый блок раздвигает соседей, содержимое прыгает, CLS портится.

У организатора мероприятий в Ташкенте на главной стояли три счётчика и два виджета чата. Два из них поставили год назад для пробы и забыли снять. Чтобы найти такие забытые скрипты, достаточно открыть вкладку сети в браузере.

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

Картинки — самый большой и самый простой выигрыш

На большинстве сайтов картинки занимают больше половины веса страницы. Поэтому работу начинают отсюда, и эта часть не трогает дизайн.

• Смените формат: WebP или AVIF при том же качестве заметно легче JPEG.
• Подгоните размер под место. Картинке, которая на странице занимает 600 точек в ширину, незачем лежать в 3000.
• Пропишите каждой картинке ширину и высоту. Браузер заранее займёт место, и страница не прыгнет.
• Отдавайте телефону отдельную, маленькую копию — это решает srcset.
• Нижним картинкам поставьте отложенную загрузку, а главной картинке первого экрана — не ставьте: именно она и окажется элементом LCP.

Оптовый магазин тканей у Чорсу после одного этого шага получил каталог, который открывается с телефона: картинки перевели в WebP и сохранили в двух размерах. В коде не поменялось ничего.

Лучше, чтобы это делал сам сайт, а не человек руками. Если загруженная через админку фотография сама сжимается и режется на нужные размеры, контент-менеджер не ошибётся и через год. При выборе платформы об этом обычно не спрашивают — сравнение собрано в статье WordPress, Tilda или свой сайт.

Хостинг и TAS-IX: сколько времени съедает расположение сервера

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

В Узбекистане у этого вопроса своя сторона. Местные провайдеры обмениваются трафиком через TAS-IX — точку обмена в Ташкенте. Сайт на местном хостинге доходит до местного посетителя этой короткой дорогой. Если сервер за границей, каждый запрос уходит из страны и возвращается обратно.

Но «местный» не значит автоматически «быстрый». На практике решают два вопроса сразу:

• Где ваша аудитория? Если клиенты только в Узбекистане, местный хостинг или сервер в ближнем регионе оправдан.
• Что за сервер? На дешёвом общем тарифе местная машина отвечает так же медленно. Здесь важен не адрес, а ресурсы и настройка.
• Аудитория смешанная? Компании с экспортом ставят CDN, и картинки со стилями отдаются с ближней к посетителю точки.

Проверка простая: откройте сайт с местного мобильного интернета и посмотрите время ответа сервера в отчёте PageSpeed Insights. Не гадайте — на двух хостингах замер выходит разным, и разница видна в секундах.

И не путайте домен с хостингом. Адрес в зоне .uz ничего не говорит о том, где стоит машина: домен может быть местным, а сервер — в другой стране. Смотрите, где сайт живёт, а не как он называется.

Мобильная скорость: телефон — не ваш компьютер

Проверять надо с телефона, потому что разница не только в интернете. Процессор телефона слабее и выполняет скрипты медленнее. Вес, незаметный на компьютере, на телефоне превращается в секунды.

Порядок работы такой:

• Откройте сайт с самого старого телефона в офисе. Новое устройство прячет проблему.
• Выключите Wi-Fi и проверьте на мобильном интернете, а потом ещё раз за городом.
• Убедитесь, что кнопки нажимаются пальцем. Слипшиеся ссылки дают промахи и раздражают.
• Не рисуйте на телефоне блоки, которые там не нужны. Большой слайдер надо не спрятать, а вообще не загружать.

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

Виджеты оплаты — отдельная статья веса. Кнопки Payme, Click и Uzum тянут свои скрипты. Если все три висят на каждой странице, вы платите за них временем при каждом заходе. Их место — страница оформления заказа, а не шапка сайта.

Насколько скорость влияет на выдачу — и насколько не влияет

Здесь стоит говорить честно. В документации Google прямо написано, что единого сигнала нет: ранжирующие системы смотрят на набор признаков, связанных с удобством страницы, и релевантный ответ может стоять высоко даже при среднем удобстве (Google: page experience).

Практических выводов два. Первый: медленный сайт не сделает слабый ответ сильным — сначала содержание. Второй: между двумя равными по сути страницами скорость перевешивает, особенно в мобильной выдаче.

Важнее другое: скорость работает и мимо выдачи. Быстрая страница — это клиент, который не нажал «назад», не бросил корзину и дозаполнил форму заявки. Этот эффект покажет не Google, а ваш собственный отчёт.

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

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

Обязательно ли набирать 100 баллов в PageSpeed?

Нет. На выдачу влияет не балл, а данные живых пользователей.

Погоня за последними десятью баллами обычно бесполезна: пока не снимете виджет чата и счётчик аналитики, они не наберутся, а снимете — потеряете нужный бизнесу инструмент. Если три показателя зелёные, работа сделана.

Почему на компьютере зелёно, а на телефоне красно?

Потому что это два разных замера. Мобильный тест имитирует слабый процессор и медленную сеть.

Если большинство ваших клиентов заходит с телефона, важен именно мобильный результат. Не гадайте: посмотрите отчёт по устройствам в Search Console или в своей системе аналитики.

Если ускорить сайт, позиции вырастут?

Большого скачка только за счёт скорости не ждите. Если страница слабее конкурента по содержанию, скорость не поставит её первой.

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

Сайт новый, пишет «недостаточно данных». Что делать?

Это не ошибка. Для живых данных нужны визиты, а у нового сайта их пока нет.

Пока работайте по лабораторным подсказкам: картинки, скрипты и ответ сервера. Когда посещаемость наберётся, живые данные появятся сами.

Можно ли ускорить сайт на WordPress?

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

Есть и предел. На сайте с десятками плагинов и тяжёлой темой каждая правка ломается на следующем обновлении. Тогда деньги на разгон выходят дороже, чем переход на новую платформу.

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