Мы все слышали, насколько важна производительность. Но когда мы говорим о производительности и о том, как сделать веб-сайты «быстрыми», что конкретно мы имеем в виду?
Правда в том, что производительность относительна:
- Сайт может быть быстрым для одного пользователя (в быстрой сети с мощным устройством), но медленным для другого пользователя (в медленной сети с недорогим устройством).
- Два сайта могут завершить загрузку за одинаковое время, но может показаться, что один из них загружается быстрее, если контент загружается постепенно, а не дожидаясь конца, чтобы что-либо отобразить.
- Может показаться, что сайт загружается быстро, но затем медленно или вообще не реагирует на взаимодействие с пользователем.
Говоря о производительности, важно быть точным и относиться к производительности с точки зрения показателей , объективных критериев, которые можно измерить количественно. Но также важно убедиться, что измеряемые вами показатели полезны.
Метрики
Исторически производительность Интернета измерялась событием load . Однако, несмотря на то, что load — это четко определенный момент жизненного цикла страницы, этот момент не обязательно соответствует чему-либо, что волнует пользователя.
Например, сервер может ответить минимальной страницей, которая «загружается» немедленно, но затем откладывает получение содержимого или отображение чего-либо на странице до тех пор, пока не произойдет несколько секунд после возникновения события load . Технически такая страница имеет быстрое время загрузки, но это время не соответствует тому, как пользователь воспринимает загрузку страницы.
В течение последних нескольких лет члены команды Chrome в сотрудничестве с рабочей группой W3C по веб-производительности работали над стандартизацией набора новых API и показателей, которые более точно измеряют, как пользователи воспринимают производительность веб-страницы.
Чтобы гарантировать, что метрики актуальны для пользователей, мы формулируем их вокруг нескольких ключевых вопросов:
| Это происходит? | Навигация началась успешно? Сервер ответил? |
| Это полезно? | Достаточно ли визуализированного контента, чтобы пользователи могли с ним взаимодействовать? |
| Можно ли его использовать? | Могут ли пользователи взаимодействовать со страницей или она занята? |
| Это восхитительно? | Является ли взаимодействие плавным и естественным, без задержек и рывков? |
Как измеряются показатели
Показатели производительности обычно измеряются одним из двух способов:
- В лаборатории: использование инструментов для моделирования загрузки страницы в согласованной, контролируемой среде.
- В поле : реальные пользователи, фактически загружающие страницу и взаимодействующие с ней.
Ни один из этих вариантов не обязательно лучше или хуже другого. На самом деле, для обеспечения хорошей производительности обычно лучше использовать оба варианта.
В лаборатории
Тестирование производительности в лаборатории имеет важное значение при разработке новых функций. Прежде чем функции будут выпущены в производство, невозможно измерить их характеристики производительности на реальных пользователях, поэтому тестирование их в лаборатории до выпуска функции — лучший способ предотвратить снижение производительности.
В поле
С другой стороны, хотя тестирование в лаборатории является разумным показателем производительности, оно не обязательно отражает то, как все пользователи воспринимают ваш сайт.
Производительность сайта может существенно различаться в зависимости от возможностей устройства пользователя и условий сети. Оно также может варьироваться в зависимости от того, взаимодействует ли (и как) пользователь со страницей.
Загрузка страниц также не всегда детерминирована. Например, сайты, загружающие персонализированный контент или рекламу, могут иметь совершенно разные характеристики производительности от пользователя к пользователю. Лабораторный тест не уловит этих различий.
Единственный способ по-настоящему узнать, как ваш сайт работает для ваших пользователей, — это фактически измерить его производительность, когда эти пользователи загружают его и взаимодействуют с ним. Этот тип измерения обычно называется мониторингом реальных пользователей (RUM) .
Типы метрик
Существует несколько других типов показателей, которые имеют отношение к тому, как пользователи воспринимают производительность:
- Воспринимаемая скорость загрузки: насколько быстро страница может загрузиться и отобразить все визуальные элементы на экране.
- Скорость реагирования на нагрузку: насколько быстро страница может загружать и выполнять любой код JavaScript, необходимый для того, чтобы компоненты быстро реагировали на взаимодействие с пользователем.
- Отзывчивость во время выполнения: насколько быстро страница может реагировать на взаимодействие с пользователем после загрузки.
- Визуальная стабильность: смещаются ли элементы на странице так, как не ожидают пользователи, что потенциально мешает их взаимодействию?
- Плавность: визуализируются ли переходы и анимация с постоянной частотой кадров и плавно ли они переходят из одного состояния в другое?
Учитывая все эти типы показателей производительности, мы надеемся, ясно, что ни одна метрика не достаточна для отражения всех характеристик производительности страницы.
Важные показатели для измерения
- Первая содержательная краска (FCP)
- Время с момента начала загрузки страницы до момента отображения какой-либо части содержимого страницы на экране. ( лаборатория , поле )
- Самая большая содержательная краска (LCP)
- Время от начала загрузки страницы до момента отображения на экране самого большого текстового блока или элемента изображения. ( лаборатория , поле )
- Взаимодействие со следующей отрисовкой (INP)
- Задержка каждого касания, щелчка или взаимодействия с клавиатурой на странице. В зависимости от количества взаимодействий этот показатель выбирает наихудшую (или близкую к наихудшей) задержку взаимодействия на странице в качестве единого репрезентативного значения для описания общей реакции страницы. ( лаборатория , поле )
- Общее время блокировки (TBT)
- Общее количество времени между FCP и временем взаимодействия (TTI) , в течение которого основной поток был заблокирован на время, достаточное для предотвращения ответа на ввод. ( лаборатория )
- Совокупное изменение макета (CLS)
- Совокупная оценка всех неожиданных изменений макета, которые происходят между началом загрузки страницы и изменением состояния ее жизненного цикла на скрытое. ( лаборатория , поле )
- Время до первого байта (TTFB)
- Время, необходимое сети для ответа на запрос пользователя первым байтом ресурса. ( лаборатория , поле )
В этот список входят показатели, измеряющие многие аспекты производительности, имеющие отношение к пользователям, но он не включает в себя все. Например, не рассматриваются скорость реагирования и плавность выполнения во время выполнения.
В некоторых случаях будут введены новые метрики, чтобы охватить недостающие области, но в других случаях лучшими метриками будут те, которые специально адаптированы для вашего сайта.
Пользовательские метрики
Перечисленные здесь показатели производительности позволяют получить общее представление о характеристиках производительности большинства сайтов в Интернете. Они также хороши тем, что имеют общий набор показателей для сайтов, позволяющий сравнивать их эффективность с конкурентами.
Однако бывают случаи, когда конкретный сайт в некотором роде уникален, и для получения полной картины производительности требуются дополнительные показатели. Например, метрика LCP предназначена для измерения момента завершения загрузки основного содержимого страницы, но могут быть случаи, когда самый большой элемент не является частью основного содержимого страницы, что делает LCP неактуальным.
Для решения таких случаев Рабочая группа по веб-производительности также стандартизировала API-интерфейсы нижнего уровня, которые могут быть полезны для реализации ваших собственных показателей:
- API синхронизации пользователя
- API длинных задач
- API синхронизации элементов
- API синхронизации навигации
- API синхронизации ресурсов
- Тайминг сервера
См. руководство по пользовательским метрикам , чтобы узнать, как использовать эти API для измерения характеристик производительности, характерных для вашего сайта.