Производительность интерфейса

Пользователь не видит миллисекунд, он видит последствия: белый экран при открытии, кнопку «Купить», которая реагирует с задержкой, вёрстку, прыгающую под пальцем во время загрузки. Производительность складывается из трёх этапов — доставки ресурсов по сети, отрисовки страницы и работы скриптов после неё, — и тормозить может любой из них.

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

Как измеряют

Google предлагает три метрики Core Web Vitals:

• LCP — когда отрисован самый крупный элемент первого экрана; хороший результат — до 2,5 секунды.
• INP — задержка отклика на клики и нажатия; хорошо — до 200 миллисекунд. В 2024 году метрика заменила FID.
• CLS — насколько сдвигается вёрстка при загрузке; хорошо — до 0,1.

Замерить их можно в PageSpeed Insights и Lighthouse, а данные реальных посетителей видны в отчётах Search Console. Лабораторный замер на мощном компьютере обычно оптимистичнее того, что видят люди со смартфонов.

Частые причины тормозов

• Тяжёлые изображения. Фото с камеры в слайдере на главной — без сжатия и без srcset.
• Лишний JavaScript. Конструкторы страниц, виджеты чатов, десяток счётчиков выполняются в одном потоке и задерживают отклик.
• Сдвиги вёрстки. Картинки без размеров и баннеры, вставленные после загрузки, двигают текст.

<img src="hero.webp" width="1200" height="600"
     fetchpriority="high" alt="Главный баннер">
<img src="card.webp" width="300" height="300"
     loading="lazy" alt="Товар">

Первая картинка видна сразу и грузится с повышенным приоритетом, вторая — ниже первого экрана, её откладывают через ленивую загрузку. Атрибуты width и height резервируют место и убирают сдвиг. Комплексная работа с метриками — отдельная задача, которую решают при ускорении сайта.