Многим пользователям, в том числе и мне, приятно и комфортно взаимодействовать с сайтами или веб-приложениями только тогда, когда происходит плавное отображение страницы браузера с 60 кадрами в секунду.
Во время просмотра содержимого страницы без активного её использования количество кадров для отображения сайта не будет иметь значение для пользователя. Но все меняется, когда выполняются тяжелые JavaScript-процессы в момент запуска страницы или когда запускаются CSS-анимации, не говоря уже о запущенном видео. Именно тогда страница может подвиснуть на несколько секунд в момент её обработки.
Поэтому веб-разработчикам необходимо обращать внимание на падение количества кадров в момент отрисовки элементов на странице для отслеживания производительности работы скриптов и плавного взаимодействия с интерфейсом сайта. Но чем же показ количества кадров на странице может помочь обычному пользователю?
Все просто, мощности нашего компьютера может не хватать для выполнения тяжелых процессов в момент отображения и обработки страницы, не всегда решает оптимизация производительности сайта. Это проблема касается слабых дешевых ноутбуков и планшетов на двухъядерных процессорах. Поэтому в данной статье я расскажу о том, как отобразить счетчик кадров на странице для браузера на базе Google Chrome и Edge, а также как выявить проблему производительности вашего устройства.
В браузерах на базе Chromium, таких как Edge или Chrome, на экране можно отображать Счетчик кадров (FPS). Для этого необходимо выполнить следующие действия:
- Откройте Инструмент разработчика, для этого используйте клавиши Ctrl+Shift+I или в меню перейдите по пути Дополнительные инструменты -> Инструмент разработчика.
- Откройте командное меню: введите на клавиатуре Ctrl+Shift+P.
- Введите кадр (или FPS для английского языка), чтобы отобразить команду Показать счетчик кадров в секунду (кадр/с) / Show Frames Per Seconds (FPS) Meter.
- Нажмите Enter.
Счетчик кадров появится в верхнем левом углу экрана, его обновление будет происходить в момент выполнения каких-либо действий на странице: просмотр видео, перемотка или активация анимаций на странице, даже перемещение курсора в окне.
Чтобы скрыть Счетчик кадров со страницы, достаточно будет выполнить все те же действия, а в списках команд выбрать Скрыть счетчик кадров в секунду (кадр/с) / Hide Frames Per Seconds (FPS) Meter.
Определяем проблемы с производительностью компьютера
А теперь вернемся к вопросу о проблеме производительности вашего устройства, на котором вы просматриваете Интернет-сайты. Чтобы убедиться в том, что проблема связана с медленной обработкой сайта из-за полностью загруженного процессора, достаточно запустить счетчик кадров на тяжелых сайтах, например запустить видео на YouTube, или попробовать пролистать Ленту рекомендаций на Дзен, или посетить любую социальную сеть.
Не важно, какие сайты вы будете посещать, но если на запущенном Счетчике кадров отображается показатель, меньше 60 кадров на всех перечисленных сайтах, то, скорее всего, вы пользуетесь устаревшим устройством, на котором смотреть сайты в Интернете очень некомфортно. Рекомендую найти более производительный компьютер, иначе ваше устройство в будущем не будет тянуть ни один современный сервис или сайт.