Измерение и диагностика — Примеры

Пример 1 — Водопад, прочитанный по размеру, а не по порядку

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

примерная холодная загрузка с ограничением
index.html   ████
app.css          ████
app.js             ██████████
hero.avif                 ████████

Решение

прочтение
app.css стартует только после HTML и блокирует первую отрисовку  -> сделать её меньше или встроить критическую часть
hero.avif обнаруживается последним, но он и есть самый большой элемент  -> предзагрузить и грузить сразу
app.js разбирается весь интервал, пока ничего не отрисовано      -> отложить до первой отрисовки

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

Пример 2 — Один лабораторный прогон с тёплым кэшем

Изменение объявляют успешным только потому, что одна-единственная запись выглядела быстрее. Никто не перепроверяет остальные показатели, и улучшение исчезает в продакшене. Скажите, чего не хватает протоколу измерения, и сделайте сравнение достоверным. Числа ниже — форма, а не данные вашего проекта.

прогон 1 (кэш включён, без ограничений):  1.1 с до первой отрисовки
изменение применено
прогон 2 (те же условия):                 0.9 с
вывод: быстрее на 18%

Решение

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

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