Resource Waterfall nubrėžia kiekvieną puslapio užklausą laiko juostoje, kiekviena juosta suskirstyta į realias fazes – eilėje, DNS, TCP, TLS, laukimas ir atsisiuntimas – su FCP, LCP, DOMContentLoaded ir įkėlimo žymekliais.
Kai puslapis atrodo lėtas, visada kyla tas pats klausimas: ko jis laukia? Pačios naršyklės atsakymas yra tinklo skydelyje, o tai reiškia, kad reikia atidaryti DevTools, prijungti stalčių virš tikrinamo puslapio ir įkelti iš naujo, kad būtų užfiksuota įkėlimo pradžia.
Resource Waterfall pateikia tą laiko juostą slankiojoje skydelyje šalia puslapio. Kiekviena užklausa rodoma kaip juosta, išdėstyta pagal jos pradžią ir suskirstyta pagal tai, kur iš tikrųjų praėjo laikas: eilėje ar sustojo, DNS paieška, TCP prisijungimas, TLS rankos paspaudimas, serverio laukimas, tada atsisiuntimas. Ilgas mėlynas segmentas yra lėtas serveris; ilgas žalias yra riebus failas; ilgas pilkas reiškia, kad užklausa laukia savo eilės. Skirtumas nusprendžia, ką turėtumėte taisyti.
Brūkšniniai žymekliai laiko juostoje rodo First Contentful Paint, Largest Contentful Paint, DOMContentLoaded ir įkelia, todėl galite matyti, kurios užklausos baigiamos, kol vartotojas nieko nepamatys, o kurios tebevykdomos vėliau. Pateikimą blokuojantys ištekliai ir talpyklos įvykiai pažymimi kiekvienoje eilutėje, o vienas blokavimo filtras sumažina sąrašą iki to, kas iš tikrųjų atitolina pirmąjį dažymą.
Filtruokite pagal tipą, ieškokite pagal URL arba rūšiuokite pagal lėčiausią ar didžiausią, kad greitai rastumėte blogiausią pažeidėją. Spustelėkite bet kurią eilutę, kad pamatytumėte visą jos URL, protokolą, perdavimo ir iššifruotus dydžius, būseną ir visą fazės suskirstymą. Užklausos, gautos, kol skydelis atidarytas, perduodama tiesiai, o „Export JSON“ nukopijuoja visą laiko juostą, įskaitant gaires, todėl našumo išvadas galima perduoti kam nors kitam be ekrano kopijos.
Kiekviena juosta yra padalinta į eilę, DNS, TCP, TLS, laukiama ir atsisiunčiama, todėl lėtas serveris, storas failas ir eilėje esanti užklausa yra iš karto atskiriami.
Brūkšninės FCP, LCP, DOMContentLoaded ir load linijos rodo, kurios užklausos užbaigiamos prieš vartotojui pamatant turinį ir kurios vis dar vykdomos po jo.
Vienu spustelėjimu sąrašas sumažinamas iki išteklių, kuriuose iš tikrųjų yra pirmasis dažymas, o suvestinės juostoje rodomas bendras blokavimo skaičius.
Ištekliai, teikiami iš talpyklos, yra pažymėti ir pažymėti, o ne rodomi kaip paslaptingos nulio baitų eilutės, todėl galite patikrinti, ar talpyklos kaupimas tikrai veikia.
Susiaurinkite pagal tipą – dokumentas, CSS, JS, vaizdai, šriftai, XHR, medija – ieškokite pagal URL arba rūšiuokite pagal lėčiausią ar didžiausią, kad per kelias sekundes pasiektumėte didžiausią pažeidėją.
Nukopijuokite visą krioklį kaip JSON, įskaitant etapus, sumas ir užklausos fazes, kad galėtumėte pridėti prie bilieto arba palyginti su vėlesniu paleidimu.
Filtruokite į pateikimą blokuojančius išteklius ir peržiūrėkite tikslius stilių lapus bei scenarijus, esančius tarp jūsų lankytojo ir matomo turinio.
Rūšiuokite pagal lėčiausią ir stebėkite, kaip viršuje pasirodo analizės, šrifto ar pokalbių teikėjas su ilga laukimo faze, kuri neturi nieko bendra su jūsų kodu.
Perskaitykite fazių spalvas: laikas, praleistas laukiant, yra pagrindinė arba CDN problema, laikas, praleistas atsisiunčiant, yra failo dydžio problema. Pataisymas kiekvienam yra skirtingas.
Įkelkite iš naujo ir patvirtinkite, kad ištekliai gaunami iš talpyklos ir kad perdavimo dydžiai yra daug mažesni nei iššifruoti, o tai įrodo, kad glaudinimas iš tikrųjų įjungtas.
Eksportuokite laiko juostą kaip JSON ir pridėkite ją prie bilieto, kad kitas asmuo matytų tuos pačius numerius, o ne bandytų atkurti jūsų seansą.
DevSuite Pro doke spustelėkite piktogramą Resource Waterfall. Viskas, ką iki šiol puslapis įkėlė, iš karto pasirodo laiko juostoje.
Įkelkite iš naujo atidarę skydelį, kad užfiksuotumėte apkrovą nuo pat pirmos užklausos, įskaitant patį dokumentą ir dažymo etapus.
Paspauskite blokavimo lustą, kad pamatytumėte tik pateikimą blokuojančius išteklius, arba pasirinkite tipą, pvz., js arba img. Rūšiuokite pagal lėčiausią, kad prasčiausias nusikaltėlis būtų viršuje.
Spustelėkite bet kurią eilutę, kad pamatytumėte visą jos URL, protokolą, dydžius, būseną ir etapinį suskirstymą milisekundėmis – ir nukopijuokite URL, jei jo reikia.
Eksportuoti JSON nukopijuoja visą laiko juostą su etapais ir sumomis, paruošta įklijuoti į bilietą arba išsaugoti kaip įrašą prieš ir po.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 71+ kūrėjų įrankius savo naršyklei.
