Медленный сайт теряет клиентов и позиции. Google измеряет скорость тремя показателями, которые называются Core Web Vitals. Вот они простым языком, как измерить скорость вашего сайта и что исправлять в первую очередь. Мы также показываем, что сделали на нашем собственном сайте.
Три показателя Core Web Vitals
| Показатель | Что измеряет | Хороший результат |
|---|---|---|
| LCP (Largest Contentful Paint) | Как быстро появляется самый большой видимый элемент (изображение, заголовок) | до 2,5 секунды |
| INP (Interaction to Next Paint) | Как быстро страница отвечает на клик или касание | до 200 мс |
| CLS (Cumulative Layout Shift) | «Прыгает» ли страница при загрузке | до 0,1 |
Это рекомендуемые пороги, опубликованные Google. Хорошая скорость улучшает и опыт посетителя, и позиции в поиске.
Как измерить скорость вашего сайта
- PageSpeed Insights: введите адрес и получите результат для мобильного и компьютера. По умолчанию показывается мобильный, он строже.
- Google Search Console: отчёт «Core Web Vitals» показывает данные реальных пользователей (если на сайте достаточно посетителей).
- Lighthouse в Chrome: в инструментах разработчика, подходит для тестирования во время разработки.
Помните: лабораторное измерение (Lighthouse) — это симуляция, и от запуска к запуску оно колеблется на несколько пунктов. Полевые данные (реальные пользователи) показывают настоящую картину.
10 вещей, которые больше всего ускоряют сайт
- Изображения: правильный размер (не 4000 px, если показывается 800 px), сжатые, по возможности в современном формате (WebP/AVIF). Обычно самая большая выгода.
- Ленивая загрузка: изображения, которых нет на первом экране, загружайте только при прокрутке (
loading=«lazy»). - Шрифты: размещайте шрифты на своём сервере (а не у третьей стороны), используйте только нужные начертания и языки и предзагружайте критичные шрифты (
preload). - Сторонние скрипты: каждый внешний скрипт (трекинг, чат, виджеты) замедляет страницу. Уберите ненужные.
- Критичные CSS и JavaScript: файлы, блокирующие отображение, должны быть небольшими; остальное загружайте позже (
defer). - Видео: фоновое видео должно быть крошечным, без звуковой дорожки и с отдельной мобильной версией; используйте изображение
poster. - Хостинг и CDN: быстрый сервер и сеть доставки контента приближают файлы к посетителю.
- Кэширование: используйте длинные заголовки кэша для статических файлов.
- Плагины и конструкторы: у каждого плагина есть цена. В WordPress держите число плагинов небольшим.
- Смещения макета: задавайте размеры изображениям и видео и резервируйте место, чтобы страница не двигалась при загрузке.
Пример: наш собственный сайт
Мы измерили скорость собственного сайта и улучшили её. Вначале мобильная производительность главной страницы была около 74–80 баллов (тяжёлый контент, внешние шрифты и скрипты). Что мы сделали:
- Перенесли шрифты и библиотеку анимации на собственный сервер и предзагружаем критичные шрифты.
- Сделали все изображения вне первого экрана лениво загружаемыми и сократили их вес более чем вдвое.
- Выделили небольшие фоновые видео для мобильных и добавили предзагрузку постера.
- Перенесли анимацию текста первого экрана в CSS, чтобы она не зависела от JavaScript.
Результат в Google Lighthouse: 100 / 100 / 100 / 100 на компьютере и производительность 93+ на мобильном при 100 по остальным. Проверьте сами: PageSpeed Insights.
Как платформа влияет на скорость
Конструкторы и WordPress удобны, но у скорости там часто есть потолок: вместе со страницей загружается много кода, который вы не контролируете. Сайт, написанный вручную, или Webflow дают максимум контроля. Сравнение: Wix, WordPress или Tilda.
Частые вопросы
Какой результат PageSpeed Insights считается хорошим?
Google считает хорошим зелёный результат (90–100). Важны и Core Web Vitals: LCP до 2,5 с, INP до 200 мс и CLS до 0,1.
Влияет ли скорость на SEO?
Да, Core Web Vitals входят в оценку Google, хотя содержание и релевантность важнее. Скорость влияет и на то, останется ли посетитель на странице.
Почему мобильный результат ниже, чем на компьютере?
Мобильный тест имитирует более медленное соединение и более слабое устройство, поэтому он строже. На мобильном стоит сосредоточиться, потому что оттуда приходит большинство посетителей.
Можете ли вы ускорить мой сайт?
Да. Мы проверим ваш сайт, покажем, что его замедляет, и предложим решение. Если сайт устарел, возможно, разумнее сделать новый. Запросите предложение.
Хотите быстрый сайт, который нравится Google?
Мы делаем сайты, которые быстрые и дружелюбные к SEO с первого дня.