Resource Waterfall piirtää kaikki sivun tekemät pyynnöt aikajanalle, jokainen palkki jaettuna todellisiin vaiheisiinsa - jonotettu, DNS, TCP, TLS, odotus ja lataus - FCP-, LCP-, DOMContentLoaded- ja -latausmerkinnöillä.
Kun sivu tuntuu hitaalta, kysymys on aina sama: mitä se odottaa? Selaimen oma vastaus on Verkko-paneelissa, mikä tarkoittaa DevToolsin avaamista, laatikon kiinnittämistä tarkasteltavan sivun päälle ja uudelleenlataamista latauksen alkamisen saavuttamiseksi.
Resource Waterfall asettaa tämän aikajanan sivun viereen kelluvaan paneeliin. Jokainen pyyntö näkyy palkkina, joka on sijoitettu sen alkamisajankohdan mukaan ja segmentoitu sen mukaan, mihin sen aika todellisuudessa kului: jonossa tai pysähtyneenä, DNS-haku, TCP-yhteys, TLS-kättely, palvelimen odottaminen, sitten lataus. Pitkä sininen segmentti on hidas palvelin; pitkä vihreä on paksu viila; pitkä harmaa tarkoittaa, että pyyntö istui odottamassa vuoroaan. Ero päättää, mitä sinun pitäisi korjata.
Aikajanalla olevat katkoviivamerkit osoittavat First Contentful Paint, Largest Contentful Paint, DOMContentLoaded ja lataa, joten näet, mitkä pyynnöt päättyvät ennen kuin käyttäjä näkee mitään ja mitkä ovat edelleen käynnissä myöhemmin. Renderöinnin estävät resurssit ja välimuistin osumat merkitään jokaiselle riville, ja yksi estosuodatin katkaisee luettelon siihen, mikä todella viivästyttää ensimmäistä maalia.
Suodata tyypin mukaan, hae URL-osoitteen mukaan tai lajittele hitaimman tai suurimman mukaan löytääksesi pahimman rikoksentekijän nopeasti. Napsauta mitä tahansa riviä nähdäksesi sen täydellisen URL-osoitteen, protokollan, siirto- ja dekoodatut koot, tilan ja täydellisen vaiheerittelyn. Paneelin ollessa auki saapuvat pyynnöt virtaavat suoraan sisään, ja Export JSON kopioi koko aikajanan, virstanpylväät mukaan lukien, jotta suorituskykyhavainnot voidaan luovuttaa jollekin muulle ilman kuvakaappausta.
Jokainen palkki on jaettu jonoon, DNS:iin, TCP:hen, TLS:iin, odottaviin ja latauksiin, joten hidas palvelin, paksu tiedosto ja jonossa oleva pyyntö ovat välittömästi erotettavissa.
Katkoviivat FCP-, LCP-, DOMContentLoaded- ja load osoittavat, mitkä pyynnöt valmistuvat ennen kuin käyttäjä näkee sisällön ja mitkä ovat edelleen käynnissä sen jälkeen.
Yksi napsautus vähentää luettelon resursseihin, jotka todella pitävät ensimmäisen maalin, ja yhteenvetopalkissa näkyy estojen kokonaismäärä.
Välimuistista tarjotut resurssit on merkitty ja merkitty sen sijaan, että ne näkyisivät salaperäisinä nollatavuisina riveinä, jotta voit varmistaa, että välimuisti todella toimii.
Rajaa tyypin mukaan – asiakirja, CSS, JS, kuvat, fontit, XHR, media – hae URL-osoitteen mukaan tai lajittele hitaimman tai suurimman mukaan tavoittaaksesi pahimman rikoksentekijän sekunneissa.
Kopioi koko vesiputous JSON-muodossa, mukaan lukien virstanpylväät, kokonaissummat ja pyyntökohtaiset vaiheet, liittääksesi lippuun tai vertaillaksesi sitä myöhempään ajoon.
Suodata renderöinnin estäviä resursseja ja näet tarkat tyylisivut ja komentosarjat vierailijasi ja näkyvän sisällön välissä.
Lajittele hitaimman mukaan ja katso, kuinka analytiikka-, kirjasin- tai chat-palveluntarjoaja ilmestyy yläreunaan pitkällä odotusvaiheella, jolla ei ole mitään tekemistä koodisi kanssa.
Lue vaiheen värit: odotusaika on tausta- tai CDN-ongelma, lataamiseen käytetty aika on tiedostokokoongelma. Korjaus on jokaiselle erilainen.
Lataa uudelleen ja varmista, että resurssit tulevat välimuistista ja että siirtokoot ovat paljon pienempiä kuin dekoodatut koot, mikä todistaa, että pakkaus on todella käytössä.
Vie aikajana JSON-muodossa ja liitä se lippuun, jotta seuraava henkilö näkee samat numerot sen sijaan, että hän yrittäisi toistaa istuntosi.
Napsauta Resource Waterfall-kuvaketta DevSuite Pro Dockissa. Kaikki sivun tähän mennessä ladattu näkyy aikajanalla välittömästi.
Lataa uudelleen paneeli auki, jotta voit tallentaa kuorman heti ensimmäisestä pyynnöstä, mukaan lukien itse asiakirja ja maalin virstanpylväät.
Paina estosirua nähdäksesi vain renderöinnin estävät resurssit, tai valitse tyyppi, kuten js tai img. Lajittele hitain mukaan, jotta saat pahin rikoksentekijän kärkeen.
Napsauta mitä tahansa riviä nähdäksesi sen täydellisen URL-osoitteen, protokollan, koot, tilan ja vaiheittaisen erittelyn millisekunteina – ja kopioi URL-osoite, jos tarvitset sitä.
Export JSON kopioi koko aikajanan virstanpylväillä ja kokonaissummalla, valmiina liitettäväksi lippuun tai säilytettäväksi ennen ja jälkeen -tietueena.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 71 kehittäjätyökalua selaimellesi.
