QVORIX

Материалы

RESEARCH #017 Обновлён

Скорость как форма уважения

Что на самом деле измеряют метрики загрузки, чего они не видят и почему быстрый сайт всё ещё может ощущаться медленным.

Редакция QVORIXОбновлено 3 мин2 источников
Смартфон с индикатором загрузки и заголовок «Скорость — как форма уважения»
Исходный вопрос Почему интерфейсы стали быстрее, а ожидание — длиннее? QUESTION #041

Скорость обсуждают как техническую характеристику. На практике это форма отношения: сколько времени продукт считает нормальным взять у человека и как честно он об этом сообщает.

Экран в момент ожидания: данные получены, интерфейс ещё не показал их.
Экран в момент ожидания: данные получены, интерфейс ещё не показал их.

Что измеряют метрики

Источник говорит

Набор Web Vitals описывает три разных события: отрисовку крупнейшего элемента, задержку отклика на взаимодействие и накопленные смещения макета. Это не одно свойство «быстро», а три независимые характеристики.

Три метрики описывают три разных момента. Хорошая цифра в одной не компенсирует провал в другой.
МетрикаЧто фиксируетЧто переживает человек
LCPОтрисовку крупнейшего элемента«Страница появилась»
INPЗадержку отклика на действие«Меня услышали»
CLSСмещения макета после отрисовки«Ничего не прыгает под рукой»

Отсюда практическое следствие: страница может показывать хорошие цифры по отрисовке и при этом раздражать, потому что отвечает на нажатие с задержкой. И наоборот — страница с тяжёлой первой отрисовкой ощущается собранной, если реагирует мгновенно.

Чего метрики не видят

Ни одна из метрик не измеряет время, которое интерфейс добавляет сам: переход между экранами, задержку перед появлением подсказки, анимацию раскрытия. Это время не считается «загрузкой», но переживается именно как ожидание.

Интерпретация

Мы предполагаем, что источник расхождения между цифрами и ощущением — именно этот добавленный слой. Он проектируется дизайнером, а не приходит из сети.

Где анимация помогает

Движение работает, когда объясняет связь: откуда появился элемент, куда он ушёл, что изменилось. Оно перестаёт работать, когда становится обязательной паузой между намерением и результатом.

  • Отклик на действие — мгновенно, без анимации входа.
  • Смена контекста — короткий переход, который показывает связь между экранами.
  • Появление второстепенного — можно анимировать, потому что человек в этот момент не ждёт.

Противоположная точка зрения

Есть обоснованное возражение: короткая анимация маскирует неизбежную задержку и снижает раздражение. Оно верно, когда задержка действительно неизбежна. Чаще анимация добавляется к уже готовому результату.

Интерфейс не обязан быть быстрым. Он обязан быть честным насчёт того, сколько ещё ждать.

Формулировка, к которой мы пришли в ходе этого исследования

Как мы это проверяем

Метод простой и повторяемый — его можно применить к любому своему проекту за один вечер.

  1. Выбрать три действия, которые человек совершает чаще всего: открыть, отправить, переключить.
  2. Записать экран и посчитать кадры от нажатия до первого изменения на экране.
  3. Отдельно посчитать кадры до момента, когда экраном можно пользоваться.
  4. Повторить с выключенными анимациями и сравнить оба интервала.

Разница между двумя замерами и есть тот слой, который добавил дизайн. Если он больше первого интервала, анимация перестала объяснять и начала задерживать.

Не подтверждено

Пороговые значения мы не приводим: у нас нет выборки, на которой их можно было бы установить. Называть здесь конкретные миллисекунды означало бы выдать ощущение за измерение.

Что с этим делать

Мы разделяем два интервала и смотрим на них отдельно: время до первого визуального отклика на действие и время до готовности экрана. Первое отвечает за ощущение, второе — за метрику. Оптимизировать нужно оба, но начинать стоит с первого.

Редакционный вывод

Быстрый интерфейс — это интерфейс, который отвечает сразу и честно сообщает, сколько ещё ждать. Сокращение общего времени без этого даёт цифры, но не ощущение.

Гипотеза

Если сократить задержку до первого отклика ниже порога заметности, общее время загрузки перестанет влиять на оценку скорости в разумных пределах. Проверяем.

Источники и примечания

  1. Google / Chrome teamWeb Vitals

    web.dev · 2020—

    Открыть источник
  2. MDN Web Docsprefers-reduced-motion

    MDN · —

    Открыть источник

Ссылки ведут на материалы их авторов. QVORIX публикует самостоятельные тексты, пересказы и анализ; чужие материалы целиком здесь не размещаются.

Об авторе

Редакция QVORIX

Коллективный автор студии

Наблюдатели
Следующий вопрос Что человек на самом деле подтверждает, нажимая «Согласен»? QUESTION #039 Открыт