First CPU Idle
First CPU Idle (первое бездействие CPU) - это метрика производительности веб-страницы, которая измеряет момент времени, когда процессор браузера впервые становится достаточно свободным, чтобы начать обработку пользовательского ввода. Другими словами, это момент, когда страница перестаёт быть "замороженной" и начинает реагировать на действия пользователя.
Для маркетолога и владельца бизнеса First CPU Idle является важной метрикой пользовательского опыта, тесно связанной с восприятием скорости работы сайта. Если пользователь видит страницу (First Contentful Paint), но не может нажать на кнопку или прокрутить страницу, потому что браузер занят выполнением скриптов, это создаёт ощущение "тормозящего" сайта и приводит к разочарованию и отказу.
TOC
Определение и сущность
[править]First CPU Idle фиксирует момент, когда:
- Основной контент страницы уже отображён
- Браузер завершил выполнение критических JavaScript-скриптов
- Процессор впервые освободился для обработки пользовательского ввода
Важно понимать, что First CPU Idle не означает, что все скрипты уже выполнены. Это момент, когда браузер становится достаточно свободным, чтобы реагировать на действия пользователя, даже если фоновая загрузка данных или выполнение некритичных скриптов ещё продолжаются.
Аналогия: Представьте, что вы зашли в кафе. First Contentful Paint - это когда вы увидели столик. First CPU Idle - это когда официант подошёл к вам и готов принять заказ, даже если на кухне ещё не начали готовить вашу еду.
First CPU Idle vs другие метрики
[править]| Метрика | Что измеряет | Отличие от First CPU Idle |
|---|---|---|
| FCP (First Contentful Paint) | Первое появление контента на экране | Не учитывает готовность к взаимодействию |
| TTI (Time to Interactive) | Полная готовность страницы к взаимодействию | Учитывает завершение всех скриптов; First CPU Idle наступает раньше |
| FID (First Input Delay) | Задержка первого взаимодействия | Измеряет фактическую задержку, а не прогнозирует момент |
| First CPU Idle | Первый момент, когда CPU может реагировать на ввод | Компромисс между скоростью отображения и интерактивностью |
Как измеряется First CPU Idle
[править]В Chrome DevTools
[править]В панели Performance при записи загрузки страницы First CPU Idle отображается как метка на временной шкале. Чтобы увидеть:
- Открыть DevTools (F12) → вкладка Performance
- Нажать кнопку записи (⏺) или перезагрузить страницу с записью
- После остановки записи на временной шкале будет отмечен момент First CPU Idle
В Lighthouse
[править]Lighthouse отображает метрику Time to Interactive (TTI), которая является более строгой версией. First CPU Idle - это более ранний момент, когда страница становится "достаточно интерактивной", но не обязательно полностью готова.
В Web Vitals API
[править]Для программного отслеживания можно использовать API Performance Observer, но First CPU Idle не входит в стандартный набор Web Vitals.
Что влияет на First CPU Idle
[править]| Фактор | Влияние |
|---|---|
| JavaScript-скрипты | Тяжёлые, синхронные скрипты блокируют основной поток, отодвигая First CPU Idle |
| Размер и количество скриптов | Чем больше кода нужно выполнить, тем дольше CPU остаётся занятым |
| Порядок загрузки | Блокирующие скрипты (без async/defer) задерживают освобождение CPU |
| Сложность CSS | Пересчёт стилей (recalc) также потребляет ресурсы CPU |
| Аппаратные характеристики | На слабых устройствах (мобильные телефоны, старые компьютеры) First CPU Idle наступает позже |
Как улучшить First CPU Idle
[править]1. Оптимизировать JavaScript
[править]- Использовать async и defer для некритичных скриптов
- Разделять код (code splitting) - загружать только то, что нужно для первого экрана
- Удалять неиспользуемый код
- Минифицировать скрипты
2. Сокращать время выполнения скриптов
[править]- Выносить тяжелые вычисления в веб-воркеры (Web Workers)
- Разбивать длинные задачи (long tasks) на более мелкие с помощью setTimeout или requestIdleCallback
- Откладывать выполнение некритичных скриптов
3. Оптимизировать CSS
[править]- Использовать Critical CSS (критический CSS встраивать, остальное загружать асинхронно)
- Упрощать CSS-селекторы
- Удалять неиспользуемый CSS
4. Уменьшать количество ресурсов
[править]- Объединять скрипты (разумно, чтобы не создавать один огромный файл)
- Использовать кэширование для повторных посещений
Плохие и хорошие значения
[править]| Значение | Оценка |
|---|---|
| < 1 секунды | Отлично |
| 1-2 секунды | Хорошо |
| 2-4 секунды | Требует улучшения |
| > 4 секунд | Плохо (пользователи могут уходить) |
Инструменты для диагностики
[править]| Инструмент | Назначение |
|---|---|
| Chrome DevTools Performance | Детальный анализ загрузки и выполнения скриптов |
| Lighthouse | Аудит производительности с рекомендациями |
| WebPageTest | Тестирование на реальных устройствах и сетях |
| Sitespeed.io | Автоматизированный мониторинг производительности |
Связь с бизнес-метриками
[править]Плохое значение First CPU Idle напрямую влияет на:
- Показатель отказов (bounce rate) - пользователи уходят, если страница не реагирует
- Конверсию - не могут кликнуть на кнопку, пока CPU занят
- Удовлетворённость пользователей - субъективное восприятие "тормозящего" сайта
- SEO-ранжирование - поисковые системы учитывают скорость загрузки и интерактивность
