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