Resource Waterfall rysuje każde żądanie strony na osi czasu, każdy pasek podzielony na rzeczywiste fazy – kolejka, DNS, TCP, TLS, oczekiwanie i pobieranie – ze znacznikami FCP, LCP, DOMContentLoaded i ładowania.
Kiedy strona wydaje się powolna, pytanie jest zawsze takie samo: na co ona czeka? Odpowiedź przeglądarki znajduje się w panelu Sieć, co oznacza otwarcie DevTools, zadokowanie szuflady na sprawdzanej stronie i ponowne załadowanie, aby złapać początek ładowania.
Resource Waterfall umieszcza tę oś czasu w pływającym panelu obok strony. Każde żądanie pojawia się w postaci paska ustawionego według daty rozpoczęcia i podzielonego na segmenty według faktycznego upływu czasu: oczekiwanie na serwer lub jego zatrzymanie, wyszukiwanie DNS, połączenie TCP, uzgadnianie TLS, oczekiwanie na serwer, a następnie pobieranie. Długi niebieski segment oznacza powolny serwer; długi zielony to gruby plik; długi, szary oznacza, że prośba czekała na swoją kolej. To rozróżnienie decyduje o tym, co należy naprawić.
Przerywane znaczniki na osi czasu pokazują pierwsze malowanie zawartości, największe malowanie zawartości, ładowanie DOMContentLoaded i ładowanie, dzięki czemu możesz zobaczyć, które żądania kończą się, zanim użytkownik cokolwiek zobaczy, a które są nadal realizowane. Zasoby blokujące renderowanie i trafienia w pamięci podręcznej są oznaczane w każdym wierszu, a pojedynczy filtr blokujący obcina listę do tego, co faktycznie opóźnia pierwsze malowanie.
Filtruj według typu, wyszukuj według adresu URL lub sortuj według najwolniejszego lub największego, aby szybko znaleźć najgorszego sprawcę. Kliknij dowolny wiersz, aby wyświetlić jego pełny adres URL, protokół, rozmiary transferu i dekodowania, status i pełny podział faz. Żądania, które przychodzą, gdy panel jest otwarty, są bezpośrednio przesyłane, a funkcja Export JSON kopiuje całą oś czasu, łącznie z kamieniami milowymi, dzięki czemu wyniki dotyczące wydajności można przekazać komuś innemu bez zrzutu ekranu.
Każdy pasek jest podzielony na kolejkowane, DNS, TCP, TLS, oczekujące i pobierane, dzięki czemu można natychmiast rozróżnić wolny serwer, gruby plik i żądanie w kolejce.
Linie przerywane dla FCP, LCP, DOMContentLoaded i loading pokazują, które żądania zostały zakończone, zanim użytkownik zobaczył treść, a które nadal są po niej uruchamiane.
Jedno kliknięcie zmniejsza listę do zasobów faktycznie zawierających pierwszą farbę, a łączna liczba blokowań jest wyświetlana na pasku podsumowania.
Zasoby udostępniane z pamięci podręcznej są oznaczane i etykietowane, a nie pojawiają się jako tajemnicze wiersze zerowe, dzięki czemu możesz sprawdzić, czy buforowanie naprawdę działa.
Zawężaj według typu — dokumentu, CSS, JS, obrazów, czcionek, XHR, multimediów — wyszukuj według adresu URL lub sortuj według najwolniejszego lub największego, aby w ciągu kilku sekund dotrzeć do najgorszego sprawcy.
Skopiuj cały wodospad w formacie JSON, łącznie z kamieniami milowymi, sumami i fazami na żądanie, aby dołączyć do zgłoszenia lub porównać z późniejszym uruchomieniem.
Filtruj zasoby blokujące renderowanie i zobacz dokładne arkusze stylów i skrypty stojące pomiędzy odwiedzającym a widoczną treścią.
Sortuj według najwolniejszego i obserwuj, jak na górze pojawia się dostawca usług analitycznych, czcionek lub czatu z długą fazą oczekiwania, która nie ma nic wspólnego z Twoim kodem.
Przeczytaj kolory faz: czas spędzony na oczekiwaniu to problem z backendem lub CDN, czas spędzony na pobieraniu to problem z rozmiarem pliku. Rozwiązanie jest inne dla każdego.
Załaduj ponownie i potwierdź, że zasoby pochodzą z pamięci podręcznej i że rozmiary transferu są znacznie mniejsze niż rozmiary zdekodowane, co dowodzi, że kompresja jest rzeczywiście włączona.
Wyeksportuj oś czasu w formacie JSON i dołącz ją do zgłoszenia, aby następna osoba zobaczyła te same liczby, zamiast próbować odtworzyć Twoją sesję.
Kliknij ikonę Resource Waterfall w doku DevSuite Pro. Wszystko, co strona załadowała do tej pory, natychmiast pojawia się na osi czasu.
Załaduj ponownie przy otwartym panelu, aby przechwycić obciążenie od pierwszego żądania, w tym sam dokument i kamienie milowe malowania.
Naciśnij element blokujący, aby wyświetlić tylko zasoby blokujące renderowanie, lub wybierz typ, taki jak js lub img. Sortuj według najwolniejszych, aby umieścić najgorszego sprawcę na górze.
Kliknij dowolny wiersz, aby wyświetlić jego pełny adres URL, protokół, rozmiary, status i podział na fazy w milisekundach — a następnie skopiuj adres URL, jeśli go potrzebujesz.
Eksport JSON kopiuje pełną oś czasu z kamieniami milowymi i sumami, gotową do wklejenia do zgłoszenia lub zachowania jako zapis przed i po.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 71 narzędzi programistycznych dla swojej przeglądarki.
