Представьте: человек кликнул на ваш сайт из поиска, экран секунду остаётся белым, потом картинки начинают прыгать, кнопка уезжает из-под пальца. Через три секунды он закрывает вкладку и уходит к конкуренту. Вы даже не узнаете, что потеряли клиента, потому что он не оставил ни заявки, ни следа.
Скорость загрузки сайта влияет на две вещи сразу: сколько людей дождутся открытия страницы и как высоко сайт стоит в выдаче. Google и Яндекс давно считают скорость одним из факторов ранжирования, и набор показателей, по которым Google оценивает удобство сайта, называется Core Web Vitals (основные интернет-показатели).
В этой статье разберём по-человечески: что такое Core Web Vitals, какие четыре цифры за этим стоят, как проверить скорость своего сайта бесплатно за пять минут и в каком порядке всё чинить, чтобы не утонуть в технических деталях. Если вы только присматриваетесь к технической стороне сайта, начните с обзорной статьи про технический аудит сайта: там разобрано, из чего вообще складывается «здоровье» страницы.
Материал для владельца сайта, начинающего вебмастера и SEO-новичка. Кода почти не будет, программистом быть не нужно. Каждый непонятный термин поясняем прямо в тексте при первом упоминании.
А если хочется разобраться в продвижении системно и перестать латать дыры по одной, загляните в нашу подборку курсов по SEO-продвижению: там 145 программ от коротких интенсивов до полноценных профессий, где скорость сайта разбирают вместе с остальной технической оптимизацией.
КурсыСравнение 108 курсов по поисковой оптимизации (seo)Цены, школы, длительность, рассрочка
Что такое Core Web Vitals простыми словами
Core Web Vitals — это три главных показателя, по которым Google измеряет, насколько удобно живому человеку пользоваться вашим сайтом. Оценивают конкретные, измеримые вещи: быстро ли появился контент, быстро ли сайт ответил на нажатие, не прыгала ли вёрстка во время загрузки. Дизайн и вкусы тут ни при чём. Метрика — это просто измеримый показатель, цифра, по которой можно сравнивать сайты между собой.
Google собирает эти цифры с реальных посетителей через браузер Chrome и использует их при ранжировании. Сайт, который открывается быстро и не раздражает, получает небольшое преимущество в выдаче. Сайт, который тормозит, проигрывает при прочих равных. Поэтому Core Web Vitals интересны не только программистам, но и всем, кто хочет, чтобы сайт находили.
Главное про CWV. Метрики оценивают ощущение скорости у живого посетителя. Дизайн и вкусовщина тут ни при чём: Google смотрит на три цифры и подмешивает их в ранжирование вместе с сотней других сигналов.
Важный нюанс: скорость — это фактор, но не единственный и не главный. Контент, ссылки, соответствие запросу весят больше. Но когда два сайта одинаково хороши по смыслу, быстрый обойдёт медленный. И чем выше конкуренция в нише, тем чаще именно техническая сторона решает, кто будет на первом экране.
Четыре метрики скорости: сводная таблица
Официальных метрик Core Web Vitals три: LCP, INP и CLS. К ним вплотную примыкает четвёртая, TTFB: она формально не входит в тройку, но влияет на остальные и часто становится корнем проблемы. Ниже собрали все четыре в одной таблице: что измеряет, какой порог считается хорошим, и где главная причина, если показатель красный. Сразу закроем частый вопрос, какая должна быть скорость загрузки сайта: ориентир по каждой метрике стоит в колонке «хороший порог».
| Метрика | Что измеряет | Хороший порог | Главная причина проблемы |
|---|---|---|---|
| LCP Largest Contentful Paint |
За сколько прорисовывается самый крупный элемент экрана (обычно главная картинка или заголовок) | до 2,5 секунды | тяжёлые картинки, медленный хостинг, файлы, тормозящие показ |
| INP Interaction to Next Paint |
За сколько сайт реагирует на действие: клик, тап, ввод в форму | до 200 миллисекунд | тяжёлые скрипты, которые занимают браузер и не дают ответить |
| CLS Cumulative Layout Shift |
Насколько прыгает вёрстка во время загрузки (сдвиг макета) | меньше 0,1 | картинки и блоки без заданных размеров, поздняя реклама, шрифты |
| TTFB Time to First Byte |
Время до первого байта: сколько сервер «думает» перед тем, как начать отвечать | до 0,8 секунды | дешёвый хостинг, отсутствие кеша, тяжёлый сайт без оптимизации |
Теперь по одному абзацу на каждую, чтобы вы понимали суть. За подробным разбором с диагностикой и решениями идите по ссылкам на отдельные статьи, в каждой из них одна метрика расписана от и до.
LCP — скорость показа главного контента
LCP (Largest Contentful Paint, «отрисовка самого крупного элемента») отвечает на вопрос: за сколько секунд посетитель увидел главное на экране. Чаще всего это большая картинка в шапке или крупный заголовок. Если до неё проходит больше 2,5 секунды, человек уже чувствует, что сайт «грузится». Главные виновники: тяжёлые неоптимизированные картинки и медленный сервер. Как точно найти свой LCP-элемент и ускорить его, разобрали в отдельной статье как улучшить LCP.
INP — скорость отклика на действия
INP (Interaction to Next Paint, «отклик на следующую отрисовку») измеряет, быстро ли сайт отвечает, когда вы что-то нажимаете. Кликнули по кнопке: она сработала мгновенно или подвисла на полсекунды? Хороший порог: до 200 миллисекунд. Тормозит обычно из-за тяжёлых скриптов, которые занимают браузер и не дают ему отреагировать. Эта метрика появилась в марте 2024 года и заменила старую FID, так что многие гайды про неё ещё молчат. Подробности в статье как улучшить INP.
CLS — стабильность вёрстки
CLS (Cumulative Layout Shift, «накопительный сдвиг макета») ловит ту самую ситуацию, когда вы читаете текст, а он вдруг прыгает вниз, потому что сверху догрузилась картинка или баннер. Или хотите нажать кнопку, а она уезжает из-под пальца. Хороший CLS: меньше 0,1. Виноваты обычно картинки и блоки без заданных размеров: браузер не знает, сколько места под них зарезервировать, и двигает всё остальное. Разбор причин и решений в статье как улучшить CLS.
TTFB — время ответа сервера
TTFB (Time to First Byte, «время до первого байта») показывает, сколько ваш сервер думает, прежде чем начать отдавать страницу. Это фундамент: пока сервер молчит, не может начаться ничего: ни показ контента, ни отрисовка. Поэтому высокий TTFB тянет вниз и LCP. Хороший порог: до 0,8 секунды. Главные причины: дешёвый хостинг (сервер, на котором живёт сайт) и отсутствие кеша. Полный разбор с настройкой в статье как уменьшить TTFB.
Нужно ли это вообще для SEO
Частый вопрос новичка: «У меня нормальный контент, может, на скорость можно забить?» Короткий ответ: забить нельзя, но и переоценивать не стоит.
Google официально подтвердил, что Core Web Vitals входят в оценку страницы. Это один из факторов ранжирования, наряду с десятками других. У Яндекса своя кухня, но логика та же: медленные сайты с плохим поведением посетителей он тоже двигает вниз, потому что считает их менее удобными.
Здесь работает простая связка. Медленный сайт: больше людей уходят, не дождавшись загрузки. Больше уходов, хуже поведенческие сигналы. Хуже поведенческие, ниже позиции. То есть скорость влияет на выдачу не только напрямую, но и через поведение живых людей. На широких темах, кроме скорости, в игру вступает и качество самого контента: за этим стоит отдельный пласт сигналов доверия, мы его разбираем в материале про E-E-A-T.
Честный масштаб. Скорость не вытащит слабую статью в топ. Но если контент и ссылки у вас на уровне конкурентов, быстрый сайт получит перевес. Чем плотнее ниша, тем заметнее этот перевес.
Как проверить скорость загрузки сайта
Хорошая новость: проверить скорость можно бесплатно и без программиста. Тест скорости загрузки сайта и подробный анализ скорости делают несколько сервисов, разница между ними в глубине отчёта. Вот основные.
| Инструмент | Что даёт | Кому подойдёт |
|---|---|---|
| Google PageSpeed Insights pagespeed.web.dev |
Оценка всех четырёх метрик для мобильной и десктопной версии, плюс список конкретных проблем | всем как первый шаг |
| Lighthouse встроен в браузер Chrome |
Разовый тест прямо в браузере, удобно проверять черновики и закрытые страницы | когда нужно проверить страницу до публикации |
| GTmetrix | Детальный отчёт с водопадом загрузки: видно, какой файл сколько грузился | тем, кто хочет копнуть глубже |
| Яндекс.Вебмастер | Показывает скорость глазами Яндекса и проблемы конкретных страниц вашего сайта | если продвигаетесь под Яндекс |
Если непонятно, с чего начать, открывайте Google PageSpeed Insights: проверка скорости сайта проще всего начинается именно с него. Заходите на pagespeed.web.dev, вставляете адрес страницы, жмёте «Анализ». Через несколько секунд получаете оценку и список того, что замедляет сайт. Проверяйте не только главную, но и пару важных внутренних страниц: на них картина часто хуже.
Один важный момент, который сбивает с толку всех новичков: проверять стоит и мобильную версию, и десктопную отдельно, и почти всегда мобильная оценка ниже. Почему так, разберём чуть ниже.
Полевые и лабораторные данные: почему цифры разные
Вот ситуация, которая ставит новичка в тупик. Вы открываете PageSpeed, видите наверху красные цифры, прокручиваете ниже, а там зелёный результат теста. Или наоборот. Кажется, что сервис врёт. На самом деле он показывает два разных типа данных, и понимать разницу важно.
Полевые данные (в отчётах их называют Field Data) собраны с реальных посетителей вашего сайта за последние 28 дней. Этот массив замеров от живых пользователей Chrome называется CrUX (Chrome User Experience Report). Это люди с разными телефонами, разным интернетом, из разных городов. Именно эти данные Google использует при ранжировании.
Лабораторные данные (Lab Data) собирает встроенный движок Lighthouse: он прямо сейчас открывает вашу страницу в одинаковых тепличных условиях и замеряет скорость. Тест повторяемый, у вас и у конкурента он считает одинаково, поэтому удобен для сравнения. Но это симуляция, а не живые люди.
Запомните правило. Полевые данные важнее лабораторных, потому что именно по ним Google ранжирует. Если в лаборатории зелено, а в поле красно, значит, у реальных посетителей всё хуже, чем в тесте, и копать надо в сторону медленного интернета и старых телефонов.
У нового сайта или малопосещаемой страницы полевых данных может вообще не быть: Google ещё не набрал статистику. Тогда ориентируйтесь на лабораторные, но помните, что это прикидка.
Мобильная и десктопная скорость: почему мобильная всегда хуже
Если десктопная оценка зелёная, а мобильная жёлтая или красная, это нормально и поправимо. Телефон считает медленнее ноутбука, мобильный интернет нестабильнее проводного, а Google специально замеряет в условиях небыстрой сети, потому что у реальных людей она именно такая.
Ориентироваться стоит в первую очередь на мобильную версию. Большая часть трафика сегодня идёт с телефонов, и Google оценивает сайт прежде всего по мобильной версии. Если выбирать, что чинить первым, выбирайте мобильную.
Почему тормозит сайт: частые причины
Прежде чем браться за починку, полезно понять, что вообще замедляет сайт. В девяти случаях из десяти виноват кто-то из этого списка.
- Тяжёлые картинки. Фотография на 5 мегабайт, втиснутая в маленький блок. Самая частая и самая легко исправимая причина.
- Дешёвый или перегруженный хостинг. Сервер не справляется и долго отвечает. Отсюда высокий TTFB и медленное открытие.
- Куча скриптов. Счётчики, чаты, виджеты, всплывашки. Каждый занимает браузер и бьёт по отклику (INP).
- Нет кеша. Кеш (кеширование) — это сохранённая готовая копия страницы. Без него сервер собирает страницу заново на каждый запрос.
- Нет CDN. CDN (Content Delivery Network) — сеть серверов по всему миру, которая раздаёт сайт с ближайшего к посетителю узла. Без неё человек из Владивостока ждёт ответ из Москвы. Что это такое и как подключить, мы разобрали в статье что такое CDN.
- Блоки без размеров. Браузер не знает, сколько места отвести под картинку, и двигает вёрстку, когда она догружается. Это бьёт по CLS.
КурсыСравнение 146 курсов по веб-разработкеЦены, школы, длительность, рассрочка
План действий: с чего начать
Как ускорить сайт и не сойти с ума от списка рекомендаций? Идти по приоритетам. Самая частая ошибка новичка: увидеть в PageSpeed двадцать пунктов и пытаться сделать всё сразу. Так можно неделю возиться с мелочью и не сдвинуть главную цифру. Правильнее начинать с того, что даёт максимальный эффект за минимум усилий.
Шаг 1 — картинки
Начните с картинок, это самый быстрый выигрыш. Сожмите тяжёлые фотографии, переведите их в современный формат WebP (он легче обычного JPEG при том же качестве). Включите отложенную загрузку (lazy load) — это когда картинки ниже экрана грузятся только тогда, когда посетитель до них доскроллил. Одно важное исключение: на главную картинку в шапке отложенную загрузку ставить не нужно, иначе она появится позже и испортит LCP.
Шаг 2 — хостинг и кеш
Если сервер долго отвечает, включите кеширование (на популярных движках вроде WordPress это делается плагином за пару кликов) и проверьте тариф хостинга. Переезд с самого дешёвого виртуального хостинга на тариф получше иногда срезает TTFB вдвое. Если делаете сайт на WordPress с нуля, базовые вещи мы собрали в гайде как создать сайт на WordPress.
Шаг 3 — скрипты и оформление
Уберите счётчики и виджеты, которыми не пользуетесь, каждый из них замедляет отклик. Тяжёлые скрипты подключайте с атрибутом, который разрешает грузить их в фоне, не задерживая показ страницы. Сюда же относится работа со стилями: оформление сайта задаёт CSS, и если стилей много и они грузятся первыми, страница ждёт их вместо того, чтобы показаться.
КурсыСравнение 84 курсов по frontend-разработкеЦены, школы, длительность, рассрочка
Шаг 4 — стабильность и тонкая настройка
Проставьте картинкам и встроенным блокам явные размеры, чтобы вёрстка не прыгала. Зарезервируйте место под рекламу и поздний контент. На этом этапе подключают CDN и точечно докручивают остальное. Это уже шлифовка: к ней переходят, когда крупные проблемы закрыты.
Принцип приоритета. Картинки и хостинг дают 80 % результата за 20 % усилий. Начинайте с них, а тонкую настройку оставьте на потом, иначе утонете в мелочах и не сдвините главное.
Чек-лист: проверьте сайт за 10 минут
Если хочется быстро понять, в каком состоянии сайт и за что хвататься, пройдите по пунктам. На каждый уйдёт минута.
- Открыли pagespeed.web.dev, вставили адрес главной, посмотрели мобильную оценку.
- Проверили заодно пару важных внутренних страниц, а не только главную.
- Посмотрели, есть ли полевые данные (Field Data). Если есть, ориентируетесь на них.
- Записали, какие из четырёх метрик красные или жёлтые: LCP, INP, CLS, TTFB.
- Глянули в список проблем: если наверху «оптимизируйте изображения», начинаете с картинок.
- Проверили вес главной картинки в шапке. Больше 300 килобайт, сжимаете.
- Уточнили у хостинга или в панели, включено ли кеширование.
- Прокрутили сайт на телефоне и посмотрели, прыгает ли вёрстка при загрузке.
- Посчитали сторонние виджеты и счётчики: всё ли это вам нужно.
- Решили, какую одну метрику чините первой, и открыли разбор именно по ней.
Десять минут, и у вас есть понимание, что не так и с чего начинать. Дальше берёте конкретную метрику и идёте в её разбор по ссылкам из таблицы выше.
Где научиться оптимизации и SEO
Скорость сайта входит в техническое SEO, и разбираться в ней с нуля по обрывкам статей долго. Если хочется системы вместо вечного гугления, имеет смысл один раз пройти нормальный курс: там скорость, аудит, аналитику и продвижение собирают в единую картину, и вы перестаёте действовать наугад.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Performance-маркетинг в SEO Перейти на сайт курса |  Skillbox | 54 600 ₽ | 4550 ₽/мес. | 4 месяца | Обзор курса |
| Профессия «SEO-специалист с нуля до PRO» Перейти на сайт курса | Skillbox | 100 733 ₽ | 4579 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-специалист PRO Перейти на сайт курса |  Нетология | 116 820 ₽ | 4867 ₽/мес. | 4 месяца | Обзор курса |
| SEO-специалист: базовый курс Перейти на сайт курса | Нетология | 44 700 ₽ | 2483 ₽/мес. | 4 месяца | Обзор курса |
| SEO-специалист: курс от AMDG Перейти на сайт курса | Skillbox | 55 245 ₽ | 4597 ₽/мес. | 4 месяца | Обзор курса |
| Профессия «SEO-специалист» Перейти на сайт курса | Skillbox | Бесплатно | 3320 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-специалист Перейти на сайт курса | Нетология | 92 500 ₽ | 3084 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-продвижение Перейти на сайт курса |  DSA | 27 500 ₽ | 2291 ₽/мес. | 1 месяц | Обзор курса |
| Факультет SEO-продвижения Перейти на сайт курса |  GeekBrains | 104 700 ₽ | 2908 ₽/мес. | 12 месяцев | Обзор курса |
| Международное SEO Перейти на сайт курса | Skillbox | 67 937 ₽ | 4199 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по поисковой оптимизации (seo)
Дальше по теме полезно почитать, как устроен технический аудит сайта целиком, и с чего начать, если сайта пока нет, гайд как создать сайт самому без программирования проведёт за руку.
А самый верный способ не растеряться: открыть PageSpeed прямо сейчас, посмотреть свои цифры и начать с картинок. Через час сайт уже станет заметно быстрее, а вы будете понимать, что делаете и зачем.
