Скорость сайта: Core Web Vitals простыми словами и как ускорить страницу

Почему скорость важна

Страница, которая медленно грузится, теряет посетителей: человек не ждёт и открывает конкурента. Скорость влияет и на позиции в поиске, потому что Google оценивает удобство страницы и использует так называемые Core Web Vitals. На телефонах, где связь нестабильна, проблема ещё заметнее, а именно оттуда приходит большая часть клиентов.

Три показателя, которые оценивает Google

Core Web Vitals — это три показателя. Ориентиры Google, при которых опыт считается хорошим:

• LCP (Largest Contentful Paint) — время, за которое появляется самый крупный элемент контента (обычно главное изображение или заголовок). Хорошо: не больше 2,5 секунды.
• INP (Interaction to Next Paint) — отзывчивость страницы на действия: клики, касания, ввод текста. Хорошо: не больше 200 миллисекунд.
• CLS (Cumulative Layout Shift) — «прыжки» элементов во время загрузки: кнопка убегает именно тогда, когда на неё нажимаешь. Хорошо: не больше 0,1.

Эти показатели оцениваются по реальным пользователям (лабораторные результаты могут отличаться), поэтому не стоит слишком доверять одному тесту. Важна тенденция.

Как проверить

1. Откройте PageSpeed Insights и введите адрес страницы. Смотрите и мобильный, и десктопный результат.
2. В Search Console в разделе «Основные интернет-показатели» видно, сколько ваших страниц в хорошем, среднем и плохом состоянии по данным реальных посетителей.
3. Откройте сайт на своём телефоне через мобильный интернет, а не через Wi-Fi.
4. Проверьте типичные страницы: главную, страницу услуги, контакты и, если есть, карточку товара.

Частые причины медленной загрузки и что с ними делать

Тяжёлые изображения

Самая частая проблема. Фотографии по несколько мегабайт без сжатия тормозят страницу. Решение: сжать изображения, использовать современные форматы (WebP, AVIF), указывать правильные размеры и загружать картинки, когда они попадают в зону видимости (кроме первого экрана). Указывайте ширину и высоту изображений, чтобы страница не «прыгала» (хороший CLS).

Лишние скрипты и виджеты

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

Блокирующие CSS и JavaScript

Если страница ждёт большие файлы стилей и скриптов, прежде чем показать контент, LCP ухудшается. Уменьшайте файлы, объединяйте их, откладывайте ненужное сразу и используйте настройки кэша.

Шрифты

Много шрифтов и их начертаний замедляют загрузку. Используйте два–три шрифта, только нужные начертания и указывайте шрифт по умолчанию, чтобы текст появлялся сразу.

Хостинг и сервер

Медленный сервер или далёкий дата-центр увеличивают время первого ответа. Выбирайте хостинг с европейскими серверами, включите сжатие и кэширование, используйте актуальную версию PHP, если сайт на ней работает.

Конструктор или «тяжёлый» контент

В некоторых конструкторах и системах с множеством плагинов страница получает много лишнего кода. Индивидуально разработанный сайт обычно легче, потому что содержит только необходимое. Сравнение — в блоге на латышском: «Wix, Tilda vai individuāla mājaslapa».

Что с удобством на телефоне

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

Чек-лист

1. Показатели PageSpeed Insights для мобильной версии в хорошем диапазоне (LCP, INP, CLS).
2. Изображения сжаты, в современных форматах, с указанными размерами.
3. Лишние скрипты и виджеты убраны.
4. CSS и JavaScript уменьшены, ненужное отложено.
5. Небольшое количество шрифтов.
6. Хостинг быстрый, сжатие и кэширование включены.
7. Мобильная версия проверена на настоящем телефоне.

Если не хотите заниматься этим сами, мы проводим аудит и приводим скорость в порядок как часть работы над сайтом.

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