Как посмотреть FPS в Google Chrome

Почему стоит знать FPS

Частота кадров (FPS, frames per second) указывает, сколько отдельных изображений браузер отрисовывает за секунду. Это не то же самое, что частота обновления экрана (refresh rate) — монитор может обновляться 60 раз в секунду, но если браузер выдаёт 30 FPS, анимации будут заметно менее плавными.

Высокий FPS означает плавные анимации и отзывчивость интерфейса; низкий — подтормаживания и потенциально повышенное энергопотребление при попытках компенсировать пропуски кадров. Для веб‑разработчика или тестировщика мониторинг FPS помогает быстро локализовать проблемы производительности.

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

Как посмотреть FPS через Инструменты разработчика Chrome

1. Откройте Google Chrome и загрузите страницу, которую хотите протестировать. Правой кнопкой мыши кликните по странице и выберите Inspect, либо нажмите Ctrl + Shift + C.

2. В окне DevTools нажмите на значок с тремя вертикальными точками (Ellipsis) в правом верхнем углу панели, наведите курсор на More tools, затем выберите Rendering.

3. В секции Rendering прокрутите вниз до опции Frame Rendering Stats и поставьте галочку. После этого в левом верхнем углу вкладки отобразится окно FPS‑метра с информацией о кадрах, растере GPU и использовании памяти.

Альтернативный быстрый путь: нажмите Ctrl + Shift + P, введите «show frames» и выберите команду «show frames per second (FPS) meter». Чтобы скрыть счётчик, откройте тот же поиск и введите «hide frames». Учтите, что FPS‑метр исчезнет при закрытии DevTools.

Что измеряет FPS и когда показания вводят в заблуждение

• FPS измеряет отрисовку кадров в браузере, но не отражает аппаратную задержку монитора. Монитор с 60 Гц не получит польз от кадров выше 60 FPS.
• VSync и драйверы GPU могут ограничивать видимый FPS, поэтому счётчик может показывать чуть другие цифры, чем системные инструменты мониторинга GPU.
• При отключённом аппаратном ускорении Chrome будет рисовать иначе — FPS может резко упасть.

Когда счётчик не помогает:

• При проблемах, вызванных сетью (например, долгой загрузкой ресурсов) FPS может оставаться высоким, хотя UX плох.
• Для печатных/статичных страниц проверка FPS не даст полезной информации.

Практические рекомендации и эвристики

• Целевые ориентиры: 60 FPS — идеально для плавного UX; 30 FPS — приемлемо для некоторых видео/медиаконтентов; ниже 30 — обычно заметны подтормаживания.
• Если на мобильных устройствах часто проседает FPS, проверьте: аппаратное ускорение, тяжёлые JavaScript‑циклы, количество рендер‑блокирующих стилей и изображений большого размера.
• Закрывайте фоновые вкладки и приложения при тестировании для более стабильных измерений.

Быстрая проверка — чеклист для разных ролей

Разработчик

• Включил Frame Rendering Stats.
• Отключил расширения, влияющие на рендеринг.
• Прогнал страницу в инкогнито и сравнил показатели.

Тестировщик/QA

• Сравнил FPS на нескольких устройствах и браузерах.
• Зафиксировал шаги для воспроизведения просадок.
• Собрал логи консоли и снимки экрана с временем падения FPS.

Дизайнер

• Проверил сложные анимации при 60 и 30 FPS.
• Подумал об упрощении анимаций при низких показателях.

Геймер/пользователь

• Проверил FPS в играх/веб‑играх и сравнил с системным монитором.
• Убедился, что включено аппаратное ускорение и отключён «режим энергосбережения».

SOP: стандартная проверка производительности страницы (короткая)

1. Открыть страницу в Chrome.
2. Открыть DevTools → More tools → Rendering → включить Frame Rendering Stats.
3. Пройти по ключевым сценариям (скролл, открытие меню, анимация) и записать средний и минимальный FPS.
4. При падениях открыть Performance (DevTools) и записать временные интервалы с высоким CPU/long tasks.
5. Повторить тест в режиме инкогнито и на другом устройстве.

Критерии приёмки

• Средний FPS для интерактивных страниц ≥ 50 при тестировании на тестовой машине.
• Нет длительных «long tasks» дольше 50 мс в сценариях с просадками.

Устранение проблем — короткий план действий

1. Отключить расширения и перезапустить Chrome.
2. Включить аппаратное ускорение в настройках браузера и перезагрузить.
3. Проверить наличие тяжёлых скриптов: использовать Performance → записать профиль и найти long tasks.
4. Оптимизировать изображения (формат, размер), аудио/видео, CSS-анимации.
5. При необходимости протестировать на другом GPU/драйвере.

Важно: перед изменениями в коде зафиксируйте контрольную версию страницы и снимки тестов.

Альтернативные способы измерения FPS

• Сторонние расширения для Chrome с более детальной историей FPS (учтите приватность и разрешения расширения).
• Системные инструменты: Windows Game Bar показывает FPS для приложений; на macOS — инструменты разработчика в Xcode или сторонние утилиты.
• Инструменты профилирования (Lighthouse, WebPageTest) дают контекст производительности, но не всегда показывают живой FPS в виде счётчика.

Совместимость и примечания для локали

• Версия Chrome: инструкция применима для современных версий Chrome на настольных ОС. Названия пунктов меню могут слегка отличаться в локализованных сборках.
• На мобильных версиях Chrome инструменты разработчика доступны через удалённую отладку (remote debugging) с компьютера.

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

Нужно ли включать аппаратное ускорение для корректных измерений?

Да. Аппаратное ускорение влияет на рендеринг. Если оно отключено, FPS обычно ниже и результаты измерения менее информативны.

Можно ли доверять показаниям FPS как единственному метрику UX?

Нет. FPS важен, но стоит сочетать его с профайлингом CPU, памятью и показателями загрузки сети для полного понимания производительности.

Итог

Мониторинг FPS через DevTools — простой и быстрый способ оценить плавность веб‑страницы и выявить узкие места в отрисовке. Используйте его вместе с профайлингом Performance и проверками в разных средах, чтобы получить объективную картину.

Ключевые действия: включите Frame Rendering Stats, прогоните ключевые сценарии, зафиксируйте падения и примените профайлинг для поиска «long tasks».