Водопад запросов: найти цепочку поздней загрузки
Водопад Network показывает, когда начинаются и заканчиваются запросы. Его задача в упражнении — обнаружить зависимость загрузок, а не назначить виновника по одной длинной полосе.
Назначение
Водопад Network показывает, когда начинаются и заканчиваются запросы. Его задача в упражнении — обнаружить зависимость загрузок, а не назначить виновника по одной длинной полосе.
Как это работает
Запрос может ждать очередь, соединение, ответ сервера или передачу данных. Initiator помогает понять, кто обнаружил ресурс: HTML, таблица стилей или скрипт. Для сравнения фиксируйте одинаковые условия сети и кеша.
Пример
Учебная цепочка:
index.html → styles.css → background.webp
Что записать:
URL | инициатор | начало | ожидание ответа | передача | кешЧто должно получиться
Если изображение объявлено в CSS, оно может обнаружиться позже самой таблицы стилей. Таблица наблюдений помогает отделить позднее обнаружение от большого размера файла или задержки сервера.
Граница применения и частая ошибка
Не приравнивайте полное время запроса к времени работы приложения на сервере. Перенаправления, DNS, TLS и кеш меняют картину. Массовое добавление preload без понимания приоритетов способно конкурировать с более важными ресурсами.
Самостоятельная проверка
Снимите водопад своей страницы при первом и повторном открытии. Найдите один поздний ресурс, изучите инициатор и предложите одну правку. Повторите замер в тех же условиях, не меняя одновременно сжатие, хостинг и разметку.