Resource Waterfall малює кожен запит, зроблений сторінкою, на часовій шкалі, кожен рядок розбивається на його реальні фази — у черзі, DNS, TCP, TLS, очікування та завантаження — з маркерами для FCP, LCP, DOMContentLoaded і завантаження.
Коли сторінка працює повільно, питання завжди одне: чого вона чекає? Власна відповідь веб-переглядача знаходиться на панелі «Мережа», що означає відкриття DevTools, прикріплення ящика до сторінки, яку ви перевіряєте, і перезавантаження, щоб зафіксувати початок завантаження.
Resource Waterfall розміщує цю часову шкалу на плаваючій панелі поруч із сторінкою. Кожен запит відображається у вигляді смужки, яка розташовується за датою його початку та сегментується за фактичним часом: у черзі чи зупинці, DNS-пошук, TCP-з’єднання, TLS-рукостискання, очікування сервера та завантаження. Довгий синій сегмент означає повільний сервер; довгий зелений - жирний файл; довгий сірий означає, що запит чекає своєї черги. Розрізнення вирішує, що ви повинні виправити.
Пунктирні маркери на часовій шкалі показують First Contentful Paint, Largest Contentful Paint, DOMContentLoaded і load, тож ви можете бачити, які запити завершуються до того, як користувач щось побачить, а які ще виконуються після цього. Ресурси, що блокують візуалізацію, і звернення до кешу позначаються в кожному рядку, а єдиний фільтр блокування скорочує список до того, що насправді затримує перше малювання.
Фільтруйте за типом, шукайте за URL-адресою або сортуйте за найповільнішим чи найбільшим, щоб швидко знайти найгіршого порушника. Клацніть будь-який рядок, щоб переглянути його повну URL-адресу, протокол, розміри передачі та декодування, статус і повний розподіл фаз. Запити, які надходять, коли панель відкрита, надходять прямо всередину, а Export JSON копіює всю хронологію, включно з основними етапами, тому результати продуктивності можна передати комусь іншому без знімка екрана.
Кожен рядок розділено на чергу, DNS, TCP, TLS, очікування та завантаження, тому повільний сервер, жирний файл і запит у черзі можна відразу розрізнити.
Пунктирні лінії для FCP, LCP, DOMContentLoaded і load показують, які запити завершуються до того, як користувач побачить вміст, а які все ще виконуються після нього.
Один клік скорочує список до ресурсів, які фактично містять першу фарбу, із загальною кількістю блокувань на панелі підсумків.
Ресурси, які обслуговуються з кешу, позначаються та позначаються замість того, щоб відображатися як таємничі нуль-байтові рядки, тому ви можете перевірити, що ваше кешування дійсно працює.
Звужуйте за типом — документ, CSS, JS, зображення, шрифти, XHR, медіа — шукайте за URL-адресою або сортуйте за найповільнішим чи найбільшим, щоб досягти найгіршого порушника за лічені секунди.
Скопіюйте весь каскад як JSON, включаючи етапи, підсумки та фази кожного запиту, щоб прикріпити до заявки або порівняти з пізнішим запуском.
Відфільтруйте ресурси, що блокують рендеринг, і перегляньте точні таблиці стилів і сценарії, що стоять між вашим відвідувачем і видимим вмістом.
Сортуйте за найповільнішим і дивіться, як аналітика, шрифт або постачальник чату з’являються вгорі з довгою фазою очікування, яка не має нічого спільного з вашим кодом.
Прочитайте кольори фази: час, витрачений на очікування, є проблемою серверної частини або CDN, час, витрачений на завантаження, є проблемою розміру файлу. Виправлення різне для кожного.
Перезавантажте та підтвердьте, що ресурси надходять із кешу та що розміри передавання набагато менші за розміри декодування, доводячи, що стиснення фактично ввімкнено.
Експортуйте часову шкалу як JSON і додайте її до заявки, щоб наступна особа побачила ті самі числа, а не намагалася відтворити ваш сеанс.
Натисніть піктограму Resource Waterfall у док-станції DevSuite Pro. Усе, що сторінка завантажила до цього часу, одразу з’являється на часовій шкалі.
Перезавантажуйте з відкритою панеллю, щоб зафіксувати завантаження з першого запиту, включаючи сам документ і етапи малювання.
Натисніть чіп блокування, щоб побачити лише ресурси, що блокують візуалізацію, або виберіть тип, наприклад js або img. Сортуйте за найповільнішим, щоб поставити найгіршого порушника зверху.
Клацніть будь-який рядок, щоб переглянути його повну URL-адресу, протокол, розміри, статус і поетапну розбивку в мілісекундах — і скопіюйте URL-адресу, якщо вона вам потрібна.
Експорт JSON копіює повну хронологію з віхами та підсумками, готову для вставлення в заявку або збереження як запис до та після.
Встановіть DevSuite Pro безкоштовно та отримайте понад 71 інструментів розробника
