PageSpeed Insights и Core Web Vitals: как скорость влияет на позиции в Google и Яндекс
Скорость загрузки сайта ― уже давно перестала быть просто технической деталью, которую «было бы неплохо улучшить». Google и Яндекс оценивают её наравне с хорошим текстом и правильными заголовками. Если страница открывается медленно, поисковики опустят её ниже в выдаче. Быстрый сайт получит больше бесплатных посетителей из поиска и легче конвертирует их в покупателей.
Как проверить скорость
Есть два главных инструмента проверки. Первый – PageSpeed Insights. Он показывает, насколько быстро страница загружается в лаборатории (одинаковые условия для всех) и в жизни (у реальных людей). Второй – набор правил Core Web Vitals, три простых показателя, по которым Google прямо сейчас оценивает, удобен сайт или нет.
Google требует, чтобы эти три показателя были в зелёной зоне. Яндекс официально их не называет, но тоже следит за скоростью ответа сервера и за тем, сколько времени люди проводят на странице после загрузки. Ускоряете сайт для Google – Яндекс тоже поднимает его выше.
Что именно измеряют три главных показателя
Первый показатель – Largest Contentful Paint, или LCP
Это момент, когда на экране появляется самая важная часть страницы – основной заголовок, главное фото или видео. Google хочет, чтобы это происходило не дольше 2,5 секунды после клика по ссылке. Если у большинства посетителей главная картинка или текст загружаются больше 4 секунд – сайт считается медленным.
Второй показатель – Interaction to Next Paint, или INP
Он проверяет, как быстро сайт реагирует на действия: клик по кнопке, прокрутку, ввод текста в поле. Если нажатие и реакцию разделяет больше 0,2 секунды – показатель ухудшается. Один «тяжёлый» скрипт на странице может испортить всю картину.\
Третий показатель – Cumulative Layout Shift, или CLS
Он следит, чтобы элементы не прыгали по экрану во время загрузки. Читатель начал читать текст, а тут выскакивает баннер или реклама и всё съезжает вниз – за каждый такой сдвиг начисляется «штраф».
Откуда берутся самые частые проблемы
Самые частые причины плохих показателей:
- картинки слишком большого веса и без указанных размеров;
- рекламные блоки и виджеты, которые подгружаются позже основного контента;
- шрифты, которые меняют системные только после полной загрузки;
- всплывающие окна согласия на cookies без зарезервированного места;
- видео и слайдеры на главной странице без отложенной загрузки;
- слишком много сторонних скриптов аналитики и чатов.
Как ускорить сайт и не испортить дизайн
Картинки обычно составляют 60–70 % веса средней страницы. Переводите их в форматы WebP или AVIF, сразу указывайте точную ширину и высоту в коде. Уже на этапе создания сайта прописывайте эти размеры – страница перестанет дёргаться. Ленивая загрузка (когда картинки ниже первого экрана грузятся только при прокрутке) теперь работает сама по себе во всех современных браузерах.
Стили делите на две части. То, что нужно для первого экрана, вставляйте прямо в код страницы. Остальные стили подгружайте потом. Скрипты тоже делите: то, что отвечает за меню и форму, оставляйте в приоритете, всё остальное помечайте как «можно подождать».
Сервер должен отдавать первые данные быстрее 0,4–0,5 секунды. Помогают быстрый хостинг, включённое сжатие Brotli и сеть доставки контента (CDN). CDN хранит копии картинок и стилей ближе к посетителю – в Москве, Новосибирске, Берлине или Нью-Йорке.
Простые приёмы, которые дают результат уже через день-два:
- заранее подгружать самые важные картинки и шрифты,
- использовать системные шрифты или шрифты с командой «показывай сразу, даже если ещё не загрузился»,
- включать самые новые протоколы передачи данных,
- при разработке сайта собирать страницы на сервере заранее, если выбран сложный JavaScript-фреймворк.
Особенности мобильного ускорения
На телефонах всё сложнее: процессор слабее, интернет часто пропадает, экран маленький. Google проверяет показатели отдельно для телефонов и компьютеров, но в мобильной выдаче смотрит только на мобильные цифры. Часто бывает: на компьютере всё зелёное, на телефоне – красное из-за одного слайдера.
На телефонах особенно важно:
- оставлять меньше 150–170 КБ скриптов,
- сжимать всё максимально сильно,
- показывать картинки нужного размера сразу, а не огромные с последующим уменьшением,
- отключать тяжёлые анимации и эффекты параллакса.
Многие компании собирают две версии страницы: лёгкую для телефонов и обычную для компьютеров.
Как скорость влияет на трафик и конверсию
Google использует эти три показателя как решающий голос: если два сайта одинаково хорошо отвечают на запрос, выше окажется тот, который быстрее. В высококонкурентных темах (финансы, недвижимость, медицина, образование) разница в 3–7 позиций только из-за скорости – обычное дело.
Яндекс тоже поднимает быстрые сайты, просто смотрит чуть на другие цифры: как быстро сервер ответил и сколько времени человек провёл на странице после загрузки.
Когда движок для сайта изначально быстрый и правильно настроен, посетители успевают:
- дочитать карточку товара и положить его в корзину,
- заполнить форму даже при слабом интернете,
- дождаться ответа чат-бота и продолжить диалог,
- перейти на вторую и третью страницу вместо одной.
Что обычно происходит после правильного ускорения:
- бесплатный трафик из поиска растёт на 12–40 % за 3–6 месяцев,
- процент покупок или заявок из этого трафика увеличивается на 15–35 %,
- люди смотрят 3–4 страницы вместо 1,5–2,
- стоимость привлечения клиента падает на 8–25 % при том же рекламном бюджете.
Как скорость удешевляет рекламу
Быстрый сайт делает дешевле и эффективнее контекстную и таргетированную рекламу. Яндекс.Директ учитывает скорость целевой страницы при расчёте ставки. Страница с хорошими показателями получает скидку до 15–20 % за клик. Тот же бюджет приносит на 20–30 % больше переходов.
Внутри сайта быстрые страницы поднимают показатель качества в рекламе: человек кликнул → сразу увидел товар → добавил в корзину → купил. Цепочка не рвётся на этапе долгой загрузки.
Что происходит, когда добавляете новые функции
Любой новый слайдер, чат, поп-ап или аналитика добавляет вес и замедляет сайт. Через 6–12 месяцев после запуска даже изначально быстрый проект может упасть в красную зону. Поэтому крупные компании проверяют скорость перед каждым крупным обновлением и раз в квартал делают полный аудит.
Как проверять скорость без специальных знаний
Не нужно быть программистом. Достаточно раз в месяц заходить в PageSpeed Insights, вводить адрес главной страницы и нескольких важных внутренних страниц (каталог, карточка товара, контакты). Смотрите только три цифры:
- LCP (главная картинка) – зелёный до 2,5 секунды
- INP (реакция на клик) – зелёный до 0,2 секунды
- CLS (прыгание элементов) – зелёный до 0,1
Если хотя бы одна цифра оранжевая или красная – вызывайте разработчика с конкретным запросом «починить вот этот показатель».
Простой список, который стоит держать под рукой, когда планируете создать сайт или разработать сайт:
- главная картинка появляется быстрее 2,5 секунды у большинства,
- сайт реагирует на нажатие быстрее 0,2 секунды,
- элементы не прыгают по экрану,
- сервер отвечает быстрее 0,4 секунды,
- картинки весят разумно и сразу нужного размера,
- лишних скриптов почти нет,
- включена сеть доставки контента.
Держите эти пункты в техническом задании с самого начала. Следить за скоростью – это не разовая работа, а привычка, которая каждый месяц приносит больше посетителей и заказов без увеличения рекламного бюджета.
