Network и производительность — Примеры

Пример 1 — Самый маленький запрос, задерживающий первую отрисовку

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

состояние панели (иллюстративное, холодная загрузка с ограничением)
index.html    ███
vendor.js        ██████████████       3 KB передано, 140 ms на разбор
app.css               ██              1.2 KB передано
first paint                        ↑

Решение

прочтение
vendor.js стартует после HTML и разбирается до первой отрисовки
он крошечный по сети, но блокирует на 140 ms -> размер тут не цена
app.css не может быть применён, пока vendor.js не закончился

изменение: отложите vendor.js, чтобы первая отрисовка его не ждала

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

Пример 2 — Взаимодействие, которое пропадает

Меню открывается заметно дольше, чем предполагает код, а запись показывает один длинный блок в главном потоке. Скажите, что доказывает блок и как его читать, затем назовите, что менять. Числа иллюстративны и не являются измерением ваших собственных страниц.

состояние панели (иллюстративное, CPU с ограничением)
главный поток
[ задача 210 ms ]        ← включает 180 ms "script", затем 12 ms вёрстки, 4 ms отрисовки
  └── function hydrateWidgets()   self 96 ms

Решение

прочтение
задача дольше ~50 ms задерживает любой ввод, пришедший во время неё -> клик ждёт за 210 ms
в блоке доминирует script, и hydrateWidgets несёт больше всего self-time
вёрстка появляется один раз, значит это не цикл «прочитать — записать»

изменение: сделать hydrateWidgets меньше или разбить его, чтобы браузер мог отрисовать и обработать ввод

Разворачивание блока показывает имена функций и их self-time, чего обычно достаточно, чтобы найти причину, не добавляя ни одной строки логирования. Повторяющиеся события вёрстки после каждой записи стиля указывали бы на цикл, который читает свойство вёрстки и заставляет пересчитывать её, а если во взаимодействии преобладает время скрипта, значит, обработчик делает слишком много синхронно. Ограничьте CPU и запишите холодную загрузку, прежде чем делать вывод.