Скорость загрузки · Core Web Vitals

Какие пороговые значения у Core Web Vitals?

Google считает «хорошими» LCP не более 2.5 с, INP не более 200 мс (0.2 с) и CLS не более 0.1. Страница проходит Core Web Vitals, только если все три показателя «хорошие».

Оценивают не по одному визиту, а по 75-му процентилю визитов. Проще говоря, «хорошо» — это когда не менее 75 из 100 клиентов получают скорость в пределах нормы. Телефоны и компьютеры считаются отдельно.

Раньше был показатель FID, измерявший только реакцию на первый клик, но с 03.2024 его заменил INP, учитывающий реакцию на все клики · касания. Встретив в старых статьях нормативы FID, помните, что сейчас всё иначе.

Как измерить скорость сайта в PageSpeed Insights?

Достаточно ввести адрес в бесплатный инструмент Google PageSpeed Insights. Экран результатов делится на две части — данные реальных посетителей и диагностику повторного машинного замера, и главное — читать их по отдельности.

1. 01Откройте pagespeed.web.dev, введите адрес своего сайта и нажмите «Анализировать».
2. 02Когда появятся результаты, сначала смотрите вкладку «Мобильный телефон»: большинство клиентов заходит с телефона.
3. 03В верхнем блоке «Реальные пользователи» проверьте, «хорошие» ли LCP · INP · CLS. Это данные пользователей Chrome за последние 28 дней — им можно доверять больше всего.
4. 04При малом числе посетителей реальные данные могут показываться как «Нет данных». Тогда ориентируйтесь на балл в нижнем блоке «Диагностика проблем с производительностью».
5. 05Если сделать скриншот пунктов улучшения по изображениям и JavaScript под диагностикой, можно точно сформулировать запрос подрядчику.
6. 06Проверьте не только главную, но и по одной страницы, которые клиенты смотрят чаще, — меню, запись, как добраться.

Почему балл PageSpeed каждый раз разный?

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

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

Гнаться за 100 баллами не нужно. Google тоже пишет, что погоня за идеальным баллом ради одного лишь поиска — не лучшее использование времени. Если «Реальные пользователи» показывают «хорошо», сайт поддерживается достаточно хорошо.

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

Из-за чего сайт обычно начинает тормозить?

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

Разные причины ухудшают разные показатели. Тяжёлое главное фото портит LCP, тяжёлый внешний код — INP, а фото без заданных размеров и поздно появляющиеся баннеры — CLS.

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

• Оригинальные фото с телефона загружены без уменьшения
• На первом экране — автовоспроизведение видео или большой слайдер
• Подключено несколько виджетов: онлайн-чат · лента Instagram · отзывы
• Остались неиспользуемые коды отслеживания или старые рекламные коды
• Загружается несколько шрифтов или используется медленный сервер далеко от клиентов

Что попросить у подрядчика, поручая ускорение сайта?

Лучше ставить задачу с целью: не «сделайте быстрее», а «такой-то показатель на такой-то странице — до „хорошо“». Тогда можно сравнить «до» и «после» и есть критерий завершения работы.

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

• Список страниц и целевые показатели (например, LCP главной на телефоне — «хорошо»)
• Скриншоты результатов PageSpeed Insights до и после работ
• Список подключённых внешних кодов · виджетов с отметкой обязательных
• Уменьшаются ли новые фото при загрузке автоматически
• Кто и когда проверяет, если в ходе техподдержки скорость снова упадёт

Как следить за скоростью сайта небольшого заведения?

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

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

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

ISSYMO закладывает оптимизацию изображений и быстрый первый экран в базовую настройку до запуска, а в подписке на техподдержку каждый месяц проверяет, не появились ли новые тяжёлые изображения.