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+ инструмента за разработчици за вашия браузър.
